Discussion :

[sorry60]

Bonjour,

J'ai une page de la forme :

Code :

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

1
2
 
| Menu | Contenu | Menu2 |

Ces 3 divs sont dans un div conteneur.
Je souhaite que quand je rajoute quelque chose dans un div (par ex le menu), TOUS les divs s'etendent vers le bas... par ex :

Code :

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

1
2
3
4
 
| Menu | Contenu | Menu2 |
| Menu |         |       |
| Menu |         |       |

Sous IE c'est ok, mais sous firefox ça donne :

Code :

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

1
2
3
4
 
| Menu | Contenu | Menu2 |
| Menu |
| Menu |

Seul le DIV où je rajoute quelque chose s'etend..., même le conteneur ne s'etend pas

Voici mon css (je précise que je suis débutant) :

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
 
.div_cont{
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	background-color : #ffffff;
	width: 1002px;
	/*height: 1800px;*/
	border: 2px solid #DDDDDD;
}
.div_left {
	text-align:center;
	border-right: 1px solid #dddddd;
	background-color: #ffffff;
	width: 220px;
	/*height: 100%;*/
	float: left;
	/*overflow: hidden;*/
}
.div_center {
	text-align:center;
	width: 560px;
	/*height: 100%;*/
	float: left;
	/*overflow: hidden;*/
}
.div_right {
	width: 220px;
	/*height: 100%;*/
	text-align:center;
	border-left: 1px solid #dddddd;
	background-color: #ffffff;
	float: left;
	/*overflow: hidden;*/
}

Merci pour votre aide
Sorry

[E.Bzz]

Bonjour,
avec le HTML associé, ça permettrait de voir comment tu les as positionnés les uns par rapport aux autres ...

A+

[lagotonio]

Bonjour,
avec le HTML associé, ça permettrait de voir comment tu les as positionnés les uns par rapport aux autres ...

A+

Oui avec le html cela sera plus claire.

La j'ai l'impression que tu es entrain de vouloir faire un menu en css, non ?

Je te conseille plus d'utiliser les listes UL et LI.

Tonio

[Candygirl]

Pour que ton conteneur s'étendent avec les flottants qu'il contient tu peux lui attribuer une propriété établissant un nouveau contexte de formatage, par exemple:

Code css :

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

1
2
3
.div_cont{
  overflow:hidden;
}

Autrement si tu as un footer au-dessous de tes flottants et à l'intérieur de .div_cont tu peux lui attribuer la propriété clear.

Pour ce qui est de l'adaptation de la hauteur des 3 "colonnes" flottantes, il n'y a pas, actuellement et à ma connaissance, de solution en css très efficace. En général on contourne le problème en affichant une image de fond (qui consiste en 1 tranche des couleurs et bordures de la largeur de ton site) qui se répète en y dans le .div_cont.

Après tout dépend du contexte; si tu n'as pas de footer et que tes côtés sont forcément moins longs que ton contenu tu peux aussi utiliser un positionnement absolut pour les côtés.

[sorry60]

Après tout dépend du contexte; si tu n'as pas de footer et que tes côtés sont forcément moins longs que ton contenu tu peux aussi utiliser un positionnement absolut pour les côtés.

J'ai un footer.
Merci pour tes astuces, je ferai ça demain. Et je vous mettrai un bout de html aussi, là je suis un peu fatigué !

Merci à tous

[Candygirl]

J'ai un footer.
Merci pour tes astuces, je ferai ça demain. Et je vous mettrai un bout de html aussi, là je suis un peu fatigué !

En fait moi aussi, je devais être un peu fatiguée, parce que le footer n'empêche pas le positionnement absolut des côtés puisque le contenu reste dans le flux; il faut juste qu'ils soient forcément moins haut que le corps

[sorry60]

Salut

Je viens de rajouter

Code :

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

1
2
 
overflow:hidden;

Dans le css du conteneur, et c'est bon il s'étend
Merci !

Pour les côtés tu me dis d'utiliser un positionnement absolu, mais justement je rajoute aléatoirement des choses sur les côtés donc ils doivent s'étendrent en temps réel, sans que j'ai besoin d'aller toucher au css..
J'ai peut être mal compris ce que tu voulais me dire

[sorry60]

Je vous rajoute mon pseudo code 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
 
<div class="div_top">
....
</div>
<div class="div_cont">
   <div class="div_left">
    ....
   </div>
   <div class="div_center">
   ....
   </div>
   <div class="div_right">
   ...
   </div>
</div>
<div class="div_bottom">
...
</div>

[Candygirl]

Pour les côtés tu me dis d'utiliser un positionnement absolu, mais justement je rajoute aléatoirement des choses sur les côtés donc ils doivent s'étendrent en temps réel, sans que j'ai besoin d'aller toucher au css..
J'ai peut être mal compris ce que tu voulais me dire

Non tu as bien compris. En fait le positionnement absolu te permet de faire en sorte que ton menu occupe la hauteur de son conteneur sans pour autant avoir de height spécifié au conteneur. Donc, dans le cas où ton contenu est forcément plus haut que tes côtés il représente une alternative intéressante. Par contre si la hauteur des éléments en absolut dépasse la hauteur de l'élément dans le flux la mise en page sera détruite.

A ta place, vu la taille fixe de ton montage, et tes côtés de taille variable, je mettrais simplement une image de fond qui se répète dans ton div_cont et qui dessine tes bordures et couleurs de fond.

[sorry60]

Ok merci pour tes conseils et explications !