Foros del Web » Creando para Internet » CSS »

Layout 2 columnas con CSS, ayuda please!

Estas en el tema de Layout 2 columnas con CSS, ayuda please! en el foro de CSS en Foros del Web. En el enlace: http://www.coes.org.pe/coes/est1999_...uipamiento.htm He dividido el layout en 2 columnas, la cual son 2 divs llamados L y R (left & right, izquierda y ...
  #1 (permalink)  
Antiguo 15/03/2005, 13:43
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Layout 2 columnas con CSS, ayuda please!

En el enlace:

http://www.coes.org.pe/coes/est1999_...uipamiento.htm

He dividido el layout en 2 columnas, la cual son 2 divs llamados L y R (left & right, izquierda y derecha) Muestro el CSS

div#L {position:absolute; left:0; width:178px; background-color:#DDDDDD; height:100%; padding-bottom:0px;}
div#R {margin-left:178px; min-width:350px;}

El asunto es que la columna de la izquierda debería tener el fondo gris en toda la página, como el contenido es largo (muchas tablas de data tabular), no reconoce el height:100%.

Existe una página análoga, pero en vez de CSS usa tablas para el layout (lo cual es errado):

http://www.coes.org.pe/coes/est1999_...dasenergia.htm

Sin embargo aqui si toda la columna de la izquierda tiene fondo gris.

Por favor indicarme como puedo lograr el mismo efecto con CSS para el primer link?

Saludos cordiales.

CHRISTIAN MEZA VILLAFUERTE
  #2 (permalink)  
Antiguo 15/03/2005, 14:07
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Fijate si te sirve este thread: http://forosdelweb.com/showthread.php?t=277033
  #3 (permalink)  
Antiguo 15/03/2005, 14:14
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Remo, en este thread hablan de una imagen como fondo, aqui no uso imagen, sino le asigno un color de fondo, en este caso el gris. Yo quiero que se extienda hasta el final de la página, aunque haya scroll-bar vertical.
  #4 (permalink)  
Antiguo 15/03/2005, 14:30
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Me parece que se puede con height:auto.
  #5 (permalink)  
Antiguo 15/03/2005, 14:33
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
No funciona con height:auto programeitor.

Me corta el fondo. Fijate en los 2 links, el primero es el que no funca, (está hecho en capas CSS) y el segundo es el antiguo (con tablas).
  #6 (permalink)  
Antiguo 15/03/2005, 14:35
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
prueba top:0;bottom:0
  #7 (permalink)  
Antiguo 15/03/2005, 14:44
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
div#L {position:absolute; left:0; width:178px; background-color:#DDDDDD; height:100%; padding-bottom:0px;}
div#R {margin-left:178px; min-width:350px;}

Ya considera eso y nada, amigo programeitor.
  #8 (permalink)  
Antiguo 15/03/2005, 15:04
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
¿que ya lo considera?.......¿donde? ,¿no sera el padding-bottom ,no?

El padding-bottom lo puedes quitar ,añadele top:0;bottom:0; ademas quitale el height, se me olvido decirtelo antes, que es lo que hace que se quede corto.

De todas formas ya estoy indeciso ,Ahora mismo voy a probar este problema.
  #9 (permalink)  
Antiguo 15/03/2005, 15:22
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Pues es verdad tio, no doy ni una, estaba yo muy convencido ,lo estoy probando y no lo consigo ni a la de tres ,como alguien no nos heche una mano lo vas a tener que solucionar insertandole una tabla al div, creo?
  #10 (permalink)  
Antiguo 15/03/2005, 15:39
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Si pues, el asunto es que no funca, deberia funcionar como la tabla. No se porqué no se extiende hasta el final.
  #11 (permalink)  
Antiguo 15/03/2005, 16:36
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Un DIV no es una tabla.
Un DIV crece hasta contener todo los elementos hijos (que contiene).
La única forma lo bastante compatible es usar una imagen de fondo como se explica en el thread que mencione antes.
  #12 (permalink)  
Antiguo 15/03/2005, 16:51
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Esta es una solucion:

<style> /* programeitor 2005 .dos paneles de la misma altura */
body,table,td{height:100%;margin:0;padding:0;borde r:0 solid black;border-collapse:collapse;vertical-align:top;}
</style>
<table>
<tr>
<td width=178px bgcolor=silver>
menus
</td>
<td width=350px bgcolor=gray>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p></td>
</tr>
</table>
  #13 (permalink)  
Antiguo 15/03/2005, 20:55
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Cmezauni:

Antes que nada:

<link rel=stylesheet type="text/css" href="../../../include/estadisticas.css">
<SCRIPT src="../../../include/estadisticas.js"></script>

Esas lineas debes ponerlas entre <head> y </head>, NO entre <html> y <body> como lo tienes ahora.

Encuanto al tema de las alturas... lo unico que se me ocurre por el momento es javascript. En el evento onload del documento, detectar la altura del div "R" y con CSS darle esa misma altura al div "L"

<script type="text/javascript">
function alturas(){
var divleft = document.getElementById('L');
var divright = document.getElementById('R');
divleft.style.height = divright.offsetHeight;
}
window.onload = alturas;
</script>

Es la unica solucion que se me ocurre por el momento.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #14 (permalink)  
Antiguo 16/03/2005, 01:08
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
Puedes checar este ejemplo, que funciona sin necesidad de javascript:
http://disenorama.com/headerfooter_cols.htm
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #15 (permalink)  
Antiguo 16/03/2005, 05:58
Avatar de Vice  
Fecha de Ingreso: agosto-2003
Mensajes: 613
Antigüedad: 14 años, 4 meses
Puntos: 2
He estado haciendo unas pruebas y lo he solucionado de una forma, que tal vez no sea la mejor, pero bueno, no usa javascript, sólo css:
Estilos:
div#T {position:absolute; left:0; top: 0; background-color:#DDDDDD;}
div#L {position:absolute; left:0; bottom:0; width:178px; background-color:#DDDDDD; height:100%;}
div#R {margin-left:178px; min-width:350px; background-color:white;}

Añado una nueva capa T que contiene a las otras dos.
<div id=T>
<div id=L>
</div>
<div id=R>
</div>
</div>
Espero que te sirva.
Un saludo.
__________________
Estoy contagiado de Generación-I

Última edición por Vice; 16/03/2005 a las 06:01
  #16 (permalink)  
Antiguo 16/03/2005, 07:34
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Hola Vice.

Tu solución me funcionó solamente para Opera 7.54.

Lamentablemente en Netscape 7.0, Mozilla Firefox 1.0.1 y en Internet Explorer 6 SP1 sigue el problema anterior.

Cabe destacar que uso los 4 navegadores como testeo.
  #17 (permalink)  
Antiguo 16/03/2005, 10:25
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Kemie: el problema de utilizar height:100% en el selector html, es que ese 100% cubre sólo la altura del primer pantallazo (es decir, el area visible sin haber utilizado el scrollbar). Pero en el caso que de que el contenido del div sea muy extenso y necesitas moverte mediante el scrollbar, el div no aumenta su altura en relacion al contenido.

Para solucionar eso, para el div en vez de usar height:100% hay que usar min-height:100% (y algun equivalente para IE). De esa manera el div va a crecer en relacion a la cantidad de texto que tenga dentro. Claro que en el caso preciso del ejemplo que posteaste, eso involucraría otra serie de cambios, pero ese ya es otro cuento.

Sin embargo, en el caso del sitio posteado por quien abrió este foro, el uso de min-height:100% tampoco sería la solución. Ya que en este caso, para que el div "L" siempre llegue hasta el final de la pagina, no depende de su propio contenido, sino del contenido del div "R".

Es por eso que la unica solucion que encontré fue equiparar ambas alturas con javascript.
__________________
El conocimiento es libre: Movimiento por la Devolución

Última edición por frijolerou; 16/03/2005 a las 10:42
  #18 (permalink)  
Antiguo 16/03/2005, 18:14
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
frijolerou: height:100% es interpretado por Internet Explorer/Win como min-height:100%.
  #19 (permalink)  
Antiguo 16/03/2005, 18:33
Avatar de walo  
Fecha de Ingreso: mayo-2004
Mensajes: 310
Antigüedad: 13 años, 6 meses
Puntos: 0
el height solo te toma el tamaño de la ventana, no te toma si la pagina es mas alta que la ventana.
  #20 (permalink)  
Antiguo 16/03/2005, 23:11
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Remo: esa era la parte que me faltaba :D
__________________
El conocimiento es libre: Movimiento por la Devolución
  #21 (permalink)  
Antiguo 17/03/2005, 07:19
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
David Muñoz, una consulta, disculpame mi ignorancia por favor.

Que diferencia hay entre height:100% y min-height:100% ???

CHRISTIAN
  #22 (permalink)  
Antiguo 17/03/2005, 08:56
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Veamos:

En los navegadores que respetan los estándares (como Firefox) height define un tamaño fijo para el elemento. Por ejemplo si defines el height para un div en 50px, y en este div metes un texto mucho más largo que eso, el div seguirá midiendo 50px de alto, y el texto seguirá su flujo sin afectar a su contenedor, y se verá como si parte del texto estuviera fuera del div.

En los navegadores que siguen los estándares, min-height define una altura minima para el elemento, pero será flexible si le metes un contenido mucho mayor a la altura minima definida. Por ejemplo, si defines el min-height de un div como 50px, si ingresas una sola linea de texto, el div seguirá midiendo 50px de alto, en cambio si ingresas un texto mucho más larog que sobrepase los 50px de altura, el div irá creciendo en relacion a la cantidad de texto.

¿Y que pasa en el caso e Internet Explorer?. Este browser no admite min-height, pero el atributo height cumple la misma función.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #23 (permalink)  
Antiguo 17/03/2005, 10:41
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
La verdad, me has aclarado bastante mi duda. Gracias David.

Aprovecho tu buena fe, para preguntarte 2 cosas:

1) Sabes que <hr> tiene en sus propiedades "noshade", la cual elimina el efecto de sombras. Cual es su análogo en CSS?

2) Yo uso en muchas páginas un DIV o un TD de un TABLE con ONMOUSEOVER para mostrar un cuadro de texto. Me ayudo de funciones javascript. Como puedo hacer esto con puro CSS, sin javascript?

Gracias nuevamente.
  #24 (permalink)  
Antiguo 17/03/2005, 11:15
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
cmezauni: para los <hr> debes aplicar el estilo de esta manera:

hr{
color:red;
background-color:red;
border:0;
height:1px;
}

con eso te queda una simple linea horizontal, ahi le vas dando el grosor que requieras con "height" (se usa "color" y "background-color" para que sea compatible con IE y el resto d enavegadores)

Sobre la segunda pregunta... para usar solo CSS creo que debes trabajar con la pseudo-clase :hover (pero el problema es que IE permite esa pseudo-clase solo en los elementos <a> con un href...

No manejo mucho ese tema, asi que podrias revisra sobre las seudo-clases en:

http://ignside.net/man/css
http://www.w3schools.org/css
__________________
El conocimiento es libre: Movimiento por la Devolución
  #25 (permalink)  
Antiguo 17/03/2005, 11:56
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Ok David, gracias. Cualquier duda que tenga te la haré saber.

Una ultima cosa, un buen libro sobre CSS 2 y los estándares web? Aqui en mi querido país, Perú, no he encontrado nada, hay HTML pero son libros viejos que siguen enseñando font face bgcolor y tables.
  #26 (permalink)  
Antiguo 18/03/2005, 14:35
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

Hola amigos.

He hecho algunas averiguaciones respecto del layuot de dos columnas., He pensado que metiendo el div chico dentro del grande podria solucionar el tema.

<style>
#chico {
position:absolute;
left:-178px;top:0;width:178px;height:100%;
background:silver;}
#grande {position:absolute;
left:178px;top:0;width:350px;height:;
background:gray;}
</style>

Resulta ,que si a la capa grande le doy height:100% va perfecto en IE ,pero no en NS...., y si no le asigno ningun height:; hace todo lo contrario, va bien en NS y en IE no funciona. ,¿que os parece?

<div id=grande>
<div id=chico>
a<p>a<p>a<p>a<p>a<p>
</div>

a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
</div>

Bueno, espero vuestars respuestas. Saludos.

.
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 23:53.