28220 sujets

CSS et mise en forme, CSS3

3 colonnes de meme hauteur

Bonjour, bonsoir!:)

J'ai beau essayé ce tutoriel :

http://www.pixy.cz/blogg/clanky/css-3col-layout/

Ca ne marche pas.... Smiley bawling Smiley bawling Smiley bawling

Ye m'explique :
J'ai un container qui a 3 colonnes.
La principale, à gauche, n'a pas de largeur fixe.
Ensuite il y a 2 contextuels qui font respectivement 166px et 180px qui sont à droite.

Le pb est que je veux que quelque soit la colonne, c'est celle qui a la longueur de texte la plus grande qui étire les autres.

Ben.... en gros ça marche pas.
Ah oui, je précise, ca doit marcher sous IE (presqu'à dire que Firefox... on s'en fout.. enfin moi je dis pas ça, c'est le client qui veut Smiley smile )

qqun a une idée?
Modérateur
bonjour,
a tout hasard, j'avais bricolé un truc en xhtml 1.0 pour 3 colonnes semblant toujours avoir la même taille . Ce code fonctionne pour IE et FF, (avec cette dtd ), ... facilement modifiable (je pense au couleurs, qui peuvent etre retirées des bordures modifiées, un arriere plan dans le conteneur .etc ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- declaration du doctype, ici une feuille codée en xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
   <title>/// Bienvenue sur (Company Name) \\\</title>
   <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1"/>
   <style type="text/css">

body,html {height:100%;}
body {width:750px;margin:auto;}
p {margin:0;padding:5px;}
div#droite, div#gauche {
	width:250px;
}

#gauche {
	float:left;
	background-color:green;
	height:30%;
}
#droite {
	float:right;
	background-color:gray;
	height:60%;
}
/* ne donner aucune valeur de taille, sinon, bug sous IE [smile] */
#centre {
	background-color:red;
	border-right:250px solid gray;
	border-left:250px solid green;
	margin:0;

}

.tire {clear:both;}

body div#conteneur{width:100%;margin:12.5% 0;border: 1px solid #8D8D8D;}

</style>
   
<!--[if IE]>
<style type="text/css">
div#centre hr.tire {display:none;}/* sinon marche pas avec IE */
</style>
<![endif]-->	
 </head>
 <body>

<div id="conteneur">
<hr class="tire"/>
<div id="gauche">
gauche

</div>

<div id="droite">
droite

</div>

<div id="centre"><p>46464
centre</p><p>46464
centre</p><p>46464
centre</p><p>46464
centre</p><p>46464
centre</p><p>46464
centre</p><p>46464
centre</p>

<span class="tire"></span>
<hr class="tire"/>
</div>


<hr class="tire"/>
</div>
 </body>
</html>


il suffit de copier/coller ce code dans une page vierge et de refaire la page dessus.

attention a ne pas donner de dimension au bloc centrale (utiliser les margin si vous voulez reduires les bordures.) le contenu insere dans les colonnes ne pourra pas accepter un elements supplementaire avec un : clear:both; sauf si celui-ci est le dernier de la colonne centrale ....

je ne sais pas comment les autres navigateurs reagissent sur cette page.
si quelqu'un a deja vu une version de ce genre qui marche sous IE et tout les autres , je suis curieux de voir les balise et css utilisé

a plus



edit: j'ai laisser en demo, le code proposer (pour experimentation) et ses 3 idées, la grosse bordure, la bordures simple et l'image en arriere plan ... et en regardant le resultat avec mozilla, (surprise, le clear:both; ne marche pas ..avec ma version, c'est un bug qui a ete reparer sur les version plus recente ).. pour les curieux : http://gcyrillus.free.fr/3colonnes/
Modifié par gcyrillus (06 Sep 2005 - 17:43)
Bonsoir,

gcyrillus : dans ton exemple, les colonnes latérales prennent la longueur apparente de la colonne centrale si celle-ci est plus haute. Mais en dehors de ce cas de figure, les hauteurs diffèrent.

La gestion des hauteurs identiques est en fait impraticable actuellement sans dégradation :
- le système des flottants n'est pas approprié
- le display:table, parfaitement approprié, n'est pas implémenté par IE.

cela dit, on peut bricoler des solutions de hauteurs identiques quelque-soit le contenu des colonnes, en acceptant une dégradation dans IE (pas de chance, scmilblick). Voir par exemple http://test.blog-and-blues.org/colonnes/trois/

Et au bout du compte, c'est actuellement un cas type d'utilisation d'un tableau de présentation, pour un rendu optimal accessible.
Modifié par Laurent Denis (04 Sep 2005 - 19:43)
Modérateur
rebonjour Smiley smile

merci, de ta reponse qui rappelle bien l'utilité de faire le bon choix pour le resultat voulu,..

quand a
a écrit :
gcyrillus : dans ton exemple, les colonnes latérales prennent la longueur apparente de la colonne centrale si celle-ci est plus haute. Mais en dehors de ce cas de figure, les hauteurs diffèrent.


il est evident que sans les bordures de la colonnes centrale, il reste bien visible que chaque div lateraux, ne setire pas plus que ce leur contenu leur inpose. néanmoins, dans cette exemple, si l'un des 2 contenu lateraux est plus "long" l'artifice des bordures colorées du bloc centrale et son element en clear:both; laissera encore apparaitre l'llusion que les 3 colonnes ont la même tailles ... en hauteur ...

je trouve ça amusant et aide un peu a comprendre les facetie de IE , cette bidouille m'a permis de bien comprendre certains probleme d'affichage avec IE et les clear:both; associer a des elements flottant et des elements placer dans le flux en marge d'un element flottant.

vous pouvez faire mon experience a l'envers, donner une largeur ou une hauteur a l'element centrale, ou enlever le display:none; pour hr ou changer le dtd de la page, il suffit d'un de ces 3 changement pour remettre IE hors jeu ! .... le span en clear:both; inefficace sous ff . interessant ... je trouve lorsque l'on ne maitrise pas bien xhtml et css (mon cas ).

a plus

edit: j'ai laisser en demo, le code proposer (pour experimentation) et ses 3 idées, la grosse bordure, la bordures simple et l'image en arriere plan ... et en regardant le resultat avec mozilla, surprise, le clear:both; ne marche pas .... pour les curieux : http://gcyrillus.free.fr/3colonnes/
Modifié par gcyrillus (05 Sep 2005 - 11:20)
Bonsoir

Si cela peut aider ,tant mieux, sinon tant pis pour moi Smiley smile 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>trois colonnes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	background-color:#CC9999;	
}
#haut {
	text-align: center;
	background-color:#CC99CC;
	height:100px;
	margin:0 auto 0 auto;
	padding:1px;
	width:80%;
}
#conteneur {
        margin:0 auto 0 auto;
	padding:0;
	background-image:url(img/gauche.gif);
	background-position:right;
	background-repeat:repeat-y;
	width:80%;
	background-color:#996699;
}
#fondG {
	margin:0 0 0 0;
	padding:0px;
	width: 100%;
	background-image:url(img/droite.gif);
	background-repeat:repeat-y;
}
#gauche {
	padding:10px 0 0 0;
	width: 130px;
	float: left;
}
#gauche ul,li{
         padding:0 0 0 0;
         margin:0 0 0 0;
}
#centre {
	padding:5px;
	margin-left:130px;
	margin-right:180px;
}
#droite {
	padding:10px 5px 0 0;
	width:160px;
	float:right;
}
#droite h1{
	color:#7E6B00;
	border-bottom:1px solid #000000;
	width:auto;
	text-align:center;
	margin-left:0.5em;
	background-color:#FAF7E5;
}
#droite ul,li{
        margin:0px;
        padding:0px;
        list-style-type: none;
}
#bas {
	border-top:1px solid #000000 ;
	background-color: #CCCCCC;
	width:80%;
	padding:0;
	margin:0 auto 0 auto;
	text-align:left;
	clear:both;
}
.clear {
	clear:both;
	display:block;
	height:1px;
	overflow:hidden;
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<div id="haut">
<h1>Haut,texte,titre,image</h1>
</div>
<div id="conteneur">
<div id="fondG">
<div id="gauche">
<h2>gauche</h2>
<ul>
<li>blabla</li>
</ul>
</div>
<div id="droite">
<h2>droite</h2>
<p>blabla</p>
<ul>
<li>blabla</li>
</ul>
</div>
		
<div id="centre">
<h2>Centre</h2>
<p>blabla</p>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="bas">
<p>http://www.monsite.fr</p>
</div>
</body>
</html>


Ensuite il faut faire deux images de la couleur de son choix,
la première pour la colonne gauche 130x1px
la seconde pour la colonne droite 180x1px
mettre les liens vers ces images dans la feuille de style.
Vous pouvez varier la largeur de vos colonnes en réduisant vos images
surtout ne pas oublier de répercuter ce changement dans l'id du centre
#centre {
padding:5px;
margin-left:130px; (ici) et
margin-right:180px;(ici)
}

@+
Modérateur
bonjour,
voila, je me permet de deterrer (je n'ai pas voulu creer un nouveau topic pour ça )un peu le sujet, car mes bidouilles sur les 3 colonnes avait sous IE d'un probleme d'affichage (parfois invisible parfois alterer, ..), en bricolant une autre page et en utilisant : position:relative; appliqué a l'element du conteneur "buggeur" a l'affichage, cela eliminé le bug sous IE, mais il ne fallait plus changer la taille de la fenetre, car les textes qui ne disparaissait plus rester figer sur la page ..!?! je suis donc revenu sur ces 3 colonnes bidouilles et
j'ai contourné ce probleme en appliquant la position:relative; a toute la page, (pour IE) et j'ai du appliqué une position:static; a html pour recuperer la barre de scroll.
par ailleurs la version avec image de fond se voit affublé d'une balise supplementaire pour IE pur afficher le fond sur toute la largeur !?

cela oblige a une surcharge de css... mais bon je crois etre arrivé a 3 propositions pour une mise en page en 3 colonnes qui ne bug plus sous IE ?

Serieusement J'en arrive donc a la question, cette histoire de position:relative; est elle une solution interessante pour contrecarré ces probleme d'affichage(layout) sous IE ?

je remet le lien vers ces 3 idées de colonnes : http://gcyrillus.free.fr/3colonnes/ pour les curieux et testeurs Smiley smile

le tableau reste encore la solution la plus aisée a mettre en oeuvre !
pour 3 colonnes de vrai même hauteur et compatible tout navigateur comme l'a dit laurent denis
Bonjour,

Très rapidement: la position relative ne corrige pas un bug de layout (cette propriété n'agit pas sur cet état). Ici, elle n'est pas nécessaire pour obtenir un effet de colonne de même hauteur avec la bordure de la colonne centrale. Le code est inutilement compliqué.

Je tâcherai de revenir donner un exemple.
Modérateur
merci ! Smiley confused , je me disais bien que cela ne pouvait pas etre aussi simple.(façon de parler !). Smiley decu et pourtant ce position:relative, pour activer un z-index (<edit>:et ainsi obliger "lourdement" IE a afficher tous les elements de la page</edit>)ne me semblait finalement pas idiot ! .. je patauge là Smiley confus , désolé, pour mes 2 derniers post ,somme toutes inutiles.
Modifié par gcyrillus (27 Sep 2005 - 14:26)
Sujet clos
Aller à