Discussion :

[Anduriel]

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

Code :

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

1
2
3
4
5
#divBgTop {
   background-image: url(images/top.jpg);
   background-repeat: repeat-x;
   border: 1px solid red;
}

Comment faire?
Merci

[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'

[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

[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

Nas'

[<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

[Anduriel]

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

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

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