Foros del Web » Creando para Internet » CSS »

Maquetar 3 columnas

Estas en el tema de Maquetar 3 columnas en el foro de CSS en Foros del Web. No dejo código porque terminé borrando todo lo que habia hecho, frustrado por no conseguir el resultado que buscaba. Lo que pido es si alguien ...
  #1 (permalink)  
Antiguo 20/03/2006, 20:46
 
Fecha de Ingreso: junio-2003
Mensajes: 26
Antigüedad: 14 años, 5 meses
Puntos: 0
Maquetar 3 columnas

No dejo código porque terminé borrando todo lo que habia hecho, frustrado por no conseguir el resultado que buscaba.
Lo que pido es si alguien sabe y puede publicar enlaces sobre algun buen artículo sobre como maquetar un diseño de este tipo:

Código PHP:
Encabezado

Columna1 Columna2 Columna3

Pie 
Los que encontré que cumplen con esto no tienen en cuenta el tamaño del contenido de los bloques y generalente se desbordan si este es muy extenso.

Gracias de antemano.
  #2 (permalink)  
Antiguo 20/03/2006, 21:56
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Aca tienes varios layouts de 2 o 3 columnas con CSS según la necesidad que tengas:

http://blog.html.it/layoutgala/
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 20/03/2006, 22:34
 
Fecha de Ingreso: junio-2003
Mensajes: 26
Antigüedad: 14 años, 5 meses
Puntos: 0
Muchas gracias, este es el que más se ajusta lo que quiero:

http://blog.html.it/layoutgala/LayoutGala08.html

El único problema es el alto de las columnas...se podría hacer que las otras 2 se auto-ajusten al height de la que tiene mayor altura?
  #4 (permalink)  
Antiguo 24/03/2006, 16:57
 
Fecha de Ingreso: junio-2003
Mensajes: 26
Antigüedad: 14 años, 5 meses
Puntos: 0
Se entiende? Lo que busco es que las 3 columnas queden siempre con 100% de altura, es decir que la que lleve mas contenido marcará el alto y las otras 2 se deberian ajustar a eso.




Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>No va ni para atras</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html,body{margin:0;padding:0;height:100%;}


#container{width:700px;margin:0 auto;text-align:left;height:100%;}


div#wrapper{float:left;width:100%;}

#right{background: red;float:left;width:150px;margin-left:-150px;min-height:100%;}
#left{background: blue;float:left;width:150px;margin-left:-700px;min-height:100%;}
#content{line-height:1.4;background: yellow;margin: 0 150px;min-height:100%;}
#footer{background: #333;color: #FFF;clear:left;width:100%;}
#header { height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}




</style>



</head>
<body>
<div id="container">
<div id="header"><h1>header</h1></div>
<div id="wrapper">

<div id="content">
Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido 
</div>
</div>
<div id="right">
right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right 
</div>
<div id="left">
left left left left left left left left left left left left left left left left left left left left left left left left 
</div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html> 
  #5 (permalink)  
Antiguo 24/03/2006, 17:51
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
eso lo hago con javascript en mi pagina: www.torneosnydus.com, cuando se carga la pagina llamo a esta funcion que me iguala la altura de las 2 columnas.

Código:
function adjust_cols()
{
	// ajusta a la misma medida las 2 columnas del index
	var c1 = document.getElementById('menuIZQ'); // contenedor columna izq
	var c2 = document.getElementById('panel_derecho'); // contenedor columna derecha
	var ob1 = document.getElementById('expand_content_c1'); // id del elemento que se va a expander de la col izq
	var ob2 = document.getElementById('expand_content_c2'); // id del elemento que se va a expander de la col der
        var dif;
	if (c1.offsetHeight > c2.offsetHeight)
	{
		dif = c1.offsetHeight - c2.offsetHeight;
		ob2.style.height = ob2.offsetHeight + dif + 'px';
	}else{
		dif = c2.offsetHeight - c1.offsetHeight;
		ob1.style.height = ob1.offsetHeight + dif + 'px';
	}
}
__________________
Internet Explorer SuckS
Download FireFox
  #6 (permalink)  
Antiguo 24/03/2006, 18:24
 
Fecha de Ingreso: junio-2003
Mensajes: 26
Antigüedad: 14 años, 5 meses
Puntos: 0
Gracias por el aporte.
Alguien sabe como solucionarlo usando solo CSS?
  #7 (permalink)  
Antiguo 26/03/2006, 18:42
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Solo con CSS.. crea una imagen de fondo que tome los 3 colores suponiendo que existe un div contenedor de tus 3 columnas que se llame main, éste tendría el fondo de los 3 colores, algo asi:
Código:
#main {
  background: url('fondo3colores.gif') repeat-y;
}
y cada vez que crezca cualquier contenido, el fondo se repite hacia abajo y no hay problema
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #8 (permalink)  
Antiguo 27/03/2006, 03:21
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
http://www.redmelon.net/tstme/3cols2/
http://www.positioniseverything.net/...rs-center.html
http://www.positioniseverything.net/...ut/equalheight

alguno de esos te debe servir
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #9 (permalink)  
Antiguo 18/04/2006, 10:44
Avatar de Pablo Castrillo  
Fecha de Ingreso: agosto-2005
Mensajes: 78
Antigüedad: 12 años, 3 meses
Puntos: 0
Hola. Tengo la misma duda que nos plantea Gabriel y he estado mirándome los enlaces de kemie (muy buenos).

Pero en mi caso, los divs tienen que ser transparentes, y no soy capaz de hacerlo siguiendo esos tutoriales.

¿Alguien sabe como solucionar esto?

Venga, un saludo a todos y gracias.
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 20:26.