Discussion :

[Jolt0x]

Bonsoir,

Comment faire en sorte qu'un élément de lien html <a> prenne tous l'espace d'un élément de liste a puce <li> ? Comprenez vous ma question ?

J'ai un <div> qui englobe un menu d'onglet (bien ce ne soit pas des onglet a proprement dit) sue lequel j'applique les définitions des <li> et <a> suivantes:

Code css :

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
.menu-onglet {
	margin-left: 180px;
	margin-bottom: 50px;
	padding: 0px;
}
 
.menu-onglet li {
    display: inline; 	
    border: 1px solid blue;
    margin:  20px;
    padding: 10px;
    height: 25px;
}
 
.menu-onglet a {
    display : inline-block;
    color : #666;
    text-decoration : none;
    padding : 10px;
    height: 25px;
    line-height: 25px;
}
 
.menu-onglet a:hover {
    background: red;
}

Je veux que le hover en rouge (hover du <a>) superpose exactement le <li> entouré d'un rectangle bleu. Je ne comprends pas, j'ai bien positionné le height et le line-height du <a>. J'ai mis aussi le même padding.

J'appelle comme ca en html:

Code html :

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

1
2
3
4
5
<div class="menu-onglet">
    <ul>
        <li> <a> Mon lien </a> </li>
        <li> <a> Mon second lien </a> </li>
    </ul>

Merci.

[Invité]

Bonjour,

• Enlève le padding sur le li
• Et met le a en display:block.

[Jolt0x]

Merci jreaux62.

En plus de ce que tu me recommande j'ai du mettre un width fixe (en pixels) sur les <li> pour que ca donne un beau résultat. Mais comment faire si on ne veux pas fixer des largeurs/width fixe sur les <li> ?

[Invité]

Bonjour,

Montre ton nouveau code...

[Jolt0x]

voici mon nouveau code:

Code css3 :

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
 
 
.menu-onglet {
    margin-left: 180px;
    margin-bottom: 50px;
    padding: 0px;
}
 
.menu-onglet li {
    display: inline-block; 	
    border: 0px solid blue;
    margin:  20px;
    padding: 00px;
    height: 25px;
    width: 180px;
}
 
.menu-onglet a {
    display : block;
    color : #666;
    text-decoration : none;
    padding : 00px;
    height: 25px;
    line-height: 25px;
    width: 180px;
    text-align: center;
}
 
.menu-onglet a:hover {
    border-top: 2px solid #0075CA;
}

[JefReb]

Une approche si ça peut aider ...

https://codepen.io/JefReb/pen/PjLRqB

Code css :

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
.menu-onglet {
	margin:0;
	padding: 0;
}
.menu-onglet li {
	display: inline-block;
}
.menu-onglet a {
	color : #fff;
	text-decoration : none;
	line-height: 80px;
	font-size: 30px;
	font-weight:bold;
	width: auto;
	padding:10px;
	text-align: center;
	background-color: #03C;
}
.menu-onglet a:hover {
	text-decoration: underline;
	background-color: #609;
}

Code html :

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

1
2
3
4
<ul class="menu-onglet">
  <li> <a> Mon lien </a> </li>
  <li> <a> Mon second lien </a> </li>
</ul>

ps: une <div> ouverte doit être fermée par </div>
ps: padding:0; suffit largement. Pas besoin de padding:00px;

[Invité]

Bonjour,

1/ comme il s'agit d'une barre de navigation, on utilise la balise dédiée >nav> :

Code html :

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

1
2
3
4
5
6
<nav class="menu-onglet">
  <ul>
    <li><a href="">Mon lien</a></li>
    <li><a href="">Mon second lien</a></li>
  </ul>
</nav>

2/ Un bon code CSS est un code SIMPLE :

Code css :

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
.menu-onglet {
    margin:  0;
    padding: 0;
}
 
.menu-onglet li {
    display: inline-block; 	
    margin:  0;
    padding: 0;
}
 
.menu-onglet a {
    display : block;
    color : #666;
    margin:  0;
    padding : 10px 20px;
    text-decoration : none;
    text-align: center;
    border-top: 2px solid transparent; /* pour éviter que ça saute sur le hover */
}
 
.menu-onglet a:hover {
    border-top: 2px solid #0075CA;
}

3/ Quant au "beau résultat", à toi de nous dire ce que tu veux obtenir au final.

4/ Une autre approche est d'utiliser les flexbox (display:flex; sur le ul +...) :

[Jolt0x]

le width:auto; a suffit a tout résoudre.

Merci a tous.