Astuces - Web - Présentation - Sommaire

Faire un sommaire

Le comment du pourquoi :

Présenter une liste de texte avec "chapitre" numéroté comme le sommaire d'un livre.
Présentation :
- Vous avez un texte sur la gauche.
- Une ligne de pointillés.
- Un texte sur la droite

Nous allons voir ici comment obtenir la même présentation sans se servir de tableaux

Mise en place

Dans un premier temps nous créons une liste simple.
Nous attribuons ici un id sur l'appel de la liste afin de lui attribuer plus tard un style spécifique.
Nous spécifions également une class via le conteneur span pour le texte devant se situer à gauche et à droite, que nous appelons ici respectivement "left" et "right".

Visuel :

Liste simple

Sources :

HTML :
<ul id="sommaire">
<li>
<span class="left">Sommaire Sommaire</span>
<span class="right">Ch. 0</span>
<span class="clear"></span>
</li>
<li>
<span class="left">Sommaire Sommaire</span>
<span class="right">Ch. 1</span>
<span class="clear"></span>
</li>
<li>
<span class="left">Sommaire Sommaire</span>
<span class="right">Ch. 2</span>
<span class="clear"></span>
</li>
</ul>

Positionnement

A présent, nous allons positionner les différents éléments de notre sommaire. A savoir une zone à gauche (les intitulés), une zone à droite (les chapitres).
Nous employons l'attribut float CSS, permettant de forcer l'alignement d'un élément en dehors de son flux normal.
- Forcer la class "left" sur la gauche de son conteneur ( sommaire ).
- Forcer la class "right" sur la droite de son conteneur (sommaire).
Dans ce contexte, nous "cassons" le flux normal du code HTML, il nous faut donc le rétablir à chaque ligne. le conteneur span ayant la class "clear" nous servira à cela grâce à l'attribut/valeur clear="both"

Visuel :

Liste avec éléments positionnés

Sources :

CSS :
body{
text-align:center; /* Alignement de la page au centre -> IE++ */
}

ul#sommaire{
margin:0 auto; padding:0;
width:500px;
list-style-type:none;
}
#sommaire span{
padding:0 5px;
}
#sommaire span.right{ float:right; }
#sommaire span.left{ float:left; }
#sommaire span.clear{
clear:both; display:block;
padding:0;
height:0; font-size:0;
}

Décor

Et pour finir la mise en place des pointillés. Il suffit tout simplement d'appliquer une image de fond sur les conteneurs li.
- Ici nous utilisons une image en gif transparent de 8 pixels de large par 4 pixels de haut.
- Les 4/4 premiers pixels sur la largeur sont en noir, les 4/4 suivant en transparent (simulation d'un point plus un espace.
- Nous positionnons cette image via CSS en spécifiant un alignement horizontal à gauche (0) et un alignement vertical au milieu (50%).
- Puis nous répétons cette dernière indéfiniment à l'horizontal via repeat-x.

Visuel :

Liste avec fond

Sources :

CSS :
...
#sommaire li{
background-image:transparent url('images/pointille.gif') 0% 50% repeat-x;
background-position:0 50%;
background-repeat:repeat-x; }
...

Vous constatez, que l'on voit les "pointillés" au travers des textes .. pour y remédier, il suffit d'appliquer aux éléments span "left" et "right" une couleur de fond équivalente à celle du conteneur principal (ici : sommaire)

Visuel :

Liste finalisée

Sources :

CSS :
...
#sommaire{
...
background-color:#FFFFFF;
}
#sommaire span{
...
background-color:#FFFFFF;
}
...

Bonne présentation ;-)