Quelques astuces avec CSS : - 1 - La règle

Quelques astuces avec CSS :

- 1 - La règle d'écriture "!important"

Normalement en CSS quelquesoit la règle, la dernière indiquée a la priorité. Cependant si vous employez "!important" après une valeur, cette valeur CSS aura la priorité indépendamment de ce qui apparaît après. Cela vaut pour tous les browsers excepté IE.

Exemple :

margin-top : 3.5em !important ; margin-top : 2em;

Ainsi, la marge supérieure sera placée à 3.5em pour tous les browsers sauf sur IE, qui aura une marge supérieure de 2em. Ceci peut parfois être utile, particulièrement quand on utilise des marges relatives (comme dans cet exemple) car ces dernières peuvent montrer des différences entre IE et d'autres browsers.


- 2 - Les  boites css

Dans un boite CSS ( calque dessinant un encart avec des bordures ) la bordure et le remplissage sont inclus dans la largeur d'un élément.

Par exemple, en indiquant les dimensions d'un encart vous pourriez employer la règle CSS suivante :

.box { width: 100px; border: 5px; padding: 20px; }

Cette règle de CSS serait appliquée à :

<div id="box">...</div>

Ceci signifie que toute la largeur de la boîte est de 150px (largeur 100px + deux bordures 5px + deux paddings 20px) dans tous les browsers excepté les versions antérieure à IE 6. Dans ces browsers la largeur serait de 100px, avec les largeurs de padding et de bordure incorporées à cette dimension.

Une alternative simple peut être employée avec ce CSS :

.box { width: 150px }

.box div { border: 5px; padding: 20px }

Et le nouveau HTML serait :

<div id="box"><div>...</div></div>

Maintenant la largeur de boîte sera toujours de 150px, indépendamment du browser.


- 3 - Le centrage de calque

Mettons que vous voulez avoir un site Web avec un contenu aux dimensions fixes, et que le contenu flotte au milieu de l'écran.

Vous pouvez employer la commande CSS suivante :

#content { width: 700px; margin: 0 auto; }

Vous fixeriez alors autour de chaque contenu de document une marge automatique sur ses deux côtés gauche et droit, s'assurant qu'il soit toujours placé au centre de l'écran.

Simple mais pas tout à fait définitif - les versions antérieure à IE 6 posent ici problème, car ces navigateurs ne centreront pas l'élément avec cette commande CSS. Il faut changer les règles CSS :

body
{
text-align: center
}

#content
{
text-align: left
width: 700px
margin: 0 auto;
}

Ceci centrera alors le contenu principal, mais également le texte ! Pour corriger cet effet on mentionne alors l'alignement gauche dans la partie "content".