[Résolu] Colonnes de taille égale, encore et toujours...

Bonjour,

comme xtant d'autres personnes, j'ai un problème pour adapter la hauteur des colonnes au contenu, pour qu'elles soient de la même taille. J'ai donc lu les exemples de la FAQ, les posts du forum,etc, mais ça ne veut pas marcher . Voici le bout en question de la CSS :

html, body{
	background-color: rgb(0, 0, 0);
	font-family: verdana, arial, serif;
	font-size: 10px;
	color: rgb(255, 255, 255);
	height: 98%;
}
#contenu{
	background-color: yellow;
	margin: 30px 5px 20px 5px; /* haut droite bas gauche */
	position: absolute;
	width: 760px;
	left: 50%;
	margin-left: -375px;
}

#menu{
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-left: 2px;
	width: 140px;
	background-color: #654321;
	color: green;
	display: table;
	display: table-cell;
	height: 100%;
}

#corps{
	height: 100%;
	padding-top: 3px;
	padding-left: 10px;
	margin-left: 140px; /* = 140px  width menu_G, pour ne pas écraser menu */
	background-color: yellow;
	color: rgb(0, 145, 145);
	display: table;
	display: table-cell;
	height: 100%;
}

La plupart des éléments ont été tirés des exemples de la FAQ (blog-and-blues), mais en fait c'est pire que ce que j'avais avant ! En gros, si je met 1 mot dans la partie "corps", celle-ci va faire quelques pixels de large et de haut, juste pour entourer le mot... Les autres exemples ne m'ont pas mieux réussi.

Désolé de re-re-re-reposter un message sur le même problème, mais je n'ai pas voulu m'incruster sur un autre message du même thème pour le rendre illisible... Merci pour votre aide.

Jarodd

Edit : je précise que j'ai aussi jeté un oeil aux modèles. Celui qui me correspond est celui-ci, mais vu qu'à terme je n'aurai plus de fond coloré mais des images, ça risque de se voir...
Modifié par Jarodd (30 Aug 2005 - 12:12)

Bon alors, plusieurs choses :

Tu veux des colonnes de même hauteur. ok.
Mais je vois du height: 100%; dans ton code (tu as 2 fois height: 100% dans ton #corps d'ailleurs ), donc tu veux des colonnes de hauteur 100% en plus ?

Pour les colonnes de même hauteur...
recherche -> colonnes factices

La répétition du height, c'est qu'à force de tester selon des tutos différents, forcément ça se répète C'est corrigé dans ma CSS.

Je me moque qu'elles fassent 100%, je veux juste que les 2 colonnes aient la hauteur de la plus grande. Mais ce height:100%; ressortait dans tous les tutos, donc je l'ai rajouté, autrement non, je n'y tiens pas particulièrement

Pour les colonnes factives, on s'est peut-être croisé pour mon édit : lorsque le site sera plus avancé, il y aura des images en fond, donc l'astuces des colonnes factices risque de ne pas fonctionner à ce moment-là. Pour l'instant les couleurs sont là uniquement pour visualiser le tout.

Autre parade possible : adapter manuellement la hauteur selon chaque page :

<div id="menu" style="height: 400px;">
[...]
<div id="corps" style="height: 400px;">

Même si on ne profite plus de l'avantage des CSS, au moins ça a le mérite de fonctionner !

bonjour,
si comme tu le dis tu n'as pas encore tes images, il me semble que pour l'instant de s'appliquer a ce que chaque colonne se positionne correctement est le seul but a atteindre, ensuite si tu veux donner l'impression qu'elles ont toutes la même longueur visuellement, attends d'avoir tes images de design pour les appliqué en arrierre plan et de simuler 3 colonnes de hauteurs egal en te basant sur la plus longue.

rien qu'avec des couleurs tu n'arriveras pas a grand choses, sauf en trichant.Par exemple comme ceci : http://gcyrillus.free.fr/tructuto/tutokit/ch14.html
(j'utilise ce truc sans trop savoir comment les differents navigateurs ,autre que IE et FF ,reagissent.)inspire toi du css et souris du contenu de ces pages)
pour 3 ou 2 colonnes:
un conteneur avec comme couleurs d'arriere plan celle de la colonne centrale ou du contenu principale(ce n'est pas le cas dans le lien),
les colonnes de droite et gauche avec des couleurs identiques ou non(en tout cas differentes de la colonne centrale ou principale)
une colone centrale avec des bordures aussi large que les colonnes adjacente et de mêmes couleurs que celle ci .et un footer dans le conteneur en "clear both" pour etirer le conteneur jusqu'en bas.
sur la page en lien, les colonnes menus s'arretent apres le dernier lien, ce que tu vois ensuite sont seulement les bordures de la colonnes centrales !.
dans l'exemple du liens le conteneurs centré est body.

Pour appliqué l'idée presenter tu devras pour ces page ajoute a body: background-color:#adfd75; et une couleur de background differente a html.
joue sur les hauteurs des differents contenu .... tu remarqueras un mieux mais pas encore satisfaisant selon les cas pour 3 colonnes, c'est parfais pour 2 colonnes ! , et la derniere option fiables qui reste pour 3 colonnes et plus : la triche avec une image repeter dans l'arriere plan du conteneur. me semble t-il .

voila

Après des heures de bricolage, j'y suis enfin arrivé, merci pour votre aide !