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

Version imprimable

12/06/2017, 12h08
sdf15

CSS menu navigation "li {}" vs "li a {}"
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:

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:

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:

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
12/06/2017, 13h29
Invité

Bonjour,

Il faut aussi montrer le code HTML associé.

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

code

Merci de votre retour

partie CSS dans head

Code:

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:

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>

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

Ajoute des background, pour visualiser :

Solution A :
Code:

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:

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 :aie:

3 pièce(s) jointe(s)

resultats

je ne vois pas la difference

solution A
Pièce jointe 284940

Solution B
Pièce jointe 284941

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
Pièce jointe 284946

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 :aie:
Code:

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>

12/06/2017, 17h03
Invité
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)
12/06/2017, 17h29
sdf15

un grand merci de votre retour, je vais regarder ça de plus près