bonjour,
la structure et les tutoriaux , oui , enfin, peut-etre chercher d'abords a passer a un codage aux normes .. des standards, un html 4.01 , voir un xhtml 1.0, histoire d'etre dans le theme d'alsacreations et puis une page avec un doctype valide est beaucoup plus facile a gerer en termes de rendu css , ça permet de caler les navigateurs sur un mode standard et pas "quirk" selon les uns et les autres.
Les images oui pour se passer des tableaux et sur un design en largeur fixe c'est aisé , sur un "fluide" je crois que cela va etre encore compliqué pour toi.
je viens de te bricoler un gabarits sans images. vu que l'idée n'est d'afficher que des bordures:
<edit> la page en ligne :
gabarits-test IE6 et firefoxe</edit>
<!--[if lte IE 6]><comment>Juste pour faire passer IE en mode
quirk , ici IE7 ne serait pas concerné , ! a
verifier/tester</comment><! endif -->
<!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">
<!-- la langue de la page -->
<head>
<title>HTML 1.0 strict et IE mode "quirk"</title>
<style type='text/css'>
body, html {
height:100%;
margin:0;
padding: 0 1em;
}
h1 , p {
margin:0;
}
#bandeau_sousbandeau {
background:#E9D880;
border:10px solid #EF9A01;
border-left:0;
border-right:0;
height:120px;
position:absolute;
left:0;
width:100%;
}
#conteneur {
position:absolute;
min-height:100%;
top:0;
width:100%;
left:0;
}
#un , #trois {
width:200px;
margin:0 0.5em;
border:4px solid #EF9A01;
position:absolute;
top:170px;
bottom:30px;
}
#un {
left:1.5em;
}
#trois {
right:1.5em;
}
#deux {
margin:0 250px;
padding-top:170px;
padding-bottom:30px;
}
#pied {
position:absolute;
text-align:center;
bottom:0;
width:100%;
left:0;
background:#E9D880;
border:1px solid #EF9A01;
border-left:0;
border-right:0;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {
padding:0;
}
#bandeau_sousbandeau {
height:150px;
}
#conteneur {
padding-top:170px;
padding-bottom:30px;
height:100%;
}
#un , #trois {
position:static;
height:100%;
}
#un {
float:left;
}
#trois {
float:right;
}
#deux {
padding-top:0px;
padding-bottom:0px;
}
</style>
<! endif -->
</head>
<body>
<h1 id="bandeau_sousbandeau" >haut </h1>
<div id="conteneur">
<div id="un"> 1 blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /></div>
<div id="trois">3 blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br />
blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br />
blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br />
</div>
<div id="deux">2 blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br />
blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br />
blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br /> blabla <br
/></div><p id="pied">pied</p>
</div>
</body>
</html>
sur la base d'un doctype valide , malgeé tout IE est repassé en mode quirk en inserant un commentaire avant la declaration du doctype.
++
Modifié par gcyrillus (06 Jul 2006 - 16:20)
