nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

syndication rss

Bordures uniquement entre des élémentsdimanche 16 avril 2006

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.
Pour réaliser la même chose, on peut alors donner une classe spécifique au premier élément de la liste pour en supprimer la bordure.

Cette solution n'est pas toujours utilisable, lorsque l'on travaille avec un CMS ou une équipe de développeurs par exemple et que l'on n'a pas un contrôle complet sur le code généré.

Plutôt que chercher à cibler le premier élément pour en supprimer la bordure ou l'image de fond, on peut essayer de "masquer" la bordure indésirable.

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 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 :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;
}Voici ce que l'on obtient :

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é.

Pour voir d'autres exemples d'applications :
bordures entre des éléments de liste et entre des cellules

Commentaires momentanément fermés. Merci de votre compréhension.