CSS menu navigation "li {}" vs "li a {}"

**sdf15** · 12/06/2017, 12h08

Bonjour,

Je suis en train d'apprendre comment construire des menus (type liste) pour naviguer en CSS et j'ai une question lié au différents syntaxes pour formater les éléments de la liste avec CSS

li {} vs li a {}

exemple en dessous du tutoriel
Question : pourquoi ne pas déclarer tout seulement dans "li a {}" et quelle est la différence (j'ai testé et le résultat est le mémé)

Code :

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

1
2
3
4
5
6
7
8
ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
li {
    float: left;
}
li a {
    display: block;
    color: red;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

VS :

Code :

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

1
2
3
4
5
6
7
8
li a {
    float: left;
    display: block;
    color: red;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

PS voulez m'excuser si ce sujet a été déjà expliqué sur le forum ou dans les tutorielles mais j'ai eu du mal a trouver la réponse

merci d'avance

Invité · 12/06/2017, 13h29

Bonjour,

Il faut aussi montrer le code HTML associé.

Cela dit, je doute que tu aies le même résultat...

**sdf15** · 12/06/2017, 13h46

Merci de votre retour

partie CSS dans head

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
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
 
</style>
</head>

problématique: utilité ligne 13 "li {" par rapport à une seule ligne 17 "li a{" avec "float: left;" inclu

Partie HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<body>
 
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
 
</body>
</html>

Invité · 12/06/2017, 14h36

C'est bien ce que j'ai dit : le rendu est différent.

Ajoute des background, pour visualiser :

Solution A :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
li {
    float: left;
    background:yellow;
}
li a {
    display: block;
    color: red;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  background:lightgreen;
}

vs Solution B :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
li {
    background:yellow;
}
li a {
    float: left;
    display: block;
    color: red;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  background:lightgreen;
}

La solution A est la bonne méthode.

Pour info :

<li> est par défaut de type "block"
<a> est par défaut de type "inline"

La plupart des balises ont aussi une valeur sémantique (une signification)

<ul><li> : liste non-ordonnée
<p> : paragraphe
...

Donc, on ne met pas n'importe quoi n'importe comment.

Cependant, <div> (block) et <span> (inline) sont des balises neutres (sans valeur sémantique).
Là, on peut les utiliser pour (presque) tout et n'importe quoi

**sdf15** · 12/06/2017, 16h12

je ne vois pas la difference

solution A

Nom : solution A.JPG
Affichages : 235
Taille : 82,4 Ko

Solution B

Mais si je rajoute une ligne type liste:" <li> test</li> " sans spécifier que ce du type "<a>" la oui, je vois la différence

Nom : solution C.JPG
Affichages : 245
Taille : 106,6 Ko

Mais ce que me rend dingue, c'est que dans le cas du float; right/left c'est le parent qui à priorité (voir "Home" est aligné droit mémé si c'est spécifie "float: left" dans le CSS "li a{"), par contre dans le cas du background il applique bien le jaune soit le bleu

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: right;
    display: block;
    color: white;
  background: blue;
}
 
li a {
    float: left;
    display: block;
    color: red;
    padding: 14px 16px;
    text-decoration: none;
  background: lightgreen;
  }
 
</style>
</head>
<body>
 
<ul>
  <li><a  href="#home">Home</a></li>
   <li> test</li>
</ul>
 
  <br>
 
  <ul>
    <li> test</li>
</ul>
 
  <br>
 
  <ul>
  <li><a href="#home">Home</a></li>
 <ul>
 
   </body>
</html>

Invité · 12/06/2017, 17h03

Utilise plutôt : codepen

rendus : https://codepen.io/jreaux62/pen/zzBOjz

[EDIT] Je viens de comprendre...
Tu obtiens le même rendu grâce à list-style: none; sur le ul !

N.B. et remplace overflow: hidden; sur le ul par clear:both; (c'est à cause du float, qui "sort" l'élément du flux)

CSS menu navigation "li {}" vs "li a {}"

CSS

Vue hybride

Discussions similaires

Partager

Partager