Border-bottom superposé

RemiG26
Les bases HTML/CSS

Bonjour à tous,

Je suis en train d'essayer de faire une espèce de navbar secondaire à la manière de celle qu'il y a quand on clique sur mon compte sur ce site. Et je bloque sur un problème qui est le suivant : Je n'arrive pas à changer la couleur du trait qui souligne chaque <li>

J'applique à ma balise <nav> un border-bottom de 4px gris puis je dis que le <li class="active"> doit avoir le même border-bottom mais avec une autre couleur. Le soucis est là : les bordures se mettent les uns en dessous des autres.

Quelqu'un aurez une piste, je suis sûr que c'est super simple en plus...
Merci beacoup
Rémi

7 réponses

JeremieMeunier
Réponse acceptée

<blockquote>JeremieMeunier

Il faut simplement rajouter la hauteur de ta bordure à ton li et mettre un margin-bottom avec -[ta_valeur]px.
</blockquote>

Voilà ce que j'expliquais : ici

JeremieMeunier

Il faut simplement rajouter la hauteur de ta bordure à ton li et mettre un margin-bottom avec -[ta_valeur]px.

Guique

Bonjour,

margin-bottom ne définie pas du tout la hauteur de la bordure mais la marge entre les éléments...

Est-ce que tu pourrais nous poster ton code HTML et CSS afin que l'on puisse t'aider ?

Guique

Et donc ? Ton Codepen est censé me démontrer que margin-bottom permet de rajouter de la hauteur à la bordure ?
Toujours pas, non. Mais je vois tout de même l'idée ;)

JeremieMeunier

Je ne cherchais pas à prouver qu'il fallait utiliser margin-bottom pour une hauteur de bordure mais pour rattraper la hauteur de celle de la nav

Guique

Ui, j'ai bien compris. J'ai vu le Codepen.
Je te corrigai sur ta formulation pour ne pas induire remi en erreur :)
Ne soit pas sur la défensive : on fait tous, à tous les niveaux, des erreurs de formulation.

RemiG26
Auteur

Merci beaucoup à tous les deux j'ai réussi a résoudre mon problème.

Bonne journée,
Rémi