Bonjour à tous, j'utilise un conteneur en display:table avec 2 blocs en table-cell pour faire une mise en page en 2 colonnes de même hauteur.
Mon souci est le suivant : si je place quoi que ce soit avant ma balise conteneur (un bandeau de titre ou même une ligne de texte) ma mise en page devient instable : lors de plusieurs rafraichissements de pages (F5), un coup tout est calé, un coup j'ai la colonne de droite qui passe sous celle de gauche, puis ça se recale...
Y a-t-il des "conditions d'utilisation particulières" à cette propriété pour que l'interprêtation se fasse correctement ?
Voici mon code html :
Et ma feuille de styles :
Merci à vous
Modifié le 25 Nov 2004 - 12:00
Mon souci est le suivant : si je place quoi que ce soit avant ma balise conteneur (un bandeau de titre ou même une ligne de texte) ma mise en page devient instable : lors de plusieurs rafraichissements de pages (F5), un coup tout est calé, un coup j'ai la colonne de droite qui passe sous celle de gauche, puis ça se recale...
Y a-t-il des "conditions d'utilisation particulières" à cette propriété pour que l'interprêtation se fasse correctement ?
Voici mon code html :
<body>
<div id="conteneur">
<div id="gauche">
<h1>Titre</h1>
<p>Premier paragraphe paragraphe paragraphe paragraphe paragraphe</p>
<p>Deuxieme paragraphe paragraphe paragraphe paragraphe paragraphe</p>
<div class="vignette"><img src="image.gif" /><br />Legende de l'image</div>
<div class="vignette"><img src="imagee.gif" /><br />Legende de l'image</div>
<div class="vignette"><img src="image.gif" /><br />Legende de l'image</div>
<div class="vignette"><img src="image.gif" /><br />Legende de l'image</div>
<div class="vignette"><img src="image.gif" /><br />Legende de l'image</div>
<hr class="clear">
<p>Troisieme paragraphe paragraphe paragraphe paragraphe paragraphe</p>
</div>
<div id="droite">
<p class="accroche">Accroche de droite</p>
<img src="image.gif" /><br />
<p class="legende">Legende de l'image</p>
</div>
</div>
</body>
Et ma feuille de styles :
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
body {
margin:0px;
padding:0px;
}
#conteneur {
width:760px;
display:table;
background-image:url(images/fond.gif);
background-repeat:repeat-y;
}
#top {
margin-top:10px;
}
#gauche, #droite {
display:table-cell;
height:100%;
}
#gauche {
width:470px;
}
#droite {
text-align:center;
}
h1 {
font-size:0.9em;
margin:20px 15px 15px 15px;
color: #E6793A;
}
p {
font-size:0.8em;
color: #666666;
text-align:justify;
padding:0px 15px 0 15px;
}
.legende {
color:#999999;
font-size:0.6em;
padding:0px 15px 0 15px;
text-align:center;
}
.accroche {
font-size:0.8em;
color: #E6793A;
text-align:center;
}
.vignette {
float:left;
width:120px;
margin:0px 0px 15px 15px;
color:#999999;
font-size:0.6em;
text-align:center;
}
.clear {
visibility:hidden;
clear:both;
}
Merci à vous
Modifié le 25 Nov 2004 - 12:00
