Retour à la case départ !
En étudiant de près les modèles de chinon37 et de Calimo, en les comparant et les triturant j'ai "vu" beaucoup de choses et cela m'a conforté dans ma toute première intervention, à savoir que Fx et IE n'interprètent pas le même code de la même façon. Je croyais cette époque révolue depuis qu'ils sont censés tous les deux interpréter correctement le w3c ! Si j'ai bien assimilé toutes les remarques précédentes, il n'y a pas de problème de DTD et on ne peut pas être en mode quirk. Vrai ?
Pour faciliter la compréhension j'ai recopié le style dans les boîtes.
Pour chinon37 je constate : bandeau et logo flottent ; il n'y a pas de problème IE et Fx affichent la même chose ; par contre pour list qui ne flotte pas le positionnement est complètement différent : dans IE la boîte vient se placer sous logo (ce qui parait logique dans le flux) et se positionner accolée à la droite de bandeau (ce qui parait aussi logique dans le flux) ; par contre dans Fx list va se positionner en début de page, sous logo et bandeau, comme si logo et bandeau étaient sortis du flux du fait de leur propriété float ; cependant cette propriété semble être prise en compte pour l'affichage du texte de list ! En effet la marge gauche
demandée de 180px est trompeuse, car supprimée, elle ne change rien à la présentation ; je pense qu'il doit en être de même pour l'espacement (padding).
Chez Calimo dans lequel la propriété float n'est pas demandée pour logo, et avec Fx, cette boîte se glisse sous bandeau pour être calée
complètement à gauche, et le texte est centré en tenant compte de la propriété float. Par contre la boîte list, qui elle non plus n'a pas la propriété float, est traitée différemment puisqu'elle ne glisse pas sous bandeau mais est accolée à bandeau ; où est la logique ? Sous Ie les deux boîtes sont traitées de la même façon (ce qui me parait logique) et viennent flotter à droite de bandeau.
Qu'est-ce, au final, qui est conforme au w3c ? Et qu'en pensez-vous ?
Pour compléter mes investigations j'ai chargé Opera (que je ne connaissais pas) et testé sur mes exemples ; pour l'instant il réagit exactement comme Fx. Seraient-ils détenteurs de la vérité ?
En ce qui me concerne je crois que je vais adopter le positionnement absolu avec lequel, en principe, il ne devrait pas y avoir de surprise. Mais... je commence à me méfier !
Voici le code (chinon37) :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>
modèle chinon37
</title>
<style type="text/css">
#page {
height: 700px;
width: 1000px;
}
#bandeau {
background-color: #0000ff;
width: 180px;
height: 690px;
float: left;
}
#logo {
height: 180px;
width: 820px;
background-color: #dddddd;
text-align: center;
float: right;
}
#list {
margin: 0px 0px 0px 0px;
padding: 0px;
left: 50px;
top: 100px;
width: 550px;
height: 300px;
background-color: red;
}
</style>
</head>
<body style="margin: 5px;">
<div id="page">
<div id="bandeau">#bandeau {
background-color: #0000ff;
width: 180px;
height: 690px;
float: left;
}</div>
<div id="logo">#logo {
height: 180px;
width: 820px;
background-color: #dddddd;
text-align: center;
float: right;
}</div>
<div id="list">
#list {
margin: 0px 0px 0px 180px;
padding: 0px;
left: 50px;
top: 100px;
width: 550px;
height: 300px;
background-color: red;
}
</div><!-- élément hors flux -->
<div id="corps1" style="text-align: center;"></div>
</div>
</body>
</html>
et le code Calimo :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>modèle Calimo</title>
<style type="text/css">
body {width:1000px; margin:5px; background-color:#888888}
#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}
#logo {height:180px ; width:820px ; background-color:#dddddd; text-align:center}
#list {width:550px; height:300px; padding:0px; background-color:red; margin-left: 180px}
list, #corps {margin-left: 180px}
</style>
</head>
<body>
<div id="bandeau">bandeau<br>#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}</div>
<div id="logo">logo<br>#logo {height:180px ; width:820px ; background-color:#dddddd; text-align:center}</div>
<div id="list">blablabla<br>#list {width:550px; height:300px; padding:0px; background-color:red}
</div>
<div id="corps" style="text-align:center">blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla <br>#corps {margin-left: 180px}<br>style="text-align:center"</div>
</body>
</html>
