Foros del Web » Creando para Internet » HTML »

No encuentro la manera de hacerlo..

Estas en el tema de No encuentro la manera de hacerlo.. en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2008, 08:31
 
Fecha de Ingreso: abril-2007
Mensajes: 3
Antigüedad: 10 años, 8 meses
Puntos: 0
No encuentro la manera de hacerlo..

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>
  #2 (permalink)  
Antiguo 14/05/2008, 14:00
 
Fecha de Ingreso: abril-2007
Mensajes: 3
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: No encuentro la manera de hacerlo..

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
  #3 (permalink)  
Antiguo 14/05/2008, 14:34
Avatar de mio_carpe_diem  
Fecha de Ingreso: abril-2003
Ubicación: USA.
Mensajes: 426
Antigüedad: 14 años, 7 meses
Puntos: 6
Re: No encuentro la manera de hacerlo..

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
  #4 (permalink)  
Antiguo 14/05/2008, 14:36
 
Fecha de Ingreso: mayo-2008
Mensajes: 18
Antigüedad: 9 años, 7 meses
Puntos: 0
Re: No encuentro la manera de hacerlo..

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
  #5 (permalink)  
Antiguo 14/05/2008, 17:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: No encuentro la manera de hacerlo..

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&iacute;a desaparecer
</div>
<div>
<div id="leftpane">Esto aparece si hay contenido en la
columna izquierda; si no, deber&iacute;a desaparecer
</div>
<div id="contentpane">Aqu&iacute; est&aacute; el
resto del contenido. AL parecer, en esta columna siempre
habr&aacute; 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.
  #6 (permalink)  
Antiguo 15/05/2008, 02:04
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 9 meses
Puntos: 4
Re: No encuentro la manera de hacerlo..

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
__________________
que fea firma que tenia... prefiero tener esto
  #7 (permalink)  
Antiguo 15/05/2008, 10:48
 
Fecha de Ingreso: abril-2007
Mensajes: 3
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: No encuentro la manera de hacerlo..

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
  #8 (permalink)  
Antiguo 15/05/2008, 12:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: No encuentro la manera de hacerlo..

Cita:
Iniciado por taeldany Ver Mensaje
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.
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 08:29.