Discussion :

[Nocud]

Bonjour,

Après plusieurs essais je n'arrive pas à créer une page sur ce modèle :


Mon problème principal, c'est d'aligner les 3 colonnes (le menu de gauche, le cadre central, le menu de droite) afin qu'elles finissent en bas au même niveau.
Sauriez-vous comment faire ça ?

Merci beaucoup de toute l'aide que vous pourrez m'apporter. ^^'

[Kerod]

Oui mais jette un oeil ici Div et CSS : une mise en page rapide et facile
Je pense que tu y trouveras ce que tu souhaites

Ou la Galerie CSS

[Nocud]

Merci pour ta réponse, hélas ton lien ne m'aide pas pour le point dont je parlais : la hauteur est là fixée (height:400px), le menu et le contenu ont donc un alignement "forcé".

Pour tout le reste c'est bon, mais c'est ce dernier point qui me pose souci. J'ai essayé de mettre tous les menus dans un conteneur avec un "height:100%" mais ça ne fonctionne pas non plus... :/

Voila une image pour comprendre la situation actuelle :


Je vous mets mon code, si une bonne âme voulait voir ce que ça donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	<div id="conteneur">
		<div id="hgauche">logo</div>
		<div id="hcentre">Bannière</div>
		<div id="gauche">Menu gauche</div>
		<div id="droite">Menu droite,<br/>news.</div>
		<div id="centre">
			Mon problème, c'est que mes 3 menus doivent s'arrêter au même niveau&nbsp;: en effet, mes menus chacun une image en background, et adopter une autre solution me bloquerait.
			<br/>Or là, ils se règlent en fonction du contenu...
			<br/>Et je ne peux pas fixer la hauteur avec un height, je ne connais pas le contenu du cadre du milieu. :/
			<br/><br/>Je suis certain qu'il y a une solution, personne n'en voit une ?
		</div>
	</div>

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
 
#conteneur {
	position: absolute;
	width: 100%;
}
 
#centre {
	background-color:#9999CC;
	margin-left: 150px;
	margin-right: 150px;
}
 
#hcentre {
	height: 50px;
	background-color:red;
	margin-left: 150px;
}
 
#gauche {
	float:left;
	width: 150px;
	background-color:yellow;
	height:100%;
}
 
#hgauche {
	background-color:orange;
	height: 50px;
	float:left;
	width: 150px;
}
 
#droite {
	float:right;
	width: 150px;
	background-color:blue;
}

Merci. :/

[Kerod]

Tu peux éventuellement donner un height à conteneur. Ce qui va engendrer une occupation de tout l'espace par le menu. Mais est-ce vraiment le résultat que tu souhaites obtenir ?

[Bisûnûrs]

Si tes deux menus extérieurs ont la même couleur de fond, la solution de Kerod est la seule, elle donnera l'illusion que tes menus ont la même taille que la colonne du mileu.

Sinon, tu peux toujours en Javascript récupérer la hauteur de la colonne du mileu et de modifier en conséquence la hauteur des deux menus.

[Nocud]

Mes deux menus n'ont pas la même couleur de fond, ils ont un thème dégradé avec une image en Background.
Faute d'une solution native CSS je vais tenter l'idée de Bisûnûrs, merci pour le conseil. ^^'