Div avec des dimensions non attendues

Version imprimable

11/03/2010, 10h31
Amerzone38

Div avec des dimensions non attendues

Bonjour,

Je m'explique : J'ai un div qui doit accueillir mon bandeau. Ce bandeau a les dimensions suivantes :1024px x 65 px.
Quand je demande à Firefox de m'afficher la taille des blocs il me diot que mon DIV a la taille de 1024 x 70 ... Pourquoi ces 5 px ?

Merci pour vos reponses
11/03/2010, 10h39
nsanabi

les 5px ont certainement été consommées dans un margin ou un padding.
envoi du code

Voila le css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
*    {
     margin:0px;
     padding:0px
     } 
 
body {
     text-align:center;
     background-image:url(img/fond.jpg);
     background-position:center;
     background-repeat:repeat-y;
     background-color:darkmagenta;
     width:1024px;
     margin:auto;
     padding-top:20px; 
     }
 
.bandeau  {
          text-align:center;
          width:1024px;
          border:none;
          margin:0px;
          padding:0px;
          }

et voila le HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
     <head>
          <meta http-equiv="content-type" content="text/html; charset=windows-1250">
          <meta name="generator" content="PSPad editor, www.pspad.com">
          <link rel="stylesheet" media="all" type="text/css" title="style" href="style_1.css" />
               <title></title>
     </head>
     <body>
          <div class="bandeau">
               <img src="img/titre.png" alt="">
          </div>
     </body>
</html>

11/03/2010, 11h11
nsanabi

utiliser la balise code (le #), cela rendra ton code plus lisible.

tu ne précise pas la propriété height de ton bandeau
vérifier la taille de ton image img/titre.png

Excuses moi ... Je corrige :

Pour ce qui est du heigt, le DIV ne doit il pas prendre la taille du contenant quand le heigth n'est pas specifié ?
Quant à l'image elle fait bien 65 px de hauteur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
     <head>
          <meta http-equiv="content-type" content="text/html; charset=windows-1250">
          <meta name="generator" content="PSPad editor, www.pspad.com">
          <link rel="stylesheet" media="all" type="text/css" title="style" href="style_1.css" />
               <title></title>
     </head>
     <body>
          <div class="bandeau">
               <img src="img/titre.png" alt="">
          </div>
     </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
*    {
     margin:0px;
     padding:0px
     } 
 
body {
     text-align:center;
     background-image:url(img/fond.jpg);
     background-position:center;
     background-repeat:repeat-y;
     background-color:darkmagenta;
     width:1024px;
     margin:auto;
     padding-top:20px; 
     }
 
.bandeau  {
          text-align:center;
          width:1024px;
          border:none;
          margin:0px;
          padding:0px;
          }

22/03/2010, 10h54
Amerzone38

Resolu

Bonjour,

Sur un autre forum (eh oui !!?) ils ont trouvé la solution. Mettre un line height sur la class bandeau.

Merci