Discussion :

[legrandse]

Bonjour à tous,

Je dois adapter mon code sur un modèle au niveau du soulignement de lien mais je n'y arrive pas à 100%.
Voici mon résultat :


et le modèle:


Dans mon code la longueur du soulignement est définie par le padding de l'élément.
Par contre mettre un padding à 0 enlève l'espace des éléments du menu.

Y a t-il moyen de garder l'espacement du menu et de souligner un lien selon la longueur des caractères du lien ?

En vous remerciant pour l'aide

Voici mon

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<nav class="navbar navbar-inverse navbar-right">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>                        
			      </button>
 
			    </div>
			    <div class="collapse navbar-collapse" id="myNavbar">
			      <ul class="nav navbar-nav">
 
			        <li><a href="#">Accueil</a></li>
			        <li class="dropdown">
			          <a class="dropbtn" data-toggle="dropdown" href="#">Nos lodges<!--<span class="caret"></span>--></a>
			          <div class=" dropdown-content">
			              <a href="#">La Ferme du Père Louis</a>
				         <a href="#">Le Chalet de la Source</a>
				          <a href="#">Le Lodge des Contes</a>
			          </div>
			        </li>
			        <li><a href="#">Votre séjour</a></li>
				    <li><a href="#">Région & activités</a></li>
				    <li><a href="#">évènements & presse</a></li>
				    <li><a href="#">Contact</a></li>
			      </ul>
 
			    </div>
			  </div>
			</nav>

et css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
.navbar-inverse{
	background: transparent;
	margin-top: 35px;
	border : none;
	text-transform: uppercase;
 
}
 
 
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #000;
}
 
.navbar-inverse .navbar-nav > li > a {
	font-weight: 600;
    color: #004e41;
}
 
.nav > li > a {
    padding: 15px 18px 5px 18px;
    border-bottom : 3px   #f9f9f9 solid;
    transition: all 0.2s linear;
 
}
 
.nav > li > a:focus, .nav > li > a:hover {
  	border-bottom : 3px  #deac52 solid;
 
}

[legrandse]

J'ai trouvé une solution peut-être pas très académique mais qui fonctionne:

Mettre le padding droite/gauche à 0 comme ceci:

Code :

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

1
2
3
4
5
6
.nav > li > a {
    padding: 16px 0px 5px 0px;
    border-bottom : 3px   #f9f9f9 solid;
    transition: all 0.2s linear;
 
}

et insérer des <li> vides comme ceci afin d'espacer les éléments du menu:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="nav navbar-nav">
			      	<!--<li class="active"><a href="#">Accueil</a></li>-->
			        <li><a href="#">Accueil</a></li>
			        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				        <li class="dropdown"><a class="dropbtn" data-toggle="dropdown" href="#">Nos lodges<!--<span class="caret"></span>--></a>
				          <div class=" dropdown-content">
				              <a href="#">La Ferme du Père Louis</a>
					         <a href="#">Le Chalet de la Source</a>
					          <a href="#">Le Lodge des Contes</a>
				          </div>
				        </li>
				        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				        <li><a href="#">Votre séjour</a></li>
				        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
					    <li><a href="#">Région & activités</a></li>
					    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
					    <li><a href="#">évènements & presse</a></li>
					    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				    <li><a href="#">Contact</a></li>
			      </ul>

[Invité]

Bonjour,

très mauvaise solution...

[legrandse]

oui je sais mais c'est tout ce que j'ai trouvé... seul

Évidemment s'il y a une autre méthode je suis preneur

[Invité]

Solution :

Code css :

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

1
2
3
4
5
6
7
.nav > li > a {
  display: inline-block;
  margin: 15px 18px 0 18px;
  padding: 0 0 5px 0;
  border-bottom: 3px #f9f9f9 solid;
  transition: all 0.2s linear;
}

[legrandse]

Bah oui y a pas photo par rapport à ma solution de bras cassé.

Merci à toi pour l'aide