Maquetación sin tablas a dos columnas

Enviado por jordi el Vie, 30/04/2004 - 09:45.
Clasificado en:

Hemos cambiado la maquetación de la web con los objetivos de no usar tablas y aprovechar todo el espacio disponible para las entradas del weblog. De este modo, se aumenta la velocidad de carga de la página, hacemos que se adapte mejor a un mayor número de navegadores y obtenemos un diseño mucho más flexible.

Básicamente, el weblog puede dividirse en dos capas: menu y content. El menu, como es evidente, abarca desde el logo de logicanova hasta los logos de XHTML, CSS y demás. Por su parte, el content incluye todos las entradas y comentarios del weblog. Todo eso en código XHTML quedaría:


<div id="menu"> Contenido del menú </div>
<div id="content"> Contenido de las entradas y comentarios del weblog </div>

Bien, una vez vista la estructura general de la web, sólo queda usar el lenguaje CSS para colocar cada cosa en su sitio. Existen diferentes posibilidaes para distribuir las capas en dos columnas, pero nosotros hemos optado por usar margin-left para el content y así desplazarlo de la izquierda para que no se coloque encima del menú. El código en CSS es el siguiente:


#menu { position:absolute; width:200px; top:30px; left:20px; height:inherit; }
#content { margin-left:220px; min-width:350px; width:auto; }

La idea la hemos sacado de tierra de nómadas, un estupendo weblog sobre desarrollo web basado en tecnologías libres.

Si este diseño nos da problemas, ya lo cambiaremos. De todos modos, agradacemos cualquier comentario sobre incompatibilidades que pudiera haber con este diseño.

Imagen de Jesús

Inicialmente (y que Jordi me corrija si me equivoco), la cosa estaba montada igual, con dos div's para content y menu, pero cada uno tenía asignado un tamaño fijo en píxels. Para que quedasen uno al lado del otro, se activaba la propiedad CSS float, que hace que cada div funcione como si fueran palabras en un editor de textos, es decir, si caben los dos en una "línea" (el ancho de pantalla en este caso) se ponen uno al lado del otro, y si no se pasa el segundo a la siguiente "línea" (debajo). Esto funciona muy bien con tamaños fijos, pero si se les deja a los div's que aprovechen automáticamente el tamaño de pantalla, pues los dos cogen lo máximo que pueden y acaban por no caber uno al lado del otro (personalmente aquí echo en falta un poco más de potencia a la hora de especificar los tamaños en CSS, pero ese es otro tema).

La solución que encontré yo es hacer una tabla con dos celdas, metiendo cada div en una celda y poniendo las restricciones de tamaño en la propia tabla. La cosa funciona, pero queda bastante guarrete y da problemas a la hora de aplicar estilos CSS.

Afortunadamente, Jordi se hizo cargo de la situación e hizo las cosas como toca, es decir, quitando todas las tablas, poniendo fijo el tamaño del menú y dejando el resto de pantalla para el content, asegurándose de que no se solapen ajustando bien los márgenes.

En fin, así es como creo que ha ido la evolución de la página (digo creo porque no soy ningún superexperto en CSS, igual meto la gamba en algo). Ahora mismo la veo ya bastante potable, de modo que no creo que haya que hacer muchos cambios.

PD: ¿Qué ha pasado con el banner del vi? Antes era un enlace a cierta imagen muy interesante y ahora ya no está. Ay, la censura, qué mala es... ;-)

Enviado por Jesús (no verificado) el Vie, 30/04/2004 - 16:15.
Imagen de Jordi

Sobre el banner, debió perderse el enlace cuando estuve cambiando los logos. He estado mirando en la carpeta del b2 pero no encuentro la versión de la web con ese enlace. Cuando puedas, vuelve a ponerlo, a no ser que el Sr Censura venga y lo vuelva a dejar igual :-P
Por cierto, he añadido el logo para acceder al código XML del Weblog.

Enviado por Jordi (no verificado) el Vie, 30/04/2004 - 17:26.
Imagen de MalastiC

La web está bien. He visto que tenéis algún problema con el CSS y no pasa la validación. También echo de mnos algunas imágenes más para hacer más "bonita" la web. SEO muy bien.

Un saludo,

Enviado por MalastiC (no verificado) el Jue, 27/12/2007 - 15:44.

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato