Discussion :

[legrandse]

Bonjour à tous,

J'essaye de rendre un menu souligné au passage de la souris avec l'exemple ci dessous:




Je n'y arrive pas tout à fait car mon résultat produit un décalage vers le haut au passage de la souris :



Pouvez-vous m'aider svp.

Voici mon code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.nav > li > a:focus, .nav > li > a:hover {
    background: none;
    text-decoration : none;
 	padding : 0 0 7px 0;
 	border-bottom : 4px solid #dead51;
}

et HTML:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<nav class="navbar navbar navbar-right">
 
			  <ul class="nav navbar-nav">
			    <li><a href="#">Accueil</a></li>
			    <li><a href="#">Nos Lodges</a></li>
			    <li><a href="#">Votre séjour</a></li>
			    <li><a href="#">Région et activités</a></li>
			    <li><a href="#">évènement et presse</a></li>
			    <li><a href="#">Tarif et contact</a></li>
			  </ul>
 
			</nav>

[psychadelic]

ton code css est incomplet, j'arrive pas à reproduire le même visuel avec ce qu tu donnes

[legrandse]

ah sorry.

et avec ceci cela devrait fonctionner:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

[psychadelic]

dans la console du débugger, on voit que le padding est à 15 pixels (sur tous les cotés, et toi tu le met à 0 0 7 0; donc forcément, ça va pas.

PS pourquoi choisir Bootstrap 3 ? => https://www.developpez.net/forums/d1.../#post10796441.

(c'est juste un questionnement perso, pas un jugement)

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  .nav>li>a:focus,
  .nav>li>a:hover {
    background: none;
    text-decoration: none;
   /* padding: 0 0 7px 0; */
    border-bottom: 4px solid #dead51;
  }

au cas ou t'aurais pas...

[legrandse]

Ok merci pour le tuyau.

J'ai juste modifié l'espace entre la barre et le texte pour que cela soit parfait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.navbar-nav > li > a {
 
	padding-bottom: 3px;
 
}
 
.nav > li > a:focus, .nav > li > a:hover {
    background: none;
    text-decoration : none;
 
 	border-bottom : 2px solid #dead51;
}

[NoSmoking]

Bonjour,
juste pour info il est préférable de ne mettre dans les pseudo-classe que ce qui doit changer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.navbar-nav > li a {
  padding-bottom: 3px;
  text-decoration: none;
  background: none;
}
.nav > li  a:focus,
.nav > li  a:hover {
  border-bottom: 2px solid #DEAD51;
}

On peut également obtenir ce genre de résultat en utilisant la propriété background-image qui aurait l'« avantage » d'être animée.