Si l'on veut créer une bordure uniquement entre les éléments d'une liste par exemple (ni avant le premier, ni après le dernier) l'utilisation du sélecteur first-child permet de le faire facilement. On définit une bordure pour les éléments de la liste et à l'aide de first-child, on supprime la bordure du premier élément. Le problème est que first-child n'est pas reconnu par tous les navigateurs, notamment Internet explorer.
La propriété clip qui permet de définir la zone d'affichage peut être une solution, mais elle nécessite l'utilisation de position absolue ce qui n'est pas toujours pratique. Une autre piste est l'utilisation des marges négatives.
Pour une liste classique, on peut facilement obtenir le résultat suivant :
Ici, les balises li ont un border-top ainsi qu'une marge négative haute de 1px. La première bordure est masquée sous ie car sortante du bloc conteneur, pour firefox, on ajoute une suppression de bordure avec
CSS :
first-child : li {
margin: -1px 0 0 0;
padding:0;
text-align: center;
height:22px;
line-height:20px;
border-top: 1px #cc0066 solid;
list-style-type: none;
}
li: first-child {
border:0;
}
Si maintenant on applique la même technique pour une liste horizontale :
CSS :
li {
margin:0 0 0 -1px;
padding:0 10px;
text-align: center;
height:22px;
line-height:20px;
border-left: 1px #cc0066 solid;
float:left;
list-style-type: none;
}
li: first-child {
border:0;
}
Sous ie, cela ne fonctionne pas ... sauf si l'on décide de mettre la balise ul en float:left, on aura alors :
Internet explorer a en effet tendance à masquer les éléments situés dans des marges négatives dans certains cas, et si il ne le fait pas, il suffit que le conteneur soit positionné en float pour que la règle devienne une généralité.
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
