[CSS] height, margin

Version imprimable

09/06/2006, 21h11
Anduriel

2 pièce(s) jointe(s)

[CSS] height, margin
Salut,
J'essai de me mettre au normes transitional et avec ques des div. Pour les mises en page ça craint, faut apprendre...
Donc moi tout bêtement j'ai un div contenant une image de fond qui se répète et qui fait 5 px de hauteur.
Quand je met mon div, celui-ci doit faire 15px de haut par défaut. En mettant dans mon style height: 5px, ça décale mon div sur la gauche et la droite, mais n'agit en rien sur la hauteur:
bug.gif -> avec height: 5px;
bug2.gif -> sans précision de hauteur.

Le code (qui sert a rien :roll: ):
Code:

1 2 3 4 5 #divBgTop { background-image: url(images/top.jpg); background-repeat: repeat-x; border: 1px solid red; }
Comment faire?
Merci
09/06/2006, 21h16
Nasky

Je n'ai pas compris ton problème là. Tu définis ton div avec une taille de 15px donc quel est le rapport avec le 5px ?

Nas'
09/06/2006, 21h42
Anduriel

Non justement quand je ne précise rien, mon div s'ajuste à environ 15px de hauteur. Quand je fixe 5px de hauteur (hauteur de mon image), le div rétrécit à droite et gauche (comme le montre les images) mais pas en hauteur
09/06/2006, 22h10
Nasky

Ok c'est donc le cadre rouge que tu voudrais agrandir pour qu'il se place genre à la dimension du fond bleu?
Montre ton code avec le height puis aussi le code HTML. C'est bizarre ton truc. Y'a pas un div imbriqué dans un autre qui gène? Genre un padding-bottom qui interdit à ton cadre rouge de descendre ou je ne sais quoi dans ce style :roll:

Nas'
10/06/2006, 12h02
<romain/>

tu as mis les margin et padding a 0? tu n'a pas de div imbriqué?

Montre nous ton code ((x)html et css) on pourra t'aider plus efficacement..

romain

Oui j'ai des div imbriqués. Si vous voulez m'aider (et vous amuser par la même occasion :roll: ) je vous mes les codes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="putCenter">
   <div id="divLeftShadow">&nbsp;</div>
   <div id="divRightShadow">&nbsp;</div>
   <div id="noMarge">
 
      <div id="divHead"><span id="headTitle">Test</span></div>
      <div id="divBgTop">&nbsp;</div>
      <div id="divMenu">  
         Test
      </div>
      <div id="divBgBottom">&nbsp;</div>
      <div id="divContent">
         Test
      </div>      
 
   </div>
</div>

et 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#putCenter {
   width: 620px;
   margin-left: auto;
   margin-right: auto;
}
#divLeftShadow {
   width: 10px;
   float: left;
   background-image: url(images/left.jpg);
   background-repeat: repeat-y;
 height: 575px;
}
#divRightShadow {
   float:right;
 height: 575px;
   width: 10px;
   background-image: url(images/right.jpg);
   background-repeat: repeat-y;
}
#divBgTop {
   background-image: url(images/top.jpg);
   background-repeat: repeat-x;
   border: 1px solid red;
}
#divBgBottom {
   background-image: url(images/bottom.jpg);
   background-repeat: repeat-x;
}
#divHead {
   margin: 0 10px 0 10px;
 padding: 10px;
   background-color: white;
}
#divMenu {
 background: #A3C6E5;
 text-align: center;
}
#noMarge {
   margin: 0;
   padding: 0;
}
#divContent {
   background: white;
   padding: 10px;
}
#headTitle {
 color: orange;
 font-size: 13px;
 font-weight: 800;
}

:merci:

11/06/2006, 13h29
Anduriel

Même en les mettant en dehors des autres div ça ne fonctionne pas. Je crois qu'il doit y avoir un hauteur mininum à respecter...
12/06/2006, 13h05
Royd938

c'est un bug typique d'IE (un de plus ;o). Il suffit de préciser pour ce div que la font-size: 0pt et tu obtiendras la hauteur que tu veux pour ton div. En gros il prend comme hauteur minimum, la taille de la police par défaut...
12/06/2006, 18h03
Anduriel

Citation:

Envoyé par Royd938

c'est un bug typique d'IE (un de plus ;o). Il suffit de préciser pour ce div que la font-size: 0pt et tu obtiendras la hauteur que tu veux pour ton div. En gros il prend comme hauteur minimum, la taille de la police par défaut...

Super! c'est pratique d'avoir réponse à tout sur le CSS :)