Forma correcta de crear header 100% width

eriixt · #1 (**permalink**) 21/01/2012, 00:38

Buenas noches! quería saber cual es la forma correcta de crear un header con width 100% con 2 div adentro (izq y der) y que al cambiar el tamaño de la ventana no se corte...

Desde ya muchas gracias!.

madhatterdef · #2 (**permalink**) 21/01/2012, 07:59

creo que lo que buscas es esto

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
    margin: 0px;
    padding: 0px;
}
.cabezera{
    width: 100%;
    margin: 0 auto;
    height: 50px;
}
.div1{
    width: 50%;
    margin: 0 auto;
    background-color: #0FF;
    height: 50px;
    float: left;
}
.div2{
    width: 50%;
    margin: 0 auto;
    background-color: #0F0;
    height: 50px;
    float: right;
}
</style>
</head>
<body>
<div class="cabezera">
<div class="div1"></div> 
<div class="div2"></div> 
</div>
</body>  
</html>

eriixt · #3 (**permalink**) 21/01/2012, 09:56

sii! esta bien lo que pusiste! pero yo queria algo asi!:

te explico, yo cada ves que hago esto siempre el fondo de header 100% se me corta al achicar la ventana... y no se por que! por eso queria saber como se hace sin que se corte.

C2am · #4 (**permalink**) 21/01/2012, 10:03

Hola
¿querés que se achique a medida que se achica la ventana?
Podrías poner el código que estas usando, porque así es como jugar a las adivinanzas.
También sirve un enlace.

Saludos

eriixt · #5 (**permalink**) 21/01/2012, 10:43

disculpa, aca tienes el codigo css:

Código:

/* ------------------------------- FONDO ------------------------------- */
body, html {
	background-color: #D1D2DC;
	background-position: top;
	background-repeat: repeat-x;
	margin: 0 auto;

}
/* ------------------------------- CABEZERA ------------------------------- */
#header {
	width: 100%;
	height: 186px;
	background: url(../../bg12/images/theme/header_bg.jpg), repeat-x, #333;
	margin: 0 auto;
}

/* HEADER TOP */
#header_top {
	width:970px;
	height:36px;		
	margin:0 auto;
	padding-top: 10px;
}
.header_top {
	font-family: Helvetica;
	font-size:12px;
	color:#fff;
	text-shadow:#000 3px 1px 2px;
}
#header_top_left {
	width:60%;
	float:left;
	overflow: hidden;
}
#header_top_right {
	float:left;
}

html:

Código HTML:

<div id="header">
	<div id="header_top" class="header_top">
    	<div id="header_top_left">
        DIV LEFT
        </div> 
    <div id="header_top_right">
        DIV RIGHT
        </div>
    </div>
</div>

asi es el header ventana completa:

acá el error cuando achico la ventana:

madhatterdef · #6 (**permalink**) 21/01/2012, 13:20

esto???

Código:

<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style>
body{
    margin: 0px;
    padding: 0px;
}
.cabezera{
    width: 100%;
    margin: 0 auto;
    height: 50px;
    background-color: #F00;
}
.contenedor{
    width: 980px;
    margin: 0 auto;
    height: 50px;
}
.div1{
    width: 490;
    margin: 0 auto;
    background-color: #0FF;
    height: 50px;
    float: left;
}
.div2{
    width: 490;
    margin: 0 auto;
    background-color: #0F0;
    height: 50px;
    float: right;
}
</style>
</head>
<body>
<div class="cabezera">
<div class="contenedor">
<div class="div1"></div> 
<div class="div2"></div>
</div> 
</div>
</body>  
</html>

eriixt · #7 (**permalink**) 21/01/2012, 13:38

Cita:

Iniciado por madhatterdef

esto???

Código:

<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style>
body{
    margin: 0px;
    padding: 0px;
}
.cabezera{
    width: 100%;
    margin: 0 auto;
    height: 50px;
    background-color: #F00;
}
.contenedor{
    width: 980px;
    margin: 0 auto;
    height: 50px;
}
.div1{
    width: 490;
    margin: 0 auto;
    background-color: #0FF;
    height: 50px;
    float: left;
}
.div2{
    width: 490;
    margin: 0 auto;
    background-color: #0F0;
    height: 50px;
    float: right;
}
</style>
</head>
<body>
<div class="cabezera">
<div class="contenedor">
<div class="div1"></div> 
<div class="div2"></div>
</div> 
</div>
</body>  
</html>

sisi,, ese codigo esta bien... cuando lo ves con la ventana maximizada (completa) se ve bien... pero cuando achicas la ventana el background del contenedor se se corta! para que te des cuenta... dale un height de 60px y te vas a dar cuenta! ese error tengo! ¿entendes?

madhatterdef · #8 (**permalink**) 21/01/2012, 14:44

hice lo que dijiste y no veo tal error
el código que utilice es

Código:

<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style>
body{
    margin: 0px;
    padding: 0px;
}
.cabezera{
    width: 100%;
    margin: 0 auto;
    height: 60px;
    background-color: #F00;
}
.contenedor{
    width: 980px;
    margin: 0 auto;
    height: 60px;
}
.div1{
    width: 490;
    margin: 0 auto;
    background-color: #0FF;
    height: 60px;
    float: left;
}
.div2{
    width: 490;
    margin: 0 auto;
    background-color: #0F0;
    height: 60px;
    float: right;
}
</style>
</head>
<body>
<div class="cabezera">
<div class="contenedor">
<div class="div1"></div> 
<div class="div2"></div>
</div> 
</div>
</body>  
</html>

que navegador estas usando???

eriixt · #9 (**permalink**) 21/01/2012, 15:31

madhatterdef: mira...

aca dejo una imagen de tu codigo con la ventana maximidad: (se ve bien, no hay problemas)

otra imagen cuando esta la ventana minimizada, como veras, el contenedor rojo desaparecio, se supone que tiene que aparecer a los costados cuando corro el scroll.

y aca modifque el height del contenedor le puse 10px mas para que veas como se corta:

ahora entiendes al problema que voy? (gracias por tu tiempo :D)

madhatterdef · #10 (**permalink**) 21/01/2012, 16:13

ahora veo el problema el problema está en que el código dice

Código:

width: 100%;

y al achicar la ventana se achica el fondo a el tamaño de la ventana.

espero que te sirva.

ahora no se me ocurre nada pero probare un poco más a ver si se me ocurre algo.

madhatterdef · #11 (**permalink**) 21/01/2012, 16:28

ya esta prueba esto

Código:

<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style>
body{
    margin: 0px;
    padding: 0px;
}
.cabezera{
    width: 100%;
    margin: 0 auto;
    height: 60px;
    background-color: #F00;
    min-width: 1010px;
}
.contenedor{
    width: 980px;
    margin: 0 auto;
    height: 60px;
}
.div1{
    width: 490;
    margin: 0 auto;
    background-color: #0FF;
    height: 50px;
    float: left;
}
.div2{
    width: 490;
    margin: 0 auto;
    background-color: #0F0;
    height: 50px;
    float: right;
}
</style>
</head>
<body>
<div class="cabezera">
<div class="contenedor">
<div class="div1"></div> 
<div class="div2"></div>
</div> 
</div>
</body>  
</html>

eriixt · #12 (**permalink**) 21/01/2012, 17:20

Ya había encontrado la forma de hacerlo! puse el fondo en el body y le tire un contenedor fijo! pero tu respuesta es otra opción! muchas gracias por tu tiempo! un gusto!, saludo! =)

madhatterdef · #13 (**permalink**) 21/01/2012, 17:28

no fue nada

me alegro de que hayas podido hallar una respuesta por tus propios medios