Barra infinita

nEAnnam · #1 (**permalink**) 25/04/2010, 18:44

alguien me puede decir como hacer "infinita" esta barra azul aun redimenzionando la pagina:

haciendo zoom se ve "infinita"

pero miren al redimenzionar el espacio que queda en negro:

el codigo css de la barra es simple:

background: #001426;
height: 150px;
width: 100%;

ipraetoriux · #2 (**permalink**) 25/04/2010, 23:12

Estimado,

Seguramente tienes la capa de la barra azul dentro de alguna otra capa contenedora, por ello que no se hace "infinita". aca te dejo un ejemplo de como deberia ser...

primero creas una capa "central" con ancho y alto al 100% donde iran todas las demas capas, dentro haces primero la capa de la linea azul con width:100%; y luego la capa contenido, la centras en el navegador y dentro pones todo el contenido

Código HTML:

<html>
<head>
<title>css</title>
<style type="text/css">

* {
	margin:0px;
	padding:0px;
}

#central {
	position:absolute;
	width:100%;
	height:100%;
}

#contenido {
	position:absolute;
	width:500px;
	height:1000px;
	left:50%;
	margin-left:-250px;
	background-color:#999;
	
}

#barra {
	position:absolute;
	background-color:#009;
	width:100%;
	height:100px;
}


</style>
</head>
<body>
<div id="central">
<div id="barra"></div>
<div id="contenido">

resto del contenido

</div>
</div>
</body>
</html>

nEAnnam · #3 (**permalink**) 26/04/2010, 13:02

Genial muchisimas gracias

DragonX · #4 (**permalink**) 26/04/2010, 13:21

no se si es tan conveniente que utilices tantas posiciones absolutas, tal vez te resultaría más fácil hacerlo con una imagen de un pixel de ancho como background.

jomaruro · #5 (**permalink**) 27/04/2010, 02:24

Hola:

Cita:

Iniciado por DragonX

tal vez te resultaría más fácil hacerlo con una imagen de un pixel de ancho como background.

Totalmente de acuerdo, es más fácil y da menos dolores de cabeza con las distintas resoluciones.

Saludos.

fiu · #6 (**permalink**) 28/04/2010, 12:41

hola, ese código no resuelve el problema.

lo he copiado y pegado, añadido un margin-top:100px, para poder ver el fondo al estrechar el navegador y el resultado:

he estado probando un par de estilos pero tampoco he encontrado una solucion.

alexk · #7 (**permalink**) 28/04/2010, 16:23

fiu por obvias razones...
para eso esta min-width

nEAnnam · #8 (**permalink**) 29/04/2010, 15:54

Cita:

Iniciado por DragonX

no se si es tan conveniente que utilices tantas posiciones absolutas, tal vez te resultaría más fácil hacerlo con una imagen de un pixel de ancho como background.

pero como se haria eso? perdon por mi ignorancia