Foros del Web » Creando para Internet » CSS »

Div 100% ancho (totalmente) ¿disparate o problema grave?

Estas en el tema de Div 100% ancho (totalmente) ¿disparate o problema grave? en el foro de CSS en Foros del Web. Es increíble como nunca lo había notado, pero en algunas webs con un div superior de supuestamente todo el ancho me ocurre el siguiente fenómeno: ...
  #1 (permalink)  
Antiguo 18/10/2008, 20:37
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Div 100% ancho (totalmente) ¿disparate o problema grave?

Es increíble como nunca lo había notado, pero en algunas webs con un div superior de supuestamente todo el ancho me ocurre el siguiente fenómeno:

Quiero que haya un div superior, digamos como un cabezal con un color de fondo que abarque toda la parte de arriba (div #top). Luego otro div con ancho especificado en px (#main) .

Un ejemplo sería el siguiente:

Código CSS:

Código:
body {
	background: #000000;
	margin:0; padding:0;
}

#top{background:#990000; height:120px;}

#main{
background:#0000FF;
width:740px;
margin: 20px auto;
color:#FFFFFF;
}
Código HTML:

Código HTML:
<div id="top"></div>
<div id="main">LOROLOROLOROLORO</div> 
Parecería que está todo bien, sin embargo al minimizar la ventana a un ancho en el que se deba hacer scroll horizonal por el div #main; el div de #top se queda en el ancho de la ventana y al hacer el scroll queda cortado.

Miren las imágenes:





¿Qué solución existe?

Muchas gracias de antemano.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #2 (permalink)  
Antiguo 19/10/2008, 08:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Hola Hey_alan

Disculpa, ando algo espeso y no se si te he comprendido bien.

Pero creo que si modificas tu css con lo resaltado en negrita harás lo que creo que quieres hacer ;)
Cita:
body {
background: #000000;
margin:0; padding:0;
}

#top{background:#990000; height:120px;
width: 100%;
display: block;
}

#main{
background:#0000FF;
width:740px;
margin: 20px auto;
color:#FFFFFF;
}
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 19/10/2008 a las 09:03
  #3 (permalink)  
Antiguo 19/10/2008, 09:07
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

No es necesario que definas width:100%; ni width:100%;display:block; pues los divs tienen la caracteristica de ocupar todo el anchor disponible para presentar el contenido.
Entonces si no lo defines, tu scrollbar de abajo de la web nunca se mostrara.

Suerte :D
  #4 (permalink)  
Antiguo 19/10/2008, 09:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Sí, ya se que los div son por definición elementos de bloque. Pero Hey_Alan muestra una porción muy pequeña de código, así que opto por una redundancia consciente, ya que redundancia no es sinónimo de error.

Según lo que creo haber entendido es que Hey_Alan desea que el #top tenga la misma anchura que la pantalla y de ahí mi respuesta indicando un width:100%, porque no es este div el que fuerza la aparición del escroll horizontal, sino el #main, que tiene definido "width: 740px", y es en ese momento cuando su #top no cubre toda la anchura, origen de su consulta.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 19/10/2008, 11:17
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Muchas gracias a ambos por sus respuestas.

Exacto, #main es el que provoca el scrollbar y al minimizar la ventana, #top sólo se ajusta al tamaño que le demos a ésta y no al completo que ocupa el documento con scroll.

El código que he puesto es un ejemplo, pero completo... es decir, pónganlo en un nuevo html y les dará el error.

Recorcholis... no encuentro ningún método para solucionarlo x_x

Saludos.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #6 (permalink)  
Antiguo 19/10/2008, 11:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Pues aunque no imagino el origen del error, sí se me ocurre cómo solucionarlo: pon a la cabecera el mismo ancho que al cuerpo (740), y listo (creo).
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 19/10/2008, 11:46
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Gracias por la respuesta.

El problema es que quiero que (en efecto) cubra todo el documento al 100%, como cualquier cabezal con color de fondo.

He encontrado un tema similar:

http://www.forosdelweb.com/f53/capas...ra-pie-460979/

Sin embargo tampoco dieron con la solución...
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #8 (permalink)  
Antiguo 19/10/2008, 12:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

Ah, de acuerdo, no había etendido qué era lo que querías hacer.

Para todos excepto para IE se soluciona fácil, añadiendo un min-width de 740px:

min-width: 740px;

Me temo que para IE habrá que usar un width:expression de esos par dar un ancho mínimo.

<!--[if IE 6]><style>#top {width:expression(
(document.documentElement.clientWidth < 740)? "740px" : "auto"
);}</style><![endif]-->
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 19/10/2008, 12:43
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Div 100% ancho (totalmente) ¿disparate o problema grave?

LOL

Como siempre, IE arruina la diversión...

De cualquier manera, cualquier usuario que aún lo use no merece mi atención xD.

Muchas gracias!
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
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 06:27.