bonjour,
ce probleme m'a semble interessant et en partant de l'idée d'un display:table;
et qu'un "width correspont" a un min-width dans IE , j'ai penser qu'a l'aide de flottants que c'etait faisable, hmmmm , jusqu'au moment ou j'ai mis des couleurs au fond des differentes zone , et la bien sur IE s'elargie mais conserve la largeur de base exprime dans le css ! , un peu de width: expression ne suffit pas a le faire rentré dans l'ordre (enfin du moins , je ne maitrise pas assez pour allez plus loin et pas le temps cette semaine ).
bon le code pour un gabarits si c'est reprenable par un autre , (passe dans opera , firefoxe et IE en partie ...centrage et fextensibilité haut/bas presente, mais oups bug affichage dans la zone centrale . (probleme que j'ai deja rencontre mais jamais regle ) :
<!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>essai bloc centre extenseur</title>
<style type='text/css'>
* {margin:0;padding:0;}
#conteneur {
background:#777;
border:1px solid #444;
width:750px;
margin:1% auto;
display:table;/* pour ff et cIe , IE comprend width comme min-width ! */
}
#gab {
float:left;
background:#aaa;
border:1px solid #444;
margin:0 155px;
position:relative;
}
#gab p {padding:0.5em;text-indent:1em;}
#col1 , #col2 {
width:150px;
}
#col1 {
margin-left:-155px;
float:left;
}
#col2 {
margin-right:-155px;
float:right;
}
#head , #pied {
background:#ddd;
clear:left;
}
</style>
<!--[if lte IE 6]><!-- a vrai dire tester sur IE 6 uniquement-->
<!-- IE 7 hors jeu ou encore a inclure ? -->
<style type='text/css'>
#head , #pied {/* probleme de taille se repercutant aussi sur le contenu de gab */
width: expression(document.getElementById('conteneur').clientWidth -0 -0);/* tester sur IE6 */
}
#conteneur {}
#gab {display:inline;/* bug marge double ! */}
#col1 , #col2 {
position:absolute;
}
p.ieagain {
background:green;
width:expression(document.getElementById('conteneur').clientWidth 155 -155 ); /* tester sur IE6 */
white-space:pre;/* ou nowrap ; entre 2 contraintes ...*/
}
#col1
{
left:0;
}
#col2 {
right:0;
}
</style>
<! endif -->
</head>
<body>
<div id="conteneur">
<div id="head">head</div>
<div id ="gab">
<div id="col1">col1</div>
<div id="col2">col2</div>
<p>fffffffffffffffffffffffffffffffffffffffffffffffdfdfdffddffdfdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss<br
/>fhjhfjhfjhfjfjfhfhfj</p>
<p class="ieagain">Pour ce rendre compte du min width a 750px diminue la taille des polices. Et maintenant ? ?????</p>
<hr />
<p class="ieagain">opera et ff ok , IE heu bof , a tester avec du contenu , image , texte , tableau , etc ...
ça sent la bricole et le js/css a plein nez [smile] </p>
</div>
<div id="pied">pied</div>
</div>
</body>
</html>
voila , c'est tout pour le moment , si ça fait avancé un peu.
++
<edit>
le pourquoi des flottants sortit du centrale ... j'etait partis sur au depart sur 3 flottants , padding lateraux sur le contenant et les colonne replacées en relative .. pour eviter ce bug de double marge ....
et ainsi eviter les absolute, j'y suis passe en pensant me defaire du bug de la largeur initiale du conteneur seul prise en compte pour l'affichage du texte et resigner a chercher du cote de width : expression(),
il s'agit bien d'un brouilon/bricole plein de bugs divers et variées ... </edit>
Modifié par gcyrillus (14 Aug 2006 - 23:54)
La seule contrainte, c'est de mettre du contenu peu intéressant dans la partie gauche (des pubs par exemple) car c'est la seule chose qui devient inaccessible lorsqu'on diminue la largeur de la fenêtre.
