Foros del Web » Creando para Internet » CSS »

Barra infinita

Estas en el tema de Barra infinita en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/04/2010, 19:44
 
Fecha de Ingreso: abril-2010
Mensajes: 40
Antigüedad: 7 años, 7 meses
Puntos: 0
Barra infinita

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%;
  #2 (permalink)  
Antiguo 26/04/2010, 00:12
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 7 años, 7 meses
Puntos: 154
Respuesta: Barra infinita

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> 
  #3 (permalink)  
Antiguo 26/04/2010, 14:02
 
Fecha de Ingreso: abril-2010
Mensajes: 40
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Barra infinita

Genial muchisimas gracias
  #4 (permalink)  
Antiguo 26/04/2010, 14:21
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Barra infinita

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.

  #5 (permalink)  
Antiguo 27/04/2010, 03:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Barra infinita

Hola:

Cita:
Iniciado por DragonX Ver Mensaje
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.

  #6 (permalink)  
Antiguo 28/04/2010, 13:41
fiu
 
Fecha de Ingreso: diciembre-2006
Ubicación: Barcelona
Mensajes: 128
Antigüedad: 11 años
Puntos: 8
Respuesta: Barra infinita

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.
  #7 (permalink)  
Antiguo 28/04/2010, 17:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Barra infinita

fiu por obvias razones...
para eso esta min-width
  #8 (permalink)  
Antiguo 29/04/2010, 16:54
 
Fecha de Ingreso: abril-2010
Mensajes: 40
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Barra infinita

Cita:
Iniciado por DragonX Ver Mensaje
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

Etiquetas: imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:13.