Centrage vertical/conteneur/hauteur variable

**Oluha** · 07/11/2006, 11h22

Salut

Je sais que mon titre n'est pas super explicite mais j'ai rien trouvé de mieux. Voilà, je vous explique mon soucis :

J'aimerai centrer verticalement mon conteneur dans lequel j'ai plusieurs div. J'ai trouvé tout un tas de méthode sur le net, mais pas une qui fonctionnait quelque soit la résolution et le navigateur. J'ai finalement résolu mon problème en le mettant à l'intérieur d'un tableau d'un seule cellule (je sais pas propre mais les autres méthodes CSS n'étaient pas satisfaisantes).
Tout est Ok à partir du moment où mon conteneur a une hauteur fixe définie dans le CSS. Le problème c'est qu'un div à l'intérieur de celui ci peut s'agrandir et donc en quelque sorte "déborder". Du coup le centrage vertical de mon site est quelque peu foireux car le centrage se fait sur la hauteur fixe du conteneur

(voir image1.gif)

Je me suis donc dis qu'en ne mettant pas de hauteur fixe à mon conteneur, il allait automatiquement s'adapter à la taille du div qui "déborde". Mais en fait ca ne fonctionne pas du tout ! Après avoir mis une bordure au conteneur pour voir comment il réagissait, je me suis aperçu qu'il s'adaptait uniquement à la taille du header qu'il contenait, mais que les 2 colonnes d'en dessous n'était pas vraiment incluses dedans, ce que je ne comprend pas. En effet les colonnes en questions sont positionnée en absolute par rapport au conteneur et ca fonctionne donc c'est bien qu'elles sont incluses dedans

Voir image2.gif pour se rendre compte. On voit bien qu'il continu à centrer par rapport à la taille du conteneur (en rouge), seulement le conteneur en question n'a pas la taille qu'il devrait avoir

Du coup je ne vois absolument pas comment faire

Voilà des morceaux de code :

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
<body>
<table width="100%" id="site">
	<tr><td align="center">
	<div id="conteneur">
		<div id="header">
		...
		</div>
		<div id="gauche">
		...
		</div>
		<div id="droite">
		...
		</div>
	</div>
	</td></tr>
</table>
</body>

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
51
52
53
body {
	background-color: #FFF5E2;
	background: url(images/fondabo.gif);
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #B41B14;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size:11px;
	height:100%;
}
 
html {
	height:100%;
}
 
#site {
	height:100%;
	width:100%;
	text-align:center;
	vertical-align: middle;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
 
#conteneur {
	width: 774px;
	height: 610px;
	position:relative;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	/*border: 2px solid #FF0000;*/
}
 
#header {
	height: 80px;
	margin: 0px 0px 0px 0px;
}
 
#gauche {
	position: absolute;
	width: 160px;
	/*height:530px;*/
	left: 0px;
}
 
#droite {
	position: absolute;
	width: 600px;
	/*height:530px;*/
	right: 0px;
	z-index: 2;
}

et l'url : http://www.magnificat.com/magnificat...ncais/abo1.asp

Merci à ceux qui pourront m'aider

Oluha

**Oluha** · 07/11/2006, 13h59

n'ayant pas de réponse je vais tenter de simplifier ma question :

comment se fait-il que mon conteneur ne semble pas contenir mes colonnes "droite" et "gauche" quand je met une bordure ?

**balu** · 07/11/2006, 19h26

Pour les div qui peuvent s'allonger, essaies de voir avec la propriété overflow: auto; pour avoir un défilement si le zone deviendrait trop longue. Il faut que le div est une hauteur.

Envoyé par Oluha

comment se fait-il que mon conteneur ne semble pas contenir mes colonnes "droite" et "gauche" quand je met une bordure ?

Je crois que c'est à cause de la position absolue des divs "droite" et "gauche".

**Oluha** · 07/11/2006, 20h18

oui mais je ne veux justement pas d'ascenseur dans ma div car il y en a déjà un sur le coté pour les résolutions 800*600 et les ascenseurs imbriqués c'est pas du tout ergonomique

et pour la position absolute j'y ai pensé mais pourquoi alors la propriété left:0px se fait bien par rapport au conteneur et pas par rapport au body ?

C'est ca que je capte pas

Et je n'ai pas trouvé comment placer mes div autrement que par du absolute.

**Bisûnûrs** · 07/11/2006, 21h15

Envoyé par Oluha

n'ayant pas de réponse je vais tenter de simplifier ma question :

comment se fait-il que mon conteneur ne semble pas contenir mes colonnes "droite" et "gauche" quand je met une bordure ?

C'est en effet à cause de la propriété position:absolute;.

Une fois mise, tes éléments sortent du flux, donc ne sont plus contenus normalement dans ton conteneur, c'est donc pour ça que ta bordure s'arrête au #header.

Envoyé par Oluha

mais pourquoi alors la propriété left:0px se fait bien par rapport au conteneur et pas par rapport au body ?

Quand tu utilises la propriété position, ça place ton élément en fonction de ton dernier élément parent positionné, ici, #conteneur qui a position:relative;. Il se positionnera par rapport au body seulement dans le cas où l'élément n'a aucun parent positionné.

Essaie de procéder de cette manière :

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
<body>
<table width="100%" id="site">
   <tr><td align="center">
         <div id="conteneur">
            <div id="header">
             ...
            </div>
            <div id="gauche">
             ...
            </div>
            <div id="droite">
             ...
            </div>
            <div class="clear"></div>
         </div>
   </td></tr>
</table>
</body>

Code CSS :

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

1
2
3
.clear{
   clear:both;
}

**Oluha** · 08/11/2006, 09h09

Je viens de tester en ajoutant le div et la class mais ca ne fonctionne pas (même soucis que l'image2).
Dois-je modifier la position de mes div droite et gauche aussi ?

**Bisûnûrs** · 08/11/2006, 11h19

J'ai essayé de reproduire la structure de ta page et je m'en suis sorti de cette manière :

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
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
<body>
<table width="100%" id="site">
   <tr><td align="center">
      <div id="conteneur">
 
         <div id="header">
           HEADER
         </div>
 
         <div id="gauche">
           bla bla bla<br />
           bla bla bla<br />
         </div>
 
         <div id="droite">
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
           bla2 bla2 bla2<br />
         </div>
 
      <!-- div permettant de combler le vide, sa hauteur étant calculée en fonction des deux autres éléments -->
         <div id="compl" style="border:1px solid #00f"></div>
 
      </div>
 
   </td></tr>
</table>
 
<!-- script permettant de calculer la hauteur aléatoire entre la taille aléatoire du menu et la taille aléatoire du contenu droit pour ajuster le flux -->
<script language="Javascript">
   document.getElementById('compl').style.height = document.getElementById('droite').offsetHeight - document.getElementById('gauche').offsetHeight;
</script>
 
</body>

Code CSS :

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
51
52
53
 
body {
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #B41B14;
   margin:0; /* simplfication de l'écriture */
   padding:0; /* simplfication de l'écriture */
   font-size:11px;
   height:100%;
}
 
html {
   height:100%;
}
 
#site {
   height:100%;
   width:100%;
   text-align:center;
   vertical-align: middle;
   margin:0; /* simplfication de l'écriture */
   padding:0; /* simplfication de l'écriture */
}
 
#conteneur {
   width: 774px;
   position:relative;
   text-align: left;
   margin:0 auto; /* simplfication de l'écriture */
   border:1px solid #f00;
}
 
#header {
   height: 80px;
   margin:0; /* simplfication de l'écriture */
   border:1px solid #f0f;
}
 
#gauche {
   width: 160px;
   position:relative; /* position relative pour ne pas sortir du flux */
   left:0; /* se positionne à 0px à gauche du conteneur */
   border:1px solid #0f0;
}
 
#droite {
   width: 600px;
   z-index: 2;
   position:absolute; /* position absolue, sort du flux, donc calcul du manque en javascript */
   left:170px; /* se positionne à 170px à gauche du conteneur (laisse donc la place au menu) */
   top:80px; /* se positionne à 80px du haut du conteneur (laisse donc la place au header) */
   margin-right:160px; /* marge de 160px sur la droite (taille du menu) pour ne pas dépasser du conteneur */
   border:1px solid #ff0;
};

**Oluha** · 08/11/2006, 11h26

merci beaucoup !
Je vais tester ca cette aprem ou tout à l'heure et je vous tiens au courrant

Centrage vertical/conteneur/hauteur variable

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager