Pourquoi mon image de fond disparaissent sur float: left?

Je veux créer une barre de navigation avec les images sur chaque extrémité pour en faire purty.

Donc, j'ai créé le HTML et le CSS ci-dessous et il a très bien fonctionné. Mes éléments de menu sont dans un ul/li liste.

Quand j'style de la liste de placer les éléments sur une même ligne, les images sur les extrémités disparaissent. Qu'est-ce qui? Comment puis-je résoudre ce problème?

Le coupable est float: left; ci-dessous.

--- test.html ---

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div id="container">
        <div id="header-usernav" class="span-6 last large">
            <div id="header-usernav-leftside"><div id="header-usernav-rightside">
                <ul>
                    <li>Register</li>
                    <li>Signin</li>
                    <li>Signout</li>
                </ul>
            </div></div>
        </div>
    </div>
</body>
</html>

--- test.CSS ---

#container #header-usernav {
    background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
    height: 28px;
    background-repeat: repeat;
}
#container #header-usernav-leftside {
    background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
    background-position: top left;
    background-repeat: no-repeat;
}
#container #header-usernav-rightside {
    background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
}

#container #header-usernav li {
    float: left;
    padding: 0;
    margin: 0 0.2em;
}

Les images sont différentes, donc le html/css peut être copié collé pour le tester.

Quel est le problème? Ce que je fais mal?

InformationsquelleAutor | 2010-01-14

Je vous recommande l'ajout de overflow:hidden; (et de zoom: 1; pour maintenir la compatibilité multi-navigateur pour IE6) à la div conteneur plutôt que d'ajouter une compensation div. Claire ajoute la météorisation à votre code source.

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    overflow: hidden;
    zoom: 1;
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}

InformationsquelleAutor Sasha

5

Avec seulement flottait enfants, votre outter conteneur sera de retour d'une hauteur de 0px. En tant que tel, vous pouvez placer le code suivant juste après la flottait élément(s):
```
<div class="clear"></div>
```
Et ajouter les règles suivantes:
```
.clear { clear:both; }
```
Par exemple:
```
<div id="container">
    <div id="header-usernav" class="span-6 last large">
        <div id="header-usernav-leftside">
          <div id="header-usernav-rightside">
            <ul>
                <li>Register</li>
                <li>Signin</li>
                <li>Signout</li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
    </div>
</div>
```
- Cela ne semble pas fonctionner dans Safari et Firefox sur Mac OS. jsbin.com/ikige. La compensation div doit être immédiatement après l'UL
- Noté et corrigé. Merci Chetan.
- Bien que cette technique fonctionne, la plupart des gens utilisent une variante de clearfix ces jours-ci, il ne nécessite pas l'ajout de balisage - voir Chetan ou de Sasha anwsers.
InformationsquelleAutor Sampson
2

Ce qui se passe parce que votre divs ont pas de hauteur. Vous pouvez ajouter un div vide avec clear: both immédiatement après votre UL. Ou vous pouvez ajouter ces styles UL
```
width: 100%;
overflow: auto;
```
Voir cette pour une explication.

InformationsquelleAutor Chetan Sastry
1

Ajouter un height: 28px; à votre ul dans votre css. Jonathan et Chetan ont déjà donné une très bonne explication de pourquoi cela fonctionne, mais pour rappel, les parents de flottaient éléments ne sont pas affectés par la hauteur de leurs flottait enfants.
- Belle explication, merci!
InformationsquelleAutor Sean Vieira

Vous devez vous connecter pour publier un commentaire.