Cette section de notre site s'adresse aux développeurs web et aux intégrateurs. Nous partageons dans ces pages avec un public spécialisé notre expérience (et nos expériences) dans toutes les domaines de la programmation web.
Top 5 - Techniques CSS - Janvier 2010
WebColors se propose de partager chaque trimestre des techniques CSS utiles, afin d'aider les webmasters dans leur création de site internet. Ces astuces sont compatibles avec tous les principaux navigateurs y compris l'indomptable Internet Explorer 6.
Numéro 5 : Transformer une liste en menu horizontal
Pour créer un menu en HTML, le meilleur choix reste la balise liste. Celle-ci rend le code plus clair, et sémantiquement plus correct (c'est à dire que ce qui est conceptuellement une liste est représenté par l'élément approprié).
Exemple
HTML
CSS
Nous utilisons la propriété inline pour rendre la liste horizontale, la propriété list-style-type: none pour masquer les puces et attribuons aux éléments un peu de padding pour les séparer les uns des autres.
Numéro 4 : Dimensions min-height/min-width pour Internet Explorer 6
Problématique
Notre ami Internet Explorer 6 n'interprétant pas forcément le CSS comme on s'y attendrait, il est souvent nécessaire d'utiliser des techniques peu avouable poru arriver à ses fins. C'est notamment le cas pour spécifier la dimension minimale d'un objet.
Pourquoi cette technique fonctionne-t-elle?
Contrairement aux autres navigateurs, Internet Explorer 6 ignore l'instruction !important, ainsi que les propriétés min-height et min-width. La seule ligne qu'il prendra en compte dans notre CSS sera donc :
Seulement, il l'interprète comme un min-height, soit le comportement désiré. La propriété !important empêche les autres navigateurs de considérer la valeur "height: 400px" puisque celle-ci ne peut être écrasée. Et voilà!
Numéro 3 : Une position absolute à l'intérieur d'un objet
Il est parfois utile de positionner un objet par rapport à son parent, qui peut éventuellement être un flottant. La propriété position: absolute permet de placer un objet par rapport à son plus proche parent positionné. Une technique très facile et utile consiste donc à attribuer la valeur position: relative au parent de l'objet que l'on souhaite positionner afin de pouvoir le placer n'importe où par rapport à celui-ci.
Exemple
Dans notre exemple, nous mettrons en scène trois objets. Deux carrés, en flottant, seront placés l'un à côté de l'autre (en noir et en gris). Un troisième (en rouge) devrait se placer en absolute à l'intérieur du carré noir, positionné par rapport à celui-ci. Les dimensions et les couleurs sont seulement utilisées pour appuyer l'exemple.
HTML
CSS
Résultat
Numéro 2 : Overflow: auto en simulation pour un clear:both
Votre design est complexe et composé de plusieurs objets flottants, notamment d'une barre verticale sur le côté de l'écran, appelée "sidebar" (comme sur le site de WebColors). L'utilisation de l'instruction clear: both est de ce fait prohibée au sein du contenu, car l'élément visé se retrouverait tout en bas de la page, en dessous de votre "sidebar". Comment, donc, s'assurer que les objets floats ne débordent pas de l'objet qui les contient ?
Numéro 1 : Sticky footer
Comment faire un design classique comportant un en-tête, un corps et un pied-de-page tout en évitant que, en présence d'un contenu modeste, le pied-de-page ne se retrouve... au milieu de la page ?
La solution: la technique Sticky Footer.
La technique est simple : il suffit que notre div pied-de-page soit précédée d'une autre contenant l'en-tête et le corps de page, ainsi qu'une autre div, que nous appellerons "push", qui poussera notre pied-de-page lorsque nécessaire.
Le CSS ressemble à ceci :