Les trucs à retenir en CSS

La Mise En Page

Le DOCTYPE pour qu'explorer ne fasse pas n'importe quoi.

Pour qu'explorer respecte mieux le modèle de boite normalisé. Il faut "typer" votre page internet

Typage xhtml (strict ou transition):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
...
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
...
</html>

Typage html 4.0 (strict ou transition):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
</html>

Centrage d'un bloc par margin

Centrer un bloc avec des marges automatiques en utilisant aussi un "text-align:center" pour explorer:

body       { text-align: center ; }
div.lebloc { text-align: left ;
             margin-left: auto ;
             margin-right: auto ; }

Centrage d'un bloc par pourcentage

Il faut placer le bord gauche en positionnement absolu au milieu et faire une marge arrière de la moitié du bloc :

div.lebloc { position: absolute ;
             left: 50% ;
             width: 400px ;
             margin-left: -200px ; }

Mise en page en positionnement flottant et "Clear"

Pour faire une présentation avec des colonnes avec la technique flottante.

On prépare en premier un bloc pour positionner l'ensemble.
Le bloc en-tête est placé dans le flux.
Le bloc de bord est placé par un "float:left" ou un "float:right ;".
Le bloc contenu est margé pour ne pas déborder sur le bloc de bord. La marge correspond à la taille du bloc de bord.
Le bloc pied de page possède le style "clear:both ;" pour ne pas être dépassé par le bloc de bord.

Mise en page en positionnement flottant et "Overflow"

Pour faire une présentation avec des colonnes avec la technique flottante.

On prépare en premier un bloc pour positionner l'ensemble.
Le bloc en-tête est placé dans le flux.
Le bloc 2colonnes est placé dans le flux avec un style "width: 100% ; overflow: hidden ;". On peut remplacer le "width : 100% ;" par un "zoom : 1 ;" mieux traité dans IE 6.
Le bloc de bord est placé par un "float:left" ou un "float:right ;".
Le bloc contenu est margé pour ne pas déborder sur le bloc de bord. La marge correspond à la taille du bloc de bord.
Le bloc pied de page est placé dans le flux.

Mise en page en positionnement absolu

Pour faire une présentation avec des colonnes avec la technique positionnement absolu.

On prépare en premier un bloc pour positionner l'ensemble. Ce bloc ne doit pas être visible, car il ne descendra pas jusqu'en bas.
Le bloc en-tête est placé en position absolue dans le bloc 1.
Le bloc de bord est placé en position absolue dans le bloc 1.
Le bloc contenu est placé en position absolue dans le bloc 1.
Il ne peut pas y avoir de pied de page en positionnement absolu.

Rendement plus fiable des polices en "em"

Un réglage des polices en pourcentage sur "Body", permet d'obtenir un meilleur rendu sur les tailles en "em".

body 
{  font-size: 80% ;
}
p 
{  font-size: 1em ;
}

Pour les petits blocs : Petites polices

Pour permettre à un bloc d'être vraiment petit, il faut lui donner une taille de police minuscule.

div#lebloc 
{  height:      3px ;
   font-size:   1px ;
   line-height: 1px ;
}

Positionnement absolu dans un autre bloc

Le positionnement absolu dans un autre bloc ne marche que si l'autre bloc est lui aussi positionné. Par contre, un positionnement relatif suffit (même s'il ne change pas de position).

div#bloc1
 { position: relative ;
 }
div#bloc2
 { position: absolute ;
   top:5px ; right:10px ;
 }

Supprimer les bordures sur un lien actif

Pour supprimer les bordures sur un lien actif :

a:active, a:focus
 { outline: none ;
 }

Mais attention, supprimer le focus n'est pas une bonne chose pour l'accessibilité du site. Le focus est là pour aider la navigation au clavier. Si vous voulez enlever le liseret du focus, il faut le remplacer par autre chose !

Ordre des pseudo-classes de lien

Le bon ordre pour les pseudo-classes :

:link
:visited
:hover
:focus
:active

Ordre des tailles

Dans un "padding", "margin", "border" : l'ordre des tailles est le suivant (aiguille d'une montre) :

:top
:right
:bottom
:left

Plusieurs classes pour un objet

Un objet peut avoir plusieurs classes, il suffit de séparer les noms de classe par un espace :

<p class="LaClasse1 LaClasse2 LaClasse3">xxx</p>

La fusion des marges

Entre deux éléments frères, les marges ne s'aditionnent pas, elles se fusionnent. Ainsi, si deux éléments frères ont des marges différentes. La marge visible entre ces deux objets sera la plus grande des deux marges. La marge la plus petite sera absorbée par la plus grande. Par exemple, dans l'exemple suivant, la marge sera de 30px.

<p style="margin-bottom: 20px;"> 
    Premier paragraphe 
</p> 
<p style="margin-top: 30px;"> 
    Deuxième paragraphe 
</p>

Même chose entre les marges d'un parent et d'un enfant. Les marges sont fusionnées et non pas additionnées. Exception en cas de présence de "Padding" sur le parent ou de "Border" sur l'enfant, ou d'objet qui ferait obstacle à la fusion des marges en s'intercalant entre les deux.

Bloc tronqué en affichage

Si un bloc (page ou autre) est tronqué sur les marges hautes et basse, il s'agit souvent d'un effet de la fusion des marges. Les solutions sont les suivantes :

Mettre une bordure sur le parent (peut être transparente).
Mettre un padding sur le parent.
Mettre un overflow: auto; ou un overflow: hidden; sur le parent.
Parent en position absolute ou fixed ou en flottant.

Gestion des débordements de contenu

Solutions pour éviter qu'un bloc déborde sur un autre :

overflow: hidden; permet de cacher ce qui déborde d'un bloc.
word-wrap: break-word; Force un retour à la ligne si un mot est trop long dans un bloc.
text-overflow: ellipsis; transforme un mot trop long en 1ers caractères + "...".
max-width:200px; Pour donner aux images une taille max et eviter qu'elles debordent.

Transformer un élément en ligne en bloc

Plutôt que d'utiliser le display : block ;, il peut être plus intéressant d'utiliser le style display : inline-block ;. En effet ce style permet d'obtenir un petit bloc qui suit le flux et qui accepte le vertical-align. Idéal pour les labels dans les formulaires.

Attention, avec explorer, cela ne marche que sur les objets "inline".

label 
{  display: inline-block ;
   width: 150px ;
}

Les Bugs d'Explorer

ie 5 : Width, Height, Padding et Border

Pour les vieilles versions d'explorer, surtout si on n'a pas mis de Doctype :

Quand on force une largeur ou une hauteur, il est préférable de ne pas mettre de Border ni de Padding. Explorer les met à tort dans la taille de l'objet.

Donc pour explorer : Il vaut mieux appliquer une marge à l'élément enfant qu'un padding au parent.

ie 5 : Flottant et doublement des marges

Sur ie, quand on met en flottant un bloc avec des marges. les marges peuvent être doublées.

Plusieurs solutions sont possibles :

Eviter les marges et utiliser un padding.
Mettre deux div imbriqués, un pour le float, un pour les marges.
Mettre le bloc en display: inline;

ie 5 : Liste et lien

Sur ie 5.5, si un lien est de format bloc dans une liste, il y a doublement des marges. Il faut mettre la liste en "inline" ou donner le Layout au lien (zoom: 1;).

li
{  display: inline ;
}
li#a
{  display: bloc ;
}

La meilleure solution : le Layout

li#a
{  display: bloc ;
   zoom: 1 ;
}

ie 5 : Positionnement fixe qui se transforme en absolu

Utilisation d'un manque d'explorer pour transformer un positionnement fixe (non pris en compte) en positionnement absolu.

div#LeBloc
{  position: absolute ;
   top: 0;
   left: 0;
}
div#conteneur>div#LeBloc 
{  position: fixed ;
   top: 0;
   left: 0;
}