No encuentro la manera de hacerlo..

taeldany · #1 (**permalink**) 14/05/2008, 07:31

Buenas
es sobre maquetación

Tengo la siguiente situación.

Tengo que lograr el típico esquema
Header
Content (3 columnas)
Footer

Bien eso se logra facilmente, el problema está en las columnas, ya que lo que yo necesito es que el ancho de las columnas sea ajustable según el contenido.

O sea se me puede presentar el caso de que cualquiera de las columnas esté vacía, por lo que ese espacio vacío no debe aparecer, el mismo debería quedar cubierto con la columnas contigua.

POr ejemplo, algunas de las páginas podrian no tener nada en el panel izq. entonces el panel derecho deberí ocupar ese lugar.

Otro caso es que por ejemplo el contenido del panel central sea demasiado ancho, incluso podría superar el ancho de la pantalla, yo necesitaría que se amplíe lo necesario, desplazando el panel derecho lo que corresponda.

Generalmente el panel izq. y derecho no deberían exceder unos 200px.

He leído muchos tutoriales pero en ningún caso vi esta situación, cuyo comportamiento es el normal si usara tablas

Bueno espero haberme expresado bien. Por si ayuda le pongo algo de código.

<div>
<div id="toppane">
</div>
<div id="leftpane" style="float: left; ">
</div>
<div>
<div id="contentpane" >
</div>
<div id="rightpane" style="float: right;">
</div>
</div>
<div id="bottompane" style="clear: both; ">
</div>
</div>

taeldany · #2 (**permalink**) 14/05/2008, 13:00

Pareciera que no hay solución sencilla para lograr esto, por lo que pude investigar.

Así que optaré por el uso de tablas para esta sección. Se agradece de todas maneras

mio_carpe_diem · #3 (**permalink**) 14/05/2008, 13:34

Me gustaria mucho ayudarte, pero no adjuntas el CSS. Veo que cada panel tiene su propio ID, pero no se las propiedades.

Pero solo para que lo tengas en consepto los bordes tambien cuentan a la hora de contar espacios. Suerte

jlueiza · #4 (**permalink**) 14/05/2008, 13:36

lo que yo haria seria probar con porcentajes en el margin-left y width de las columnas. Me imagino que por ahi va la solucion

saludos

Mikmoro · #5 (**permalink**) 14/05/2008, 16:12

Por dios, qué poca paciencia y qué poco tesón para hacer las cosas. A las 15:30 haces la consulta y a las 21:00 ya has tirado la toalla convencido de que no hay solución.

Puedes probar este código para empezar, y comenzar a desarrollar la idea a partir de él. Está hecho para Firefox, por lo que luego necesitaría adaptación. Las columnas izquierda y derecha tienen un ancho máximo de 200px, y si no tienen contenido desaparecen, siendo su sitio ocupado por la central:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>taledany</title>

<style type="text/css">
#toppane { height: 30px;
background-color: rgb(0, 51, 51);
}
#leftpane { background-color: rgb(255, 204, 153);
float: left;
max-width: 200px;
}
#contentpane { background-color: rgb(255, 102, 102);
}
#rightpane { background-color: rgb(51, 153, 153);
float: right;
max-width: 200px;
}
#bottompane { background-color: rgb(0, 51, 51);
height: 30px;
clear: both;
}
</style>
</head>
<body>
<div>
<div id="toppane"></div>
<div id="rightpane">Esto aparece si hay contenido en la
columna derecha; si no, debería desaparecer
</div>
<div>
<div id="leftpane">Esto aparece si hay contenido en la
columna izquierda; si no, debería desaparecer
</div>
<div id="contentpane">Aquí está el
resto del contenido. AL parecer, en esta columna siempre
habrá contenido porque no menciona que vaya adesaprecer
nunca.</div>
</div>
<div id="bottompane">
</div>
</div>
</body>
</html>

Creo que es un buen punto de partida (ojo, sólo un punto de partida).

Mikel.

lbenz · #6 (**permalink**) 15/05/2008, 01:04

como dice mikel y para acotar algo, buena aporte....

es solo el comienzo... trabajar con ancho maximo no es facil, y trabajar en divs con %mmmm meno facil todavia, pero no imposible,, anda tirando los codigos por aca y te ayudamos entre todos... ayudarte tambien nos hace aprender a nosotros, investigar y ya sea de paso, compartir conocimientos, para eso existen los foros como este...

tipo un helpfriend..

jaja

saludos

taeldany · #7 (**permalink**) 15/05/2008, 09:48

Gracias a todos y especialmente a mik, voy a probar este código y a adpaterlo a IE
Con respecto al teson, si tengo bastante, si no no sobrevis en esta profesión, pero como tenía la alternativa de las tablas...

y el tiempo es dinero..., puse en la balanza y bue .

Despues les cuento

Mikmoro · #8 (**permalink**) 15/05/2008, 11:10

Cita:

Iniciado por taeldany

Gracias a todos y especialmente a mik, voy a probar este código y a adpaterlo a IE
Con respecto al teson, si tengo bastante, si no no sobrevis en esta profesión, pero como tenía la alternativa de las tablas...

y el tiempo es dinero..., puse en la balanza y bue .

Despues les cuento

Era un sarcasmo para pinchar, no te ofendas.

Mikel.