Petit cours de positionnement CSS

Petit cours de positionnement CSS (le 13 mars 2010)

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.

8 commentaires

Posté par Jojo le 13/03/2010 à 18:11:33
Merci mon bon, je comprends la logique, même si je suis loin de la maîtriser (mais je suis très curieux).

Et donc, tu combines ça avec des images toutes groupées en une seule du bandeau pour arriver à faire ce graphisme ?
Posté par Alf le 13/03/2010 à 20:46:52
Simple et efficace (clin d’oeil)
Je vois que, comme moi, tu aimes bien les "div"...Mais c'est tellement efficace qu'on aurait tort de s'en priver !
Concernant le positionnement relatif, je ne suis pas fan, mais bien employé, ça permet de faire des choses sympa comme sur ton site...
Posté par Nico le 14/03/2010 à 9:44:33
Jojo> oui, c'est ça, tu ajoutes les images groupées en un fichier, et cette intégration est ok.

Alf> en fait, je ne suis pas fanatiques des divs, mais comme l'idée de base de mon site était d'avoir un site skinnable (un CSS Zen garden personnel avant l'heure (grand sourire) ), mon code est légèrement surchargé afin de me permettre de skinner à loisir.

J'étais pas fan du positionnement relatif, mais j'ai appris à l'apprécier, notamment dès que tu Jquery-ses un peu, il est indispensable. Et là, il se prêtait particulièrement bien à l'exercice.
Posté par Jojo le 16/03/2010 à 16:30:55
En fait, si je comprends bien, ton code a presque trop de div et compagnie juste pour pouvoir faciliter l'ajout de graphismes ?
Posté par Nico le 18/03/2010 à 17:53:49
Jojo : c'est tout à fait ça. Dans l'absolu, je n'ai pas besoin de toutes ces divs, mais je suis un peu tranquille si je veux "jouer" sur des intégrations CSS un peu tordues.
Posté par rapidpedia le 07/04/2010 à 14:24:43
Être un blogueur moi-même, j'ai toujours chercher des bonnes ressources à titre d'exemple pour mon propre travail. Ainsi voulais simplement exprimer ma gratitude à tous les auteurs de ce blog!
Posté par sonnerie portable gratuit le 09/06/2010 à 18:42:53
merci pour ce site qui nous donne beaucoup d'informations utiles et qui nous évites de chercher partout (clin d’oeil)
Posté par regime minceur le 21/06/2010 à 18:48:20
j'adore votre blog et je vous en remercie :p
je ne m'en lasse pas

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.