blognote-info.com

J'ai pas testé sous d'autres navigateurs donc il faut vérifier...

Je suis en train de refaire le design de ce site pour qu'il soit plus ... enfin moins ..... enfin différent ... voila ... Et comme d'habitude je crée le squelete html de la page en fonction des infos que je vais y mettre, je prends l'extension WebDeveloper et je tape mes CSS en live ... L'avantage c'est que je vois en tapant ce qu'il se passe ... et la je viens de découvrir quelque chose ... Dites moi si c'est normal ou pas :

voila le html :

<div id="page">
<div id="content">
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
Ici le contenu<br />
</div></div>

Ya pas tout hein ... juste la partie qui nous intéresse mais le reste n'influe pas tout est en position absolute en dehors de ça ... (2 sidebars et un div titre)

Bon je construit mon css comme ça :

/* pour aligner le div central sous IE */
body {text-align:center;}
body * {text-align:left;}
 
/* ma page sans padding et le margin pour le décaler du titre*/
#page {
margin:auto;
margin-top:120px;
width:70%;
background:red; /* couleur de test ;) */
padding:0;
}
/* pour éviter un padding dans la page qui sous firefox élargi la page... */
#content {
width:100%;
margin:20px 5%;
}

Je défini toujours mes styles par margin et quasi jamais par padding parce que firefox interprète le padding en dehors de la largeur ... donc width:300px; padding:30px; donne width:360px; ce qui est complètement con je trouve mais bon ... c'est W3C c'est hype c'est bien ... ^[1]

bref la j'ai pas du tout ce que je voulais avec ce code la parce que le margin-top de #content n'est pas interprété ... Ca cole en haut de la page ... En bidouillant je trouve que si je remplace simplement :

#page {
/*padding:0;*/
padding:1px 0;
}

la ça fonctionne nickel ... enfin j'ai peut être 21px d'espace mais je suis pas à ça pret je défini les grandes lignes ...

va comprendre Charles ...