Foros del Web » Creando para Internet » CSS »

Problemas con esquema de dos columnas

Estas en el tema de Problemas con esquema de dos columnas en el foro de CSS en Foros del Web. Hola a todos. Tengo este simple esquema: En donde tengo 2 problemas: 1- El menu tiene una imagen de fondo repetida en y (background-repeat: repeat-y;) ...
  #1 (permalink)  
Antiguo 05/03/2005, 22:41
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 13 años, 3 meses
Puntos: 47
Problemas con esquema de dos columnas

Hola a todos.
Tengo este simple esquema:



En donde tengo 2 problemas:

1- El menu tiene una imagen de fondo repetida en y (background-repeat: repeat-y;) El tema es que en general el contenido es mucho mas largo que el largo que ocupa el menu. ¿Como hago para que el largo del menu se "estire" hacia abajo hasta el largo del contenido? Lo mismo pasa con un color de fondo.

2- En IE, cuando el tamaño de la ventana del navegador es mas pequeña que el ancho de la pagina (760px) la caja del contenido se me "cae" debajo de la caja del menu. Como puedo solucionar esto?

Gracias. Saludos

PD: Asi lo tengo armado:

Diagrama

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
#menu {
	background-color: #00CCFF;
	width: 200px;
	float: left;
}
#contenido {
	width: 560px;
	background-color: #99FF99;
	margin-left: 210px;
}
</style>
</head>

<body>
<div id="menu">
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
</div>
<div id="contenido">
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
</div>
</body>
</html> 

Última edición por AleSanchez; 05/03/2005 a las 22:45
  #2 (permalink)  
Antiguo 06/03/2005, 00:26
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
1) Creando una imagen de fondo que se repita a lo largo de un tercer DIV que contenga las dos columnas.
2) BUG del IE otra vez (seguramente).

Te subi un ejemplo para que lo veas funcionando. http://c.1asphost.com/quinientosonce...nas/index.html

El DIV#contenedor contiene a los otros dos y tambien determina el ancho del DIV de contenido. El que aparece al final llamado spacer es para que #contenedor se extienda hasta el final de los DIVs flotantes.

Nota para exquisitos: Mi explicación apesta y quizas el ejemplo también. Soy culpable.
  #3 (permalink)  
Antiguo 06/03/2005, 13:44
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 13 años, 3 meses
Puntos: 47
Mil Gracias, es justo lo que no me salia.
  #4 (permalink)  
Antiguo 06/03/2005, 15:57
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Al margen, te comento que cambié un poco tu CSS original (que funcionaba bastante bien) para evitar un par de bugs del IE .
  #5 (permalink)  
Antiguo 07/03/2005, 08:29
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 13 años, 3 meses
Puntos: 47
Perfectíiiiiiiismo!
Ahora inclusive ya no se "cae" la caja del contenido el IE.
Muchas Gracias!
  #6 (permalink)  
Antiguo 08/03/2005, 09:49
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Tengo este mismo problema pero no me ha funcionado la solucion que diste, a mi la caja no se me cae, y he logrado mantener cada cosa en su sitio con varios navegadores, pero tengo el problema de que el div derecho no ocupa toda la altura del izquierdo y se ve un hueco muy feo debajo, ademas que Firefox lo pone del color del fondo de la pagina y no del color del fondo del div contenedor.

Ver aqui

Ya no se que hacer

Alguna idea??
Gracias
  #7 (permalink)  
Antiguo 08/03/2005, 12:34
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Me parece que no hiciste lo que dije
La idea es esta: Primero tenes un DIV llamado "contenedor" que va a contener las dos columnas. Como este contenedor quedaría debajo de las dos columnas, le aplicas la primer imagen de fondo. Este imagen mide 600px de ancho por 1px de ancho. Los primeros 400px horizontales están pintados de blanco. Los 200px restantes de celeste. Al aplicarle este fondo repetido verticalmente al contenedor, se crea el efecto de dos columnas. Este contenedor debería extenderse verticalmente según la altura de los DIVS no flotados que contiene. Como el DIV izquierda está flotando y para colmo es el más largo, el DIV "contenedor" no se extiende hasta el final y el efecto de dos columnas termina antes. Solución: Agregar un DIV con un clear:both. Este DIV lo que hace es prohibir tener DIVs flotantes a sus costados. Y como además éste no está flotando, "contenedor" tiene que extenderse hasta abarcarlo (abarcando así "de casualidad" al DIV izquierdo flotante).
Sobre el efecto de degrade, es sencillo: Como los DIV izquierdo y derecho están puesto arriba del contenedor, los fondos de esos dos taparían al de "contenedor". Le pones al DIV derecho el degrade como fondo situado en el extremo superior y que no se repita. Entonces el DIV derecho tiene un fondo sólo en la parte de arriba pero todo el resto es transparente (dejando que se vea la parte celeste del fondo del contenedor).
Acá te dejo un ejemplo bien pelado de lo que dije arriba.
http://c.1asphost.com/quinientosonce...ade/index.html
  #8 (permalink)  
Antiguo 08/03/2005, 14:51
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Tienes razon, ya lo tengo casi resuelto, solo hay un detalle.

Es ahora que el cuadro blanco del contenido no llega hasta abajo, sino que deja ese espacio azul de separacion entre él y el footer, al cual quiero ponerle otro color.

aqui
  #9 (permalink)  
Antiguo 08/03/2005, 16:54
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
No estas haciendo las cosas según lo que explique antes. Me doy cuenta que le metiste un fondo celeste al container y esperabas que el DIV de contenido fuera lo bastante largo. Fijate que pasa si el DIV de menu crece más que el de contenido. La solución infalible para esos casos es todo lo que dije antes.
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 16:57.