Laurent Laurent - 1 month ago 7
CSS Question

Why are my div elements not aligned vertically?



/* Feuille de style (économiseur d'écran) CSS version 1.0 créée le 30.05.2016
*/

/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:#005580; /*night mode*/
background-color:black; /*screensaver mode*/
}

/* Affichage de date (en haut) */
#date{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 20px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}
#clearfix{display:block}
/* Affichage d'heure (en haut) */
#time{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 300px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}

/* Affichage du lever et de coucher de soleil */
#tag_sunrise_sunset{
font-family:Arial;
font-size: 90%;
text-align: left;
position: fixed;
top: 55px;
left: 140px;
color:black;
}

/* Affichage des données météorologiques additionnelles */
#tag_additional_weather_information{
font-family:Arial;
font-size: 100%;
text-align: center;
position: fixed;
top: 70px;
left: 450px;
width:250px;
color:black;
}

/* Affichage des alertes météorologiques */
#tag_meteo_alert{
font-family:Arial;
font-size: 100%;
text-align: center;
position: fixed;
top: 15px;
left: 450px;
width:250px;
color:red;
}

/* Affichage de la température */
#tag_temperature{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 1px;
left: 420px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}

<!DOCTYPE html>
<!--
Page d'économiseur d'écran, créée le 30.07.2016
modifiée le 02.09.2016
modifiée le 22.10.2016 (no cache)
modifiée le 23.10.2016 (inclusion de la date et de l'heure)
-->
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/screensaver.js"></script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
<div id="date"></div>
<div id="time"></div>
<div id="tag_temperature">
<p>16&deg;C</p>
</div>
</body>
</html>





I have the following html page :

<!DOCTYPE html>
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/screensaver.js"></script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
<div id="date"></div>
<div id="time"></div>
<div id="tag_temperature">
<p>16&deg;C</p>
</div>
</body>
</html>


and the following linked CSS file (extract of the file named 'mystyle_saver.css') :

/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:black; /*screensaver mode*/
}

/* Affichage de date (en haut) */
#date{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 20px;
color:white; /* screensaver mode*/
}

/* Affichage d'heure (en haut) */
#time{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 300px;
color:white; /* screensaver mode*/
}
/* Affichage de la température */
#tag_temperature{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 1px;
left: 420px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}


Now for the problem I am facing: All my div tags (date, time and tag_temperature) have the same properties : font-family, size, weight, ... and top value, however the temperature is not well aligned with the rest. The screenshot below will better illustrate this :

enter image description here

Any idea what I am doing wrong here?

Many thanks for your support.

Answer

It's because your temperature is in a <p> element which has a default top and bottom margin.

Add this to your CSS to remove it:

p {margin: 0;}

Note that this may have other undesirable side-effects on your text.

Also, your top pixel alignments are not the same on your date, time and temp.

JS fiddle here: https://jsfiddle.net/sxz3dfux/

Comments