Date de première publication : 13 septembre 2003
 L’’ancienne charte graphique est visible ici
 Les squelettes spip de la version 2 sont disponible sur Spip-contrib

La mise en page CSS consiste à écrire l’ensemble des caractéristiques graphiques dans une feuille de style externe à la page html qu’elle va habiller. Les pages html (ou mieux Xhtml) ne contiendront plus que votre texte (éventuellement des images) entouré de balises DIV qui définiront leurs emplacements, principalement dans des boites (visibles ou invisibles).
Ceci est une explication ultrasimpliste, je vous ordonne la lecture attentive de l’intégralité du site OPENwEB ;-)

feuille de style de la version 2

STYLES GENERAUX

La première partie de la feuille de style mastersplog.css déclare quelles seront les polices et les contenus de tout ce qui n’est pas disposé dans une boite : Le corps du texte (body), le fond de page (background), les liens (a : ) avant, pendant et après le survol (link, hover, visited).

J’ai ensuite défini des classes de couleurs ( bleu, vert, orange, brun) : toute portion de texte entouré de la balise <span class="bleu"></div> prendra cette couleur. (un style annoté #style sera encadré par <div id= "style"></div> dans la page html.

J’ai encore défini des classes de typographies que j’utiliserai pour le corps des articles (du plus gros au plus petit : j'encadrerai les titres avec <h1>, le texte des chapo avec <h2>, le texte des articles avec <h3>, les notes et ps avec <h4>.

Viennent ensuite les « grosses boites »

ENTETE DE PAGE

entête

#ENTETE, c’est d’abord une boite qui fait 100% de largeur de la page (width) avec des minis marges (margin), de même couleur que le fond de la page. Je lui ai affecté la propriété display :inline, afin que tout s’aligne horizontalement à l’intérieur de la boite. Je ne lui définit pas de hauteur, son contenu (logo...) se chargera de la dimensionner.

#LOGO + #BD : ce sont les styles de mes 2 logos que je veux à gauche.
Comme je connais la taille de ces images, au lieu de les implanter de manière absolue (inamovible), je définis une nouvelle boite #HAUT, qui fera la moitié de l’entête (53% width) et qui elle, flottera à droite float :right. Elle sera blanche avec une bordure discrète à gauche (border-left :1 pixel dotted). Les logos se disposeront sur la place restante dans #ENTETE, c’est à dire à gauche.
Je continue avec des styles pour la date et l’heure, à la Transfert.net.

Encore une nouvelle boite : #ACTU, prévue pour être placée à l’intérieur de #HAUT (elle même dans #ENTETE). Elle fera 95% de large de la boite #HAUT. Je lui définit aussi des classes de couleurs de liens spécifiques.

Toutes ces boites ont également la propriété display :inline pour ne pas se placer verticalement les unes par rapport aux autres.

Viennent deux ensembles principaux à droite et à gauche : les menus et le corps.

Sous l’entête, je divise la page en deux parties : à gauche une boite flottante (float :left) où je mettrai les menus (30% de la largeur de la page). A droite une boite flottante (float :right) qui contient le corps des textes (60% de la page).

BOITES MENUS à gauche

Dans la boite de gauche #CORPSMENU (transparente), je vais placer 4 boites différentes qui vont s’empiler verticalement avec la propriété display :block

menu rub

#TITRERUB définit les styles que je donne au titre principal du menu des rubriques

#MENURUB définit les styles du contenu de ce menu (rubriques, sous-rub) Il y a notamment une grosse bordure de couleur à gauche.

menu boucles

#TITREMENUS est la boite que j’utilise dès que je veux mettre un titre aux menus secondaires (c.a.d les boucles : dernières réactions, top des visites, top populaire, auteurs).

#MENUS définit les styles du contenu de ces boucles : couleurs, liens et là aussi une grosse bordure à gauche.

BOITES DE CORPS à droite

corps

#CORPS est la boite principale, elle flotte à droite sur 60% de la page. Bleue clair avec une bordure. J’y ai placé un style de lien type « relief » en changeant la couleur des bordures du lien lors du survol.
Dans cette boite j’en place une autre #CHAPO qui fait 95% de sa largeur et qui est blanche. Comme son nom l’indique, elle servira à placer les chapos des articles. Là aussi, bordure et type de liens en relief.

#CARTOUCHE à l’intérieur du #CHAPO. Je reprends le principe de cartouche du site Openweb pour disposer diverses infos : auteur, date, rubriques, etc.
La cartouche flotte à droite dans le #CHAPO dont elle utilise 30% de la largeur. Seule une bordure à gauche marque la frontière des 2 boites, leurs couleurs de fond étant identiques.

Il était nécéssaire sur certaines pages du site de disposer de plusieurs colonnes (forum.html, login.html), j’ai donc créé des variantes de #CHAPO à des largeurs différentes, (#CHAPO40...). Deux blocs flottants se mettent cote à cote, ainsi je place deux fois 40% de la largeur du #CORPS en deux colonnes (ou 4 colonnes à 15%...).
Une autre variante : #CHAPOFORUM reste à 95% de large, mais avec une seule bordure gauche (pour les réactions à la suite des articles).

PIED - SPIP STYLE - MARGES

Pied

PIED C’est une boite de 80% de largeur de la page avec une bordure en haut (border-top). Pour qu’elle soit centrée, la boite doit être flottante (droite ou gauche) et avoir des pourcentages de marges droite/gauche identiques. Le tout additionné à la largeur de la boite faisant 100% de la page.

SPIP_STYLE.css J’ai un peu tâtonné pour changer les styles des formulaires. J’ai désactivé les feuilles de styles correspondants dans typographie.css et les ai rajouté dans mastersplog avec quelques modifs de couleurs et de bordures. J’ai aussi du changer le body-background sur chaque feuille propres à SPIP.

MARGES Je ne conseille pas de régler les marges (margin) et l’espacement (padding) en pixel mais plutôt en % ou em. Cela permet d’éviter des effets disgracieux si on visionne votre site sur des écrans de petites tailles/résolutions. Une marge d’un pixel reste d’un pixel quel que soit l’écran, les % et em s’ajustent proportionnellement à la taille de l’écran.
La syntaxe : 1% 1% 1% 1% doit se lire dans le sens des aiguilles d’une montre en partant du haut (respectivement :1% en haut, 1% à droite, 1% en bas, 1% à gauche).

ET VOILA

Voila pour la feuille de style proprement dite. Maintenant, il s’agit de passer au balisage de la page html (ou mieux xhtml) et insérer ces styles aux endroits qui conviennent : C’est simple, il suffit de suivre le sens de lecture ! Et baliser avec div id, div class ou span class (je me répète, mais Openweb vous dit tout là dessus !)

J’espère que ce déchiffrage vous aura donné envie de faire votre propre feuille de style ! Si vous voulez reprendre celle-çi, tachez tout de même de changer les couleurs, histoire qu’on ai pas tous le même style ! (déjà bien inspiré du design openweb)

Voilà un petit lien qui reprend l’ensemble des couleurs avec leur code hexadecimal. Elles sont limitées, mais si vous utilisez un éditeur comme Dreamweaver, vous pouvez choisir d’autres couleurs personnalisées dans la palette.

Vous pouvez vérifier votre feuille de style avec le validateur du W3C, ils vous indiquera toutes les erreurs de syntaxes ou autres.