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