Hello!
Me revoilà!
Bon vraiment, j'en ai assez de passer des heures à chercher les incompatibilités, c'est frustrant, déplaisant, et j'en passe !
Est-ce que c'est parceque je n'ai pas les automatismes (je ne suis pas un expert dans les compatibilités) où est-ce que c'est toujours la galère comme ça avec les CSS ?
Bref, si quelqu'un a la gentillesse de me dire ce que je ne fais pas bien !!
Le projet est pourtant tout simple, faire 3 colonnes de largeur égales espacées régulièrement (elles font 250px de larg) ... IE, ok Firefox, la boite du milieu n'est pas alignée mais remontée vers le haut de 4 ou 5 pix et il met un espace vertical de 3 ou 4 pix entre le top et le corps ...
(désolé je n'ai pas de serveur sous la main, juste en local ...)
Je c/c ma feuille CSS et le HTML
Merci par avance!
body {
background-color : #fcfcfc;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-style : normal;
color : #000000;
margin : 0;
padding : 0;
}
.top {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
background-color : #6699cc;
height : 54px;
width : 900px;
margin-right : auto;
margin-left : auto;
background-image : url(pics/logo.jpg);
border-top : none;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
}
.corps {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
background-color : #99ccff;
width : 900px;
height : auto;
margin-right : auto;
margin-left : auto;
border-top : none;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
background-image : url(pics/pat_corps.gif);
background-repeat : repeat;
}
.box1 {
margin-top : 10px;
border-style : solid;
border-width : 1px;
border-color : black;
background-color : silver;
width : 250px;
padding : 10px;
height : 250px;
margin-left : 5px;
float : left;
}
.box2 {
margin-top : 10px;
border-style : solid;
border-width : 1px;
border-color : blue;
margin-left : 310px;
padding : 10px;
height : 250px;
width : 250px;
}
.box3 {
margin-top : 10px;
border-style : solid;
border-width : 1px;
border-color : blue;
padding : 10px;
height : 250px;
width : 250px;
float : right;
margin-right : 5px;
}
HTML
<body>
<div class="top"> </div>
<div class="corps">
<div class="box1">
<h5>box1</h5>
<p>texte box1</p>
<pre>bla bla</pre>
</div>
<div class="box3">
<h5>box2</h5>
<p>texte box2</p>
<pre>bla bla</pre>
</div>
<div class="box2">
<h5>box3</h5>
<p>texte box3</p>
<pre>bla bla</pre>
</div>
<p>blabla</p>
</div> <!-- fin corps -->
</body>
Modifié par trancy_mind (17 Apr 2006 - 14:59)
