miércoles, 26 de noviembre de 2008

Modificando las plantillas (Tutorial 5: Columnas) - Vagabundia


Da la casualidad que, mientras iba armando esta entrada, fueron varias las preguntas sobre el mismo tema y es, sin duda, uno de esos temas aparentemente extraños que parecen causar dolores de cabeza. Se trata de tener un diseño con columnas e igualar sus alturas.

Hace un tiempo, la solución era mostrada en La Bloguería así que vamos a a usar sus explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior.

Allí, se mostraba algo así:


Es decir, un blog con tres columnas (sidebar izquierda, posts, sidebar derecha) pero, en realidad, esta soluciòn funcionará con cualquier otro diseño.

¿Cuál es el problema?

Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho (width) pero cuando queremos definir su altura (height) las cosas se complican porque para calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas, unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.


Si utilizamos una plantilla sin fondos ni bordes, es un tema irrelevante pero si los tenemos, el efecto de las columnas desiguales puede molestarnos [VER EJEMPLO]

Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas?

Como dice Vane, hay soluciones varias y para todos los gustos:
  1. crear columnas falsas utilizando imágenes tiene la desventaja de requerir de esas imágenes extras
  2. establecer la propiedad height al 100% no funciona en todos los navegadores
  3. utilizar JavaScript tiene resultados dudosos y claro, no funcioanrá si JavaScript está deshabilitado.
Así que vamos con el cuarto método que me parece más efectivo y para aplicarlo, sólo requerimos agregar unas pocas propiedades CSS.

Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso:

padding-bottom: 32768px;
margin-bottom: -32768px;

Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:
#sidebar-wrapper1 { /* la sidebar izquierda */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
padding-bottom: 32768px;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;

}

#main-wrapper { /* el área de posts */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0 10px;
overflow: hidden;
width: 560px;
margin-bottom: -32768px;
padding-bottom: 32768px;

}

#sidebar-wrapper2 { /* la sidebar derecha */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;

}

#content-wrapper {
overflow: hidden;
}
Lo prudente sería que, primero, coloquemos los márgenes en cero y luego aplicáramos los márgenes gigantes a todas las columnas que tengamos.

Eso es todo, con estos pequeños cambios, no debería haber problemas en igualar la longitud de las columnas [VER EJEMPLO]

REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)
  • Modificando las plantillas (Tutorial 2: Widebars)
  • Modificando las plantillas (Tutorial 3: Sidebars)
  • Modificando las plantillas (Tutorial 4: Flotaciones)



















  • TABLA - FUENTES - FONTS


    SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








    free counters


    Disculpen las Molestias




    TABLA - INFORMÁTICA - UTILIDADES

    jueves, 20 de noviembre de 2008

    Modificando las plantillas (Tutorial 4: Flotaciones) - Vagabundia


    Ya agregamos columnas a la derecha, a la izquierda, dobles, simples, las mezclamos, podemos seguir poniendo todas las que se nos ocurra pero la realidad es que solemos ser menos exquisitos y nos limitamos a una o dos así que simplifiquemos el proyecto, hagamos de cuenta que empezamos con el Modelo original de la Plantilla Mínima y queremos agregar sólo una segunda sidebar.

    Ampliamos el ancho general de outer-wrapper, header-wrapper y footer-wrapper a 980 pixeles y el de main-wrapper a 560 pixeles exactamente igual que en el primer tutorial y ahora disponemos de los 390 pixeles restantes para dividirlos en dos sidebars.

    Por defecto, sólo tenemos una columna en la plantilla así que le agregamos el código de la segunda, copiándolo y pegándolo:
    <div id="sidebar-area">
    <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
    .......
    </b:section>
    </div>
    <div id="sidebar-nueva">
    <b:section class="sidebar" id="sidebarnueva" preferred="yes" />
    </div>
    </div>
    Y el CSS que sólo es una variación de los anteriores:
    #sidebar-area {
    float: right; /* flota a la derecha */
    width: 390px; /* es ancha porque contendrá las dos sidebars */
    }

    #sidebar-wrapper { /* es la original */
    float: right; /* flota a la derecha */
    margin-left: 5px; /* margen izquierdo */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }

    #sidebar-nueva { /* es la nueva */
    float: right; /* flota a la derecha */
    margin-left: 5px; /* margen izquierdo */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }
    Guardamos y ya está, tenemos dos sidebars, una al lado de la otra [VER EJEMPLO]

    Tal como lo hemos agregado, la original (sidebar-wrapper) será la que está más a la derecha del blog; si quisiéramos que fuera la otra, deberíamos invertir el orden del código:
    <div id="sidebar-area">
    <div id="sidebar-nueva">
    <b:section class="sidebar" id="sidebarnueva" preferred="yes" />
    </div>
    <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
    .......
    </b:section>
    </div>
    </div>
    Para invertir la posición y colocar las sidebars a la derecha basta invertir la flotación de main-wrapper y de sidebar-area:


    Y bueno, sí, ya sé, falta una tercera opción, nos gusta complicarnos la vida y queremos poner una a la derecha y otra a la izquierda. Para eso, debemos cambiar el esquema, olvidarnos del contenedor sidebar-area y hacerlas flotar en diferentes direcciones.


    Pero, aquí debemos entender algo, los navegadores van "dibujando" la página web de manera secuencial, es decir, crean los famosos rectángulos en un cierto orden, leyendo de arriba hacia a abajo y la flotación sólo es una propiedad. A ver si puedo mostrarlo, veamos este código:
    <div id="main-wrapper">
    ... el área de posts ...
    </div>

    <div id="sidebar-wrapper">
    ... la sidebar ...
    </div>
    main-wrapper puede flotar a la derecha o a la izquierda, lo mismo puede ocurrir con sidebar-wrapper. Es más, ambas pueden flotar hacia el mismo lado y, en todos los casos, el elemento que contiene los posts se mostrará primero, a la izquierda o a la derecha de la pantalla pero primero, cuando se complete su carga se mostrará la sidebar [VER EJEMPLO]

    Si se invierte el orden, la sidebar se cargará primero pero el resultado final, será el mismo [VER EJEMPLO]
    <div id="sidebar-wrapper">
    ... la sidebar ...
    </div>

    <div id="main-wrapper">
    ... el área de posts ...
    </div>
    Cuando colocamos dos elementos flotantes, uno hacia la derecha (right) y otro hacia la izquierda (left), todo es sencillo de entender pero, cuando hacemos que ambos floten en la misma dirección, se nos queman lo papeles y hay que ponerse a pensar y eso es justo lo que no hacen los navegadores y tampoco deben hacerlo.

    El navegador lee la instrucción que le dice, cree un rectángulo de tal dimensión a la izquierda de la pantalla. Obedientemente, lo hace y luego, se olvida del tema así que sigue con la siguiente instrucción que le dice: cree OTRO rectángulo de cierta dimensión y colóquelo a la izquierda ¿de la pantalla? No, a la izquierda del espacio que le dejó el rectángulo anterior y si no entra, pafffff lo coloca debajo.

    En resumen, si dos elementos flotan a la izquierda, el primero aparecerá a la izquierda pero el segundo se mostrará a la derecha. Si dos elementos flotan a la derecha, el primero aparecerá a la derecha y el segundo a la izquierda ¡Cosa de magia!

    Así que, para poner una sidebar a cada lado de los posts, deberíamos reordenar el código:
    <div id="sidebar-wrapper1">
    <b:section class="sidebar" id="sidebar1" preferred="yes">
    .......
    </b:section>
    </div>

    <div id="main-wrapper">
    <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
    </b:section>
    </div>

    <div id="sidebar-wrapper2">
    <b:section class="sidebar" id="sidebar2" preferred="yes">
    .......
    </b:section>
    </div>
    Y el CSS:
    #sidebar-wrapper1 {
    float: left; /* flota a la izquierda */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }

    #main-wrapper {
    float: left; /* flota a la izquierda */
    margin: 0 10px; /* la separación entre los bloques */
    overflow: hidden;
    width: 560px;
    }

    #sidebar-wrapper2 {
    float: left; /* flota a la derecha */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }
    La separación entre los tres rectángulos lo controlamos con el margen de todos ellos o, como en el ejemplo, con la propiedad margin del rectángulo central, el que contiene los posts [VER EJEMPLO]

    REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)
  • Modificando las plantillas (Tutorial 2: Widebars)
  • Modificando las plantillas (Tutorial 3: Sidebars)



















  • TABLA - FUENTES - FONTS


    SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








    free counters


    Disculpen las Molestias




    TABLA - INFORMÁTICA - UTILIDADES

    Correo Vaishnava