Pourquoi mon fond d'image disparaît sur Float: à gauche?

StackOverflow https://stackoverflow.com/questions/2062134

Question

Je veux créer une barre de navigation avec des images à chaque extrémité pour la rendre purty.

J'ai donc créé le HTML et le CSS ci-dessous et cela a très bien fonctionné. Mes éléments de menu sont dans une liste UL / Li.

Lorsque je coiffe la liste pour mettre les éléments sur une seule ligne, les images des extrémités disparaissent. Qu'est-ce qui se passe avec ça? Comment je le répare?

Le coupable est flottant: à gauche; 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 afin que le HTML / CSS puisse être copié collé pour le tester.

Quel est le problème? Qu'est-ce que je fais mal?

Était-ce utile?

La solution

Je recommanderais d'ajouter un débordement: caché; (et zoom: 1; pour maintenir la compatibilité du navigateur croisé pour IE6) au div de conteneur plutôt que d'ajouter un div de compensation. Clear ajoute Bloat à 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.
}

Autres conseils

Avec seulement des enfants flottants, votre conteneur d'extérieur renverra une hauteur de 0px. En tant que tel, vous pouvez placer ce qui suit immédiatement après le ou les éléments flottants:

<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 se produit parce que vos Divs n'ont pas de hauteur. Vous pouvez ajouter une 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.

Ajouter un height: 28px; à ton ul dans votre CSS. Jonathan et Chetan ont déjà donné une très bonne explication de la raison pour laquelle cela fonctionne, mais pour réitérer, les parents d'éléments flottants ne sont pas affectés par la hauteur de leurs enfants flottés.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top