Discussion :

[surejam]

Bonjour,

Je suis débutant en HTML et CSS, je cherche à comprendre certains phénomènes liés au positionnement lors de la création d'un menu horizontal.

Voici le code, il n'y a que la partie qui concerne ma question :

Code HTML :

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

1
2
3
4
5
6
7
<ul class="navmenu">
     <li><a href="#home">Accueil</a></li>
     <li><a href="#dessins">Dessins</a></li>
     <li><a href="#peintures">Peintures</a></li>
     <li><a href="#livres">Livres</a></li>
     <li style="float: right;"><a href="#admin">Admin</a></li>
 </ul>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
ul.navmenu {
    list-style-type: none;
    background-color: #ccc;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
 
ul li {
    float: left;
}

Je ne comprends pas le résultat du CSS overflow: hidden. Sans cette ligne, le background ne s'étend pas sur toute la largeur alors qu'avec bien.

Je comprends que sans l'overflow ça n'occupe pas toute la largeur car je sors les "li" du flux avec float: left;... mais pourquoi donc le bloc <ul> fait-il bien 100% de la largeur juste par l'ajout de overflow: hidden ?

Merci d'avance pour vos lumières,

surejam

[Invité]

Bonjour,

1- Réponse :

• FAQ CSS - Comment faire pour qu'un conteneur englobe ses enfants flottants ?

2- De nos jours : on évite d'utiliser float:left/right (quand on peut faire autrement).

Autres solutions :

• display:inline-block; (sur les li)
• display:table; / display:table-cell; (sur ul / li)
• display:flex; (sur ul)

[surejam]

Merci pour ta réponse jreaux62.

Je sais qu'il existe d'autres façons de procéder mais j'essaie d'apprendre toutes les techniques car ça me sera certainement utile dans la futur pour d'autres choses qu'un menu horizontal.

Cette partie (positionnement) est relativement complexe pour moi, je n'obtiens presque jamais le résultat souhaité du premier coup...

Je suppose que ça viendra avec l'expérience !