Foros del web, para los que viven de bits

Gabriel22 · 20-mar-2006, 19:46

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.

braulito · 20-mar-2006, 20:56

Aca tienes varios layouts de 2 o 3 columnas con CSS según la necesidad que tengas:

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

Gabriel22 · 20-mar-2006, 21:34

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?

Gabriel22 · 24-mar-2006, 15:57

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>

SiR.CARAJ0DIDA · 24-mar-2006, 16:51

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';
	}
}

Gabriel22 · 24-mar-2006, 17:24

Gracias por el aporte.
Alguien sabe como solucionarlo usando solo CSS?

braulito · 26-mar-2006, 17:42

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

kemie · 27-mar-2006, 02:21

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

Pablo Castrillo · 18-abr-2006, 09:44

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.

20-mar-2006, 19:46	#1 (permalink)
Gabriel22 Fecha de Ingreso: junio-2003 Mensajes: 27	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.

20-mar-2006, 20:56	#2 (permalink)
braulito Fecha de Ingreso: abril-2004 Ubicación: Cusco - Perú Mensajes: 554	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

26-mar-2006, 17:42	#7 (permalink)
braulito Fecha de Ingreso: abril-2004 Ubicación: Cusco - Perú Mensajes: 554	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

27-mar-2006, 02:21	#8 (permalink)
kemie Fecha de Ingreso: junio-2003 Ubicación: estocolmo<-->mexico Mensajes: 1.627	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::::::::::::::::::::::::::::::

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

20-mar-2006, 21:34	#3 (permalink)
Gabriel22 Fecha de Ingreso: junio-2003 Mensajes: 27	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?

24-mar-2006, 17:24	#6 (permalink)
Gabriel22 Fecha de Ingreso: junio-2003 Mensajes: 27	Gracias por el aporte. Alguien sabe como solucionarlo usando solo CSS?

18-abr-2006, 09:44	#9 (permalink)
Pablo Castrillo Fecha de Ingreso: agosto-2005 Mensajes: 78	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.