Laterales y contenido

Los laterales y el contenido

Ambos marcos interaccionan en el redimensionamiento elástico de la página. El código HTML para ambos laterales es el siguiente:

<div id="total" style="font-size: 1em;">
    CABECERA
    ...
    BOTONERA
    ...
    MIGAS
    ...  
    LATERAL IZQUIERDO
    <div id="lateral-iN" class="lateral">
        ...
    </div>
    LATERAL DERECHO
    <div id="lateral-dM" class="lateral">
       ...
    </div>
    CONTENIDO
    <div id="contenido" class="contenido-[[iN|dM]|iN-dM]">
        <div id="contenido-interior">
        ... Aquí va el contenido de la página ...
        </div>
    </div>
    <div class="borra-flotaciones"></div>
    PIE
    ...
</div>

Lo primero a tener en cuenta es que los marcos laterales y el contenido tienen identificadores id y clasificación con class. El id de los laterales se relaciona con el class del contenido a efecto de ajustar el ancho del contenido a los anchos de los laterales. Exponemos esto para entenderlo.

Encontramos un bloque <div> para cada lateral, aunque podemos ubicar uno, los dos o ninguno de ellos. Los clasificamos como <div id="lateral-iN"> y <div id="lateral-dM">, donde N,M se refiere a números en em's de sus anchos. Si queremos dos laterales con el mismo ancho de 8em tendríamos <div id="lateral-i8"> y <div id="lateral-d8">. Luego el contenido quedaría en función de los laterales. Así para estos dos iguales lo relacionaríamos con el contenido adecuado pero a través del nombre de la clase <div class="contenido-i8-d8">. Si sólo usamos el lateral izquierdo sería <div class="contenido-i8">. Si un lateral es más grande que el otro, por ejemplo de 12em, pondríamos <div class="contenido-i12-d8">.

En definitiva se trata de poder estructurar cualquier combinación de laterales, de tal forma que con esos identificadores en los laterales relacionados con los nombres de clases en los contenidos podemos dotar del correspondiente estilo, lo que nos ayuda a seleccionar el contenido adecuado para que se ajuste al ancho de los laterales. Para este sitio hemos planteado dos medidas de 8em y 12em obteniendo las siguientes combinaciones posibles de páginas con y sin laterales:

lateral izquierdolateral derecho
--
8em-
-8em
8em8em
12em-
-12em
12em12em
8em12
12em8em

Entonces establecemos todos los estilos posibles según esas combinaciones para el contenido, donde sólo hay que indicar el margen izquierdo, derecho o ambos para separarlo del lateral o laterales según las combinaciones dadas:

div.contenido-i8 {Para lateral izquierdo de 8em
    margin-left: 8.5em; 
    }
div.contenido-d8 {Para lateral derecho de 8em
    margin-right: 8.5em; 
    }
div.contenido-i12 {Para lateral izquierdo de 12em
    margin-left: 12.5em; 
    }
div.contenido-d12 {Para lateral derecho de 12em
    margin-right: 12.5em; 
    }
div.contenido-i8-d8 {Para laterales izquierdo y derecho de 8em
    margin-left: 8.5em; 
    margin-right: 8.5em;
    }
div.contenido-i12-d12 {Para laterales izquierdo y derecho de 12em
    margin-left: 12.5em; 
    margin-right: 12.5em;
    }
div.contenido-i12-d8 {Para lateral izquierdo de 12em y derecho de 8em
    margin-left: 12.5em; 
    margin-right: 8.5em;
    }
div.contenido-i8-d12 {Para lateral izquierdo de 8em y derecho de 12em
    margin-left: 8.5em; 
    margin-right: 12.5em;
    }

El lateral tiene un ancho de 8em o 12 em, pero los marcos no tienen bordes, con lo que dejamos 0.5em más para que no esté excesivamente cerca el contenido del lateral. Si tuviéramos bordes habría que hacer el cálculo exacto para que se ajusten, tal como vimos en el tema sobre las páginas elásticas. El relleno del contenido lo podemos especificar con id="contenido", pues es una propiedad común a todas las clases de contenido, así en lo anterior sólo ponemos lo relacionado con el margen y en lo siguiente cualquier otro estilo que es independiente del ajuste con los laterales:

div#contenido {
    padding: 0.5em; 
    }

Los laterales tienen el siguiente estilo

div#lateral-i8 {Lateral izquierdo de 8em
    width: 8em;
    float: left; 
    margin-left: 0.2em;
    }
div#lateral-d8 {Lateral derecho de 8em
    width: 8em; 
    float: right; 
    margin-right: 0.2em; 
    }
div#lateral-i12 {Lateral izquierdo de 12em
    width: 12em;
    float: left; 
    margin-left: 0.2em;
    }
div#lateral-d12 {Lateral derecho de 12em
    width: 12em; 
    float: right; 
    margin-right: 0.2em; 
    }

Aquí si especificamos el ancho con width: Nem con N de 8 o 12. Flotamos a derecha o izquierda e indicamos los márgenes según el caso. Aquellos estilos de los laterales que no tengan que ver con la estructura elástica y sirvan para cualquier lateral independientemente de su ancho, lo ponemos ahora usando el class="lateral". Se debe recordar que no debemos cambiar el tamaño de la fuente directamente dentro del marco, pues afecta a la estructura elástica de la página. Si necesitamos modificar ese font-size hemos de crear un bloque interior al marco para cambiar ese tamaño ahí. En nuestro caso sólo cambiamos la familia de fuente:

div.lateral {
    font-family: 'Arial Narrow';    
    }     
     

Por último establecemos dentro del marco de contenido otro bloque interior que identificamos como id="contenido-interior":

    ...
<div id="contenido" class="contenido-[[iN|dM]|iN-dM]">
    <div id="contenido-interior">
    ... Aquí va el contenido de la página ...
    </div>
</div>
    ...
    

Así podemos actuar en este bloque para cambiar el tamaño de la fuente si fuese necesario. Aquí sólo lo usamos para justificar texto:

div#contenido-interior{
    text-align: justify; 
    }

El resultado para este sitio lo puede ver directamente en la página de inicio de wextensible.com con 2 laterales de 8 em, o bien en la página artículos con un único lateral grande de 12em a la izquierda. De todas formas siguiendo los ejemplos de los temas anteriores, tenemos otro para una página con 2 laterales de distinto tamaño, lo que hemos denominado como una página flexible, pues nos permite jugar con laterales de diferentes tamaños. Hemos usado el ejemplo con bordes gruesos para ver mejor el efecto de ajuste de todos los marcos. El código HTML, basado en el último ejemplo del tema anterior, es el siguiente:

<div id="total">
    <div id="cabeza">
        TITULO DE LA PÁGINA
    </div>
    <div id="lateral-i6" class="lateral">
        <ul>
            <li><a href="#vinculo1">Vínculo 1</a></li>
            <li><a href="#vinculo2">Vínculo 2</a></li>
            <li><a href="#vinculo3">Vínculo 3</a></li>                        
        </ul>
    </div>
    <div id="lateral-d12" class="lateral">
        <ul>
            <li><a href="#vinculo1">Vínculo 1</a></li>
            <li><a href="#vinculo2">Vínculo 2</a></li>
            <li><a href="#vinculo3">Vínculo 3</a></li>                        
        </ul>
    </div>      
    <div id="contenido" class="contenido-i6-d12">
        ...
        <h3>Contenido de la página</h3>
        ...
    </div>
    <div class="borra-flotacion"></div>
    <div id="pie">
        Este es el pie de página
    </div>
</div>

El estilo CSS es el siguiente, donde puede observar con los colores como se enlazan los diferentes conceptos. En azul relacionamos laterales con contenido para el ajuste de la estructura elástica. Con rojo especificamos el estilo genérico de los laterales que no depende de esa estructura. Con magenta hacemos lo mismo para el contenido.

body {
    font-family: Times New Roman;
    font-size: 1em;
    }
div#total {
    min-width: 40.625em; 
    border: maroon dashed 0.5em;
    }
div#cabeza {
    padding: 0.3125em;
    border: red solid 0.5em;
    }
div#lateral-i6 {
    width: 6em;
    height: 100%;
    padding: 0.3125em;   
    float: left;
    border: blue solid 0.5em;
    }
div#lateral-d12 {
    width: 12em;
    height: 100%;
    padding: 0.3125em;   
    float: right;
    border: blue solid 0.5em;
    }
div.lateral {
    font-family: Arial;
    }                 
div.lateral ul{
    padding-left: 1em; 
    border: green dotted 0.5em;
    }
div.lateral ul li {
    margin-left: 0;
    }
div.contenido-i6-d12 {
    /* Márgen izquierdo: 6em + (2 x 0.3125em) + (2 x 0.5em) = 7.625em */
    margin-left: 7.625em; 
    /* Márgen derecho: 12em + (2 x 0.3125em) + (2 x 0.5em) = 13.625em */
    margin-right: 13.625em;
    padding: 0.3125em;
    border: green solid 0.5em;
    }
div#contenido p {
    text-align: justify;
    }
div#pie {
    padding: 0.3125em;   
    border: red solid 0.5em;
    }
div.borra-flotacion {
    clear: both;
    }

Veáse que para ambos laterales hemos especificado el mismo grosor de borde y relleno, pero como son datos que pueden modificar la estructura los mantenemos ahí. Podría ser incluso que los bordes y rellenos fuesen diferentes para ambos laterales. Quizás height:100% podíamos ponerlo con la clase, pero se puede mantener ahí pues tiene que ver en parte con la estructura.

Los submenús

En Septiembre 2011 he sustituido los submenús con imágenes de este sitio por la nueva propiedad {border-radius} de CSS-3. Ver más información en Submenú para laterales con bordes redondeados.

imagen submenú Había planteado que siempre parece más accesible usar una botonera con pocos enlaces y, en cada página, crear listas de enlaces que desarrollan o amplían los relacionados con esa página. Los laterales son un lugar adecuado para albergar estas listas, pero siempre teniendo en cuenta que restan espacio al contenido. Para este sitio se ha ideado el submenú como un bloque dotado de bordes redondeados donde incluimos una lista de enlaces. Cada lateral puede llevar un número indeterminado de submenús, cuya estructura HTML es la siguiente:

<div id="lateral-i8" class="lateral">
     <div class="submenu">
         <div class="cabeza-submenu">
             <img class="subm" src="cabeza-submenu-verde.jpg" alt="menú lateral" />
             <h4>Título</h4>
         </div>            
         <div class="interior-submenu-verde">
            ... lista de enlaces ...
         </div>
         <div class="pie-submenu">
             <img class="subm" src="pie-submenu-verde.jpg" alt="menú lateral" />                
         </div>                 
     </div> 
     <div class="submenu">
        ... otro submenú ...  
     </div>     
 </div>
    

Se trata de "armar" un falso cuadro con bordes redondos y algo de sombra pero usando dos imágenes, una para la cabecera de 128x26 píxeles:

imagen cabecera submenú

y otra para el pie del submenú de 128x12 píxeles:

imagen cabecera submenú

Estas imágenes fueron creadas usando herramientas básicas de Windows, como el Paint, por lo que con aplicaciones de diseño gráfico podemos obtener resultados mejores que estos.

Estas imágenes no ocupan mucho espacio, menos de 1KB en disco, con objeto de conseguir un compromiso entre la resolución y el tamaño de archivo. Es verdad que si se aplica el zoom a la página, se detecta algo de pérdida. En todo caso no dotamos de medidas width y height a los elementos <img> dentro del submenú, como verá en el siguiente estilo CSS, dándole a las imágenes un width: 100%, con lo que se expanden a la derecha hasta completar todo el bloque, es decir, todo el ancho del submenú, ancho que viene determinado por el del lateral. De esta forma podemos usar imágenes mayores, lo que suponen más resolución para evitar la pérdida por zoom o bien por expansión de ese ancho de lateral. Una parte del estilo CSS es el siguiente:

div.submenu {
    margin-bottom: 0.5em; 
    }
div.cabeza-submenu {
    overflow: hidden;
    position: relative; /* para posicionar <h4> encima de <img> */
    }
div.pie-submenu {
    position: relative; /* para posicionar <h4> encima de <img> */
    }
div.cabeza-submenu img.subm {
    vertical-align: bottom;
    width: 100%; /* para expandir hasta el ancho del submenú */
    }
div.pie-submenu img.subm {
    vertical-align: top;
    width: 100%; /* para expandir hasta el ancho del submenú */
    }
    
div.cabeza-submenu h4 {
    font-family: Arial;
    position: absolute; /* para posicionar <h4> encima de <img> */
    top: 0.45em; 
    left: 0;
    margin: 0;
    line-height: 1em;
    width: 100%; 
    text-align: center; 
    color: white; 
    }

En este estilo vemos que no hay ninguna referencia al color de las imágenes, por lo que es independiente de las mismas. Al elemento <div class="cabeza-submenu"> se le dota de posición relativa (position: relative) con objeto de posicionar el título que va en un elemento <h4> encima de la imagen. En <div class="pie-submenu"> hacemos lo mismo por si necesitáramos incluir texto. Como señalamos antes al elemento <img class="subm"> le damos un ancho del 100% y lo alineamos en la parte de arriba del contenedor. Luego al <h4> lo posicionamos de forma absoluta y fijamos su posición en el lugar adecuado con top y left. También le hacemos que se extienda con width: 100%.

Posicionar el título encima de una imagen podría parecer más complejo que ponerle un fondo al título con el estilo background-image. Sin embargo hay problemas con las dimensiones de la imagen de fondo, pues si la diseñamos en ancho y alto para una determinada resolución, cuando se incremente el ancho del lateral se produce una repetición de la misma. Si desactivamos esa repetición entonces no se ajustará. Por otro lado con laterales más estrechos que la imagen resulta que se recorta inadecuadamente. Con CSS2.1 no es posible hacer el efecto de darle un width: 100% a la imagen de fondo de un elemento dotada con background-image con objeto de que se expanda o reduzca hasta ocupar el contenedor, por lo que finalmente he llegado a la solución dada de posicionar el título encima de un <img>.

Los bordes en los dos laterales del cuadro pueden hacerse directamente con estilo:

div.interior-submenu-verde {
    border-left: rgb(49, 99, 98) solid 0.125em;
    border-right: rgb(49, 99, 98) solid 0.125em; 
    }
div.interior-submenu-azul {
    border-left: rgb(48, 99, 154) solid 0.125em;
    border-right: rgb(48, 99, 154) solid 0.125em; 
    }

Así podemos tener un juego de bordes derechos e izquierdo para cada color de submenú. En este sitio presentamos los colores verde y azul, pero podríamos tener más, de tal forma que sólo habría que añadir estilo para los bordes. Como la página es elástica aplicamos medidas en em (equivalen a 2px / 16px = 0.125em). Los códigos rojo, verde y azul para la función rgb() se extraen directamente de la paleta de colores del programa de dibujo, el Paint de Windows en nuestro caso.

Dentro del submenú podemos poner lo que deseemos, siempre teniendo en cuenta no "desarmar" el lateral. Si incluimos imágenes hemos de estar seguros de que no sobrepasan el ancho, por lo que o bien las hacemos más pequeñas o le aplicamos el recorte de lo que sobresalga con overflow: hidden.


Y esto es todo lo referente a la estructura de una página web que se ha aplicado al presente sitio.