Bonjour,
(Je précise que j'ai déjà effecuté une recherche sur le site et que j'ai déjà lu les tutoriaux d'Alsa.)
Ayant décidé de donner à un site dont je m'occupe une mise en page conforme aux standards, j'ai remplacé un tableau de mise en page des divs (les tableaux pour la mise en page, c'est mal
).
La mise en page est simple : un div conteneur principal d'une largeur de 791 pixels (pas pu faire moins large) et d'une hauteur de 100%, avec un padding de 10 pixels et contenant deux colonnes sous la forme de deux divs en float: left également d'une hauteur de 100%, l'un d'une largeur de 153 pixels, l'autre d'une largeur de 606 pixels. Les trois divs ont des couleurs différentes. Le div principal est centré. Le texte de la page est contenu dans un div avec des attributs de background et de bordure.
Sous IE6, ça marche impeccable.
Sous FF1, c'est la cata:
- la colonne de gauche (l=153 px), qui contient le moins de texte, ne descend pas jusqu'au bas du conteneur principal mais s'arrête peu après la dernière ligne de texte;
- la colonne de droite (l=606 px) sort carrément du conteneur principal et se prolonge loin sous celui-ci.
Il y a un espace inexplicable à droite de la seconde colonne, d'autant que j'ai utilisé le sélecteur universel * avec des padding et margin de 0. Si je mets la seconde colonne en float: right, cet espace se retrouve à gauche de cette seconde colonne.
Côté petits problèmes, il y a encore un décalage à droite entre bord droit du menu haut (contenu dans un tableau) le le bord droit de la colonne de droite
première version tableless de la page
Après quelques recherches sur le sujet, j'ai trouvé un article de Laurent Denis intitulé Des colonnes de même hauteurs en CSS, qui semblait apporter une réponse simple et élégante à mon problème:
Des colonnes de même hauteurs en CSS
J'ai donc attribué aux trois divs l'attribut display: table-cell. Ça marche sous FF, mais il faut un display: table-cell pour les 3 divs... et sauf que la bordure de la colonne de gauche a disparu, que j'ai toujours cet espace inexplicable à droite (ou à gauche, selon le float: left/right) de la colonne droite et que, surtout, mon div conteneur principal n'est plus centré mais aligné à gauche. Sous IE, c'est toujours impeccable.
seconde version tableless de la page
Quelqu'un peut-il m'expliquer pourquoi ce code apparemment logique et qui produit un résultat correct sous IE ne done pas le même résultat sous FF, et s'il y a une solution, de préférence propre et sans hack ajouté.
Je ne comprends d'ailleurs pas pourquoi il faut des display: table-cell. Si un div a un height: 100%, il doit occuper une hauteur de 100%, non?
Le code css des divs, avec attributs display: table-cell (le body comporte un attribut text-align: center, mais c'est pour un affichage centré du conteneur principal dans l'éditeur):
Pour ceux qui voudraient voir davantage de code css, les css de la première et de la seconde version de la page sont respectivement dans les fichiers tableaux2.css et tableaux3.css.
Après, je vous soumettrai un autre problème du même genre avec une page d'un autre site.
Modifié le 06 Feb 2005 - 02:19
(Je précise que j'ai déjà effecuté une recherche sur le site et que j'ai déjà lu les tutoriaux d'Alsa.)
Ayant décidé de donner à un site dont je m'occupe une mise en page conforme aux standards, j'ai remplacé un tableau de mise en page des divs (les tableaux pour la mise en page, c'est mal

La mise en page est simple : un div conteneur principal d'une largeur de 791 pixels (pas pu faire moins large) et d'une hauteur de 100%, avec un padding de 10 pixels et contenant deux colonnes sous la forme de deux divs en float: left également d'une hauteur de 100%, l'un d'une largeur de 153 pixels, l'autre d'une largeur de 606 pixels. Les trois divs ont des couleurs différentes. Le div principal est centré. Le texte de la page est contenu dans un div avec des attributs de background et de bordure.
Sous IE6, ça marche impeccable.
Sous FF1, c'est la cata:
- la colonne de gauche (l=153 px), qui contient le moins de texte, ne descend pas jusqu'au bas du conteneur principal mais s'arrête peu après la dernière ligne de texte;
- la colonne de droite (l=606 px) sort carrément du conteneur principal et se prolonge loin sous celui-ci.
Il y a un espace inexplicable à droite de la seconde colonne, d'autant que j'ai utilisé le sélecteur universel * avec des padding et margin de 0. Si je mets la seconde colonne en float: right, cet espace se retrouve à gauche de cette seconde colonne.
Côté petits problèmes, il y a encore un décalage à droite entre bord droit du menu haut (contenu dans un tableau) le le bord droit de la colonne de droite
première version tableless de la page
Après quelques recherches sur le sujet, j'ai trouvé un article de Laurent Denis intitulé Des colonnes de même hauteurs en CSS, qui semblait apporter une réponse simple et élégante à mon problème:
Des colonnes de même hauteurs en CSS
J'ai donc attribué aux trois divs l'attribut display: table-cell. Ça marche sous FF, mais il faut un display: table-cell pour les 3 divs... et sauf que la bordure de la colonne de gauche a disparu, que j'ai toujours cet espace inexplicable à droite (ou à gauche, selon le float: left/right) de la colonne droite et que, surtout, mon div conteneur principal n'est plus centré mais aligné à gauche. Sous IE, c'est toujours impeccable.
seconde version tableless de la page
Quelqu'un peut-il m'expliquer pourquoi ce code apparemment logique et qui produit un résultat correct sous IE ne done pas le même résultat sous FF, et s'il y a une solution, de préférence propre et sans hack ajouté.
Je ne comprends d'ailleurs pas pourquoi il faut des display: table-cell. Si un div a un height: 100%, il doit occuper une hauteur de 100%, non?
Le code css des divs, avec attributs display: table-cell (le body comporte un attribut text-align: center, mais c'est pour un affichage centré du conteneur principal dans l'éditeur):
.DivPrincipal {
background-color: #FFFFFF;
border: 1px solid #000000;
height: 100%;
margin-right: auto;
margin-left: auto;
display: table-cell;
padding: 10px;
width: 791px;
}
.DivColonneTexte {
width: 604px;
background-color: #FFFFCC;
border: 1px solid #000000;
}
.DivColonnePrincipale {
float: left;
width: 606px;
display: table-cell;
height: 100%;
clear: bottom;
}
.DivColonneLaterale {
background-color: #CFCFCF;
border: 1px solid #000000;
height: 100%;
display: table-cell;
width: 153px;
margin-right: 10px;
float: left;
}
.DivTexteColonne {
width: 480px;
margin-right: 62px;
margin-left: 62px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #b4d3bc;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
Pour ceux qui voudraient voir davantage de code css, les css de la première et de la seconde version de la page sont respectivement dans les fichiers tableaux2.css et tableaux3.css.
Après, je vous soumettrai un autre problème du même genre avec une page d'un autre site.
Modifié le 06 Feb 2005 - 02:19