Html div width 100% no funciona

Hay algunos problemas con mi HTML, así que estoy publicando el código.Html div width 100% no funciona

La primera etiqueta es div con id="header". Le di un ancho del 100% y le di una imagen de fondo.

Dentro del encabezado hay otra div con id="header-contents". Lo quiero centrado en la página, así que le he dado un ancho y luego margin:0 auto. Funciona bien con el navegador de máximo tamaño, pero cuando hago zoom o cambio el ancho del navegador a aproximadamente la mitad, el fondo del encabezado div comienza a desaparecer en algún punto y no completa el ancho del 100%.

Esto es lo que parece en un primer momento (y siempre debería ser): intended look http://i49.tinypic.com/3505fnk.png

Esto es cómo se ve cuando el zoom o cambiar el tamaño del navegador: after resize http://i46.tinypic.com/2lqg7r.png

¿Cuál es el código HTML adecuado y CSS ¿para ello? Aquí está el código:

<!DOCTYPE HTML> 
<html> 
<style> 
body 
{ 
    margin:0; 
    padding:0; 
} 
.clear 
{ 
    display:block; 
    clear:both; 
} 
#header 
{ 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
#head-contents 
{ 
    width:974px; 
    margin:0 auto; 
    height:156px; 
} 
#header ul 
{ 
    margin:85px 23px 0 0; 
    float:right; 
    list-style-type:none; 
} 
#header ul li 
{ 
    display:inline; 
} 
#header ul li a 
{ 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 
#header ul li a:hover , 
#header ul li a.active 
{ 
    color:#FD7600 
} 
</style> 
<body> 
<div id="header"> 

<div id="head-contents"> 

<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" /> 

<ul> 
<li><a href="#" class="active">Home</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 

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

</div> 

</div> 

</body> 

</html>

Fuente

2012-06-25 UmeRonaldo

Usted debe aprender a utilizar jsFiddle para que podamos ayudar más fácil. ¡buscalo en Google! – Samson

Aquí está el violín http://jsfiddle.net/eYrg8/ – UmeRonaldo

Esta es la hoja de estilo, que trabaja conmigo:

body{  
    margin:0;  
    padding:0; 
} 
    .clear{  
    display:block; 
    clear:both; 
}  
    #header{ 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
    #head-contents{  
    width:974px;  
    margin-left:200px; 
    height:156px; 
} 
    #header ul {  
    margin:85px 23px 0 0;  
    float:right; 
    list-style-type:none; 
} 
    #header ul li {  
    display:inline; 
}  
    #header ul li a { 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 

    #header ul li a:hover ,  
    #header ul li a.active {  
    color:#FD7600; 
}

Cambiar el tamaño de la ventana y el establecimiento de los márgenes para auto arruine la posición de su div interior, ya que es el ancho no se ajusta a la ventana

Fuente

2012-06-25 20:32:37 Samson

Estoy buscando una solución – UmeRonaldo

haga clic en el enlace! :) – Samson

lo hice, creo que no hice mi problema lo suficientemente claro. – UmeRonaldo

Sacar la propiedad Imagen de fondo de #header y aplicar este estilo a la etiqueta del cuerpo:

background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

Usted ya no tendrá el problema que usted describió. Todo lo que necesita hacer ahora es reducir la imagen de fondo a una altura de 156px, usando un paquete de software de edición de imágenes como Photoshop.

Editar: aquí está la jsFiddle actualizado que muestra la solución: http://jsfiddle.net/eYrg8/35/

Fuente

2012-06-25 21:33:39 Rob

he encontrado la solución:

#header { 
    height: 156px; 
    min-width: 990px; 
    background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
    display: block; 
} 

#head-contents { 
    width: 974px; 
    margin: 0 auto; 
    height: 156px; 
}

Es todo una cuestión de min-width en el #header. Revisé la página de inicio de sesión de facebook y lo descubrí.

Fuente

2012-06-26 08:30:13 UmeRonaldo

Working FIDDLE Demo

debe establecer el width de su head-contents como el min-width de su header:

#header { 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 

    min-width: 974px; /* this is width of head-contents */ 
}

Fuente

2013-05-21 02:30:08

#header { 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
}

Fuente

2014-09-13 15:18:02

Respuesta

Cuestiones relacionadas