Questions de base sur CSS, astuces et solutions

Solution aux problèmes classiques que l'on rencontre avec les feuilles de style.

Comment centrer la page horizontalement?

Une solution très simple est donnée par la spécification du W3C. Quand la propriété margin-left et margin-right ont la valeur auto, le contenu se trouve centré horizontalement. Donc pour centrer la page entière, il faut créer un calque global contenant tous les autres (cela ne fonctionne pas sur body) et lui attribuer cette propriété:

#outer { margin:0 auto;}

Cela peut s'appliquer à tout élément de la page.

Comment adapter l'image de fond à la taille de l'écran

Quand la résolution de l'écran est trop large, l'image ne peut la remplir. En fait il est impossible d'avoir une image qui convienne à tous les écrans. Toutes les solutions ont leur inconvénients. Par exemple on peut redimensionner l'image selon l'écran, mais elle perd en qualité sur les plus grands.
Une solution est de donner à l'image une couleur de fond unie qui soit la même que celle de <body> (ou vice-versa) et de la centrer. Alors elle semblera toujours remplir l'écran!

Comment aligner verticalement le contenu d'un élément?

Par exemple si on insère une image dans le texte et que l'on ne veuille pas que le texte entoure l'image, mais qu'on contraire il soit disposé contre elle sur une même colonne.
On lui assigne la propriété suivante:

<img src="images/html5-logo.png" width="64" height="64" style="float:left">
<p style="overflow:hidden;">...texte...</p>