¿Por qué mi fondo de imagen desaparece en el flotador: izquierda?

Quiero crear una barra de navegación con imágenes en cada extremo para que sea purty.¿Por qué mi fondo de imagen desaparece en el flotador: izquierda?

Por lo tanto, he creado el HTML y CSS a continuación y funcionó muy bien. Mis elementos de menú están en una lista ul/li.

Cuando diseño la lista para poner todos los elementos en una línea, las imágenes en los extremos desaparecen. ¿Que pasa con eso? ¿Cómo lo arreglo?

El culpable es flotar: izquierda; abajo.

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

Las imágenes son diferentes por lo que el HTML/CSS puede ser copiado pegado a Pruébalo.

¿Cuál es el problema? ¿Qué estoy haciendo mal?

Fuente

2010-01-14 Anonymous

Recomiendo agregar desbordamiento: oculto; (y zoom: 1; para mantener la compatibilidad de navegador cruzado para IE6) con el contenedor div en lugar de agregar un div de compensación. Borrar agrega hinchazón a su código fuente.

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

Fuente

2010-01-14 04:35:32 Sasha

Con solo niños flotados, su contenedor externo devolverá una altura de 0px. Como tal, se puede colocar la siguiente inmediatamente después del elemento (s) flotado:

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

y añadir las siguientes reglas:

.clear { clear:both; }

Por ejemplo:

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

Fuente

2010-01-14 04:27:49 Sampson

Esto no parece funcionar en Safari y Firefox en Mac OS. http://jsbin.com/ikige. El valor de compensación debe ser inmediatamente posterior a la UL –

observada y corregida. Gracias Chetan. – Sampson

Si bien esta técnica funciona, la mayoría de las personas usaría alguna variante de clearfix en estos días, ya que no requiere agregar marcado adicional - ver los avisos de Chetan o Sasha. –

Está sucediendo porque tus divs no tienen altura. Puede agregar un div vacío con clear: both inmediatamente después de su UL. O puede agregar estos estilos a UL

width: 100%; 
overflow: auto;

Consulte this para obtener una explicación.

Fuente

2010-01-14 04:29:00

Agregue height: 28px; a su ul en su css. Jonathan y Chetan ya dieron una muy buena explicación de por qué funciona esto, pero, para reiterarlo, los padres de los elementos flotantes no se ven afectados por la altura de sus niños flotando.

Fuente

2010-01-14 04:30:36

¡Buena explicación, gracias! –

¿Por qué mi fondo de imagen desaparece en el flotador: izquierda?

Respuesta

Cuestiones relacionadas