Jojo m'a demandé gentiment d'expliquer le positionnement CSS de mon dernier skin... voici la logique, que je vais essayer de vulgariser au mieux.
Petit rappel : mon site peut se résumer à ceci d'un point de vue du code.
<div id="bandeau"></div>
<div id="cadremilieu">
<div class="haut"></div>
<div class="contenu"></div>
<div class="bas"></div>
</div>
D'habitude, je mets l'image de fond du haut dans la div du même nom, l'image du milieu (qui se répète verticalement pour s'adapter au contenu), et l'image du bas pour le pied de page, et je positionne le bandeau de manière absolue "par-dessus" le haut de mon graphisme. En quelque sorte, je le sors des divs qui s'empilent, d'ailleurs, on appelle ces divs des éléments de type bloc (qui s'empilent les uns sur les autres, comme des blocs).
En résumé, la div cadremilieu contient toute l'interface (haut milieu et bas), et le bandeau vient se mettre par-dessus tout cela.
Pour ce skin, j'ai choisi de mettre l'image du haut de l'interface en arrière-plan de la div bandeau, de ne pas utiliser la div haut, et de mettre à la suite comme d'habitude l'image qui se répète verticalement (le cadre intérieur vert foncé), et le pied de page en bas.
(je te passe les détails un peu compliqués qui me font renoncer à ma technique habituelle de positionnement, ou en commentaire)
Seul défaut de cette logique : si je ne fais rien d'autre que de spécifier cela ainsi, il y aurait d'abord l'image de haut et mon contenu ne commencerait qu'en-dessous de celle-ci... ce qui ne m'arrange pas, je voudrais que mon texte commence déjà sur une partie de l'image du haut (au-dessus de la div bandeau si tu préfères).
En utilisant le positionnement relatif, qui permet de dire : tu es dans le flux normal, entassé entre le bloc au-dessus et au-dessous de toi, mais je te positionne aux distances que je souhaite à partir de cet endroit, je peux dire à ma div "contenu" de remonter de "x" pixels sans faire de casse.
Ensuite, la ruse est d'utiliser le z-index, autrement dit, imagine que la page est constituée de "calques" (un peu comme sous Photoshop), je peux spécifier aux div d'être plus ou moins en arrière-plan ou en avant-plan. En utilisant judicieusement cette propriété, l'interface est prête.
Voilà pour l'idée générale de cette intégration CSS.
Et donc, tu combines ça avec des images toutes groupées en une seule du bandeau pour arriver à faire ce graphisme ?