Warum verschwindet mein Bildhintergrund im Float: links?

Ich möchte eine Navbar mit Bildern an jedem Ende erstellen, um es puerty zu machen.Warum verschwindet mein Bildhintergrund im Float: links?

Also, ich habe das HTML und CSS unten erstellt und es hat super funktioniert. Meine Menüeinträge befinden sich in einer ul/li-Liste.

Wenn ich die Liste style, um die Elemente alle auf eine Zeile zu setzen, verschwinden die Bilder an den Enden. Was ist damit? Wie repariere ich es?

Der Täter ist Schwimmer: links; unten.

--- --- 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; 
}

Die Bilder sind unterschiedlich, so dass die HTML/CSS können kopiert eingefügt werden Probier es aus.

Was ist das Geschäft? Was mache ich falsch?

Quelle

2010-01-14 Anonymous

Ich würde empfehlen, Überlauf hinzuzufügen: versteckt; (und Zoom: 1; um die Browser-Kompatibilität für IE6 zu erhalten) an das Container-Div, anstatt ein Clearing-Div hinzuzufügen. Clear fügt Bloat zu Ihrem Quellcode hinzu.

#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. 
}

Quelle

2010-01-14 04:35:32 Sasha

Mit nur floated Kinder, wird Ihr Außencontainer eine Höhe von 0px zurückgeben. Als solche können Sie die folgenden unmittelbar nach dem Floats (n) Ort:

<div class="clear"></div>

und fügen Sie die folgenden Regeln:

.clear { clear:both; }

Zum Beispiel:

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

Quelle

2010-01-14 04:27:49 Sampson

Dies scheint in Safari und Firefox unter Mac OS nicht zu funktionieren. http://jsbin.com/ikige. Das Clearing-Div muss sofort nach dem UL –

Notiert und korrigiert werden. Danke Chetan. – Sampson

Während diese Technik funktioniert, würden die meisten Leute heutzutage eine Variante von Clearfix verwenden, da es kein zusätzliches Markup erfordert - siehe Chetan oder Sasha's Anwsers. –

Es geschieht, weil Deine Divs haben keine Höhe. Sie können unmittelbar nach Ihrem UL ein leeres Div mit clear: both hinzufügen. Oder Sie können diese Stile UL hinzufügen

width: 100%; 
overflow: auto;

Siehe this für eine Erklärung.

Quelle

2010-01-14 04:29:00

Fügen Sie eine height: 28px; zu Ihrem ul in Ihrem CSS. Jonathan und Chetan haben bereits eine sehr gute Erklärung dafür gegeben, warum das funktioniert, aber um zu wiederholen, Eltern von schwebenden Elementen werden nicht von der Höhe ihrer schwebenden Kinder beeinflusst.

Quelle

2010-01-14 04:30:36

Schöne Erklärung, danke! –

Warum verschwindet mein Bildhintergrund im Float: links?

Antwort

Verwandte Themen