Div avec des dimensions non attendues

**Amerzone38** · 11/03/2010, 10h31

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

**nsanabi** · 11/03/2010, 10h39

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

**Amerzone38** · 11/03/2010, 11h05

Voila le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**nsanabi** · 11/03/2010, 11h11

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

**Amerzone38** · 11/03/2010, 11h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
          }

**Amerzone38** · 22/03/2010, 10h54

Bonjour,

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

Merci

Div avec des dimensions non attendues

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager