Retrouvez cet article dans : Linux Pratique 40

L'objectif est ici de créer une bordure uniquement ENTRE les éléments d'une liste. Nous pourrions utiliser la propriété border-bottom, me direz-vous. Oui mais voilà, nous souhaitons qu'il n'y ait une bordure qu'entre chaque élément, autrement dit, ni après le dernier, ni avant le premier. On peut donc oublier border-bottom (ou même border-top) qui génère un résultat non conforme à nos souhaits (Fig. 1).

Utilisation du sélecteur first-child

Le pseudo-format first-child permet de spécifier que le premier élément enfant d'un élément HTML reçoit un aspect particulier. En l'occurrence, nous pouvons utiliser alors la propriété border-top pour définir la bordure supérieure de chaque élément de la liste, puis utiliser le sélecteur first-child pour supprimer la bordure du premier élément (Fig. 2).

ul {
list-style-type: none;
}

li {
border-top: 1px solid #FF7F50;
text-align: center;
height: 40px;
line-height: 30px;
}

li:first-child {
border: 0;
}

Observez le résultat sur la figure 2. Voilà un moyen simple et pratique de parvenir à notre but. Mais voilà, le pseudo-format first-child n'est malheureusement pas reconnu par le navigateur Internet Explorer v.6.0 et sûrement par d'autres navigateurs... En revanche, on notera qu’IE 7.0 permet enfin l'utilisation de ce pseudo-format tellement pratique !

Mais nous pouvons tout de même songer à une solution alternative... La première solution qui nous vient à l'esprit est de créer une classe spécifique pour le premier (ou le dernier) élément de la liste, auquel cas l'utilisation de border-top (ou border-bottom) peut être mise en place : HTML :

<ul>
<li class="noborder">alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
<li>epsilon</li>
</ul>

CSS :

li {
border-top: 1px solid #FF7F50;
}

.noborder {
border: 0;
}

Cependant, cette solution n'est pas très pratique et en plus, n'est pas réalisable si vous n'avez pas accès au code complet de la page Web en question (cas de moteurs de blogs et CMS qui ne permettent pas toujours la modification du squelette de base de la page).

Masquer la bordure indésirable

L'autre solution qui s'offre à nous, plutôt que de supprimer la bordure en trop, est de la masquer. Pour ce faire, nous allons utiliser la technique des marges négatives :

li {
border-top: 1px solid #FF0000;
margin: -1px 0 0 0;
text-align: center;
line-height: 30px;
}

Ce qui donne le résultat que vous pouvez observer sur la figure 3.

La marge supérieure des items de la liste est en retrait de 1px, ce qui correspond à l'épaisseur de la bordure supérieure. De cette façon, la bordure supérieure du premier élément de la liste est masqué, car il sort du conteneur (<ul>). Néanmoins, ceci n'est valable que pour Internet Explorer 6.0, cette fois-ci ! Qu'à cela ne tienne, nous n'avons qu'à ajouter le sélecteur first-child vu ci-dessus pour assurer le résultat sous IE 7.0 et Firefox 2.0 :

li {
border-top: 1px solid #FF0000;
margin: -1px 0 0 0;
text-align: center;
line-height: 30px;
}

li:first-child {
border: 0;
}

Cas d'une liste horizontale

Dans le cas d'une liste horizontale (élément fréquemment utilisé pour matérialiser les menus de sites Web), il faudra tout d'abord penser à une chose : une liste est par défaut un élément de type bloc, donc les items se positionnent par défaut les uns en dessous des autres. Pour qu'ils se placent les uns à côtés des autres (position horizontale), il ne faut pas oublier d'utiliser la propriété display: inline;. Revenons à notre problème de bordure. C'est la bordure de gauche (border-left) qui nous intéresse ici. Comme précédemment, on utilisera first-child (pour Firefox) pour supprimer la première bordure de la liste, ainsi que le retrait de la marge de gauche (pour Internet Explorer) (Fig. 4).

li {
display: inline;
border-left: 1px solid #FF0000;
margin: 0 0 0 -1px;
padding: 0 20px;
text-align: center;
}

li:first-child {
border: 0;
}

Attention, sous Internet Explorer 6.0, cette méthode ne fonctionne que si l'on définit le conteneur, autrement dit, l'élément <ul> comme flottant à gauche :

ul {
list-style-type: none;
float: left;
}

Application : créer des bordures entre les cellules d'un tableau

Notre objectif est d'obtenir un tableau similaire à la figure suivante (Fig. 5). Ce type de formatage est en effet plus " léger " que le quadrillage classique d'un tableau.

Lors du formatage du tableau, vous serez peut-être tenté d'utiliser la propriété border-spacing pour fixer (voire annuler) l'espace entre les bordures du tableau. Mais attention : cette propriété n'est toujours pas reconnue par Internet Explorer 7.0. Il faudra donc utiliser la mention cellspacing dans le code HTML de la base (ceci demeure pour l'instant conforme à la recommandation XHTML strict).

 <div id="box">
<table cellspacing="0">
  <tr>
    <th>Fruits</th>
    ...

En outre, n'oubliez pas que sous Internet Explorer, il est impossible d'utiliser la propriété border-width si elle n'est pas utilisée conjointement avec la propriété border-style.

#box {
float: left;
}

table {
padding: 0;
margin: 0 0 0 -1px;
}

th {
width: 150px;
background: #0000FF;
color: white;
}

td {
text-align: center;
line-height: 40px;
border-left: 1px solid #0000FF;
}

td:first-child {
border: 0;
}

Si votre tableau comporte une bordure externe, il est également possible d'utiliser la propriété border-collapse. En effet, cette dernière permet de préciser si les bordures d'un tableau doivent être fusionnées (border-collapse: collapse;) ou distinctes (border-collapse: separate;).

table {
padding: 0;
border: 2px solid #FF0000;
border-spacing: 0;
border-collapse: collapse;
}

(On supprimera le sélecteur td:first-child qui devient inutile). Dans notre cas, nous utiliserons border-collapse:collapse; De cette manière, la bordure externe du tableau et la bordure gauche de la première colonne vont fusionner : nous obtiendrons ainsi l'effet souhaité (Fig. 6a). Néanmoins, il faudra veiller à ce que l'épaisseur de la bordure externe soit supérieure à l'épaisseur de la bordure de gauche des cellules. Dans le cas contraire, dans le navigateur Firefox, les bordures internes " prennent le dessus " par rapport à la bordure externe (Fig. 6b).

Avec une image d'arrière-plan

Au lieu de définir une bordure, il est tout à fait possible de définir une image d'arrière-plan pour les cellules du tableau. Cette image sera positionnée tout à gauche de chaque cellule (Fig. 7). Pour Firefox, on utilisera le pseudo-format first-child afin de supprimer l'image d'arrière-plan pour la première colonne. Et pour les versions d'Internet Explorer antérieures à la version 7.0, on utilise à nouveau la technique des marges négatives :

table {
padding: 0;
margin: 0 0 0 -1px;
}

td {
text-align: center;
line-height: 40px;
background: url(bordure.png) no-repeat 0% 50%;
}

td:first-child {
background: none;
}

L'utilisation d'une image d'arrière-plan peut nous permettre ainsi quelques fantaisies (Fig. 8)...

Retrouvez cet article dans : Linux Pratique 40