La botonera

Los enlaces principales se pueden poner bajo la cabecera. En el glosario XHTML+CSS presentamos un menú desplegable con listas para hacer este cometido. Muchas páginas de Internet hacen uso de esos menús. Cuando la pretensión es que el usuario pueda acceder a cualquier lugar del sitio desde la página de inicio, las listas desplegables pueden volverse muy extensas. Y lo que es más preocupante, tener excesivos subniveles. Particularmente prefiero un sitio donde se realice una integración de todos los enlaces en la "botonera", con pocos vínculos donde "pinchar" y que luego cada enlace nos lleve a una subpágina donde se exponga otra lista de subenlaces. Desde esta perspectiva el menú con lista desplegable no tiene lugar, por lo que he optado por usar simples elementos <a> adornados con algo de estilo cuando uno se sitúa encima de ellos.

Ese "algo de estilo" podría ser más complejo, como el ejemplo que hicimos del menú con pestañas en nuestro glosario XHTML+CSS, presentando como podía hacerse. Pero en definitiva se trata de lo mismo, una lista de enlaces que para este sitio es así:

<div id="total" style="font-size: 1em;">
    CABECERA
    ...
    BOTONERA
    <div id="botonera">
        <div id="botonera-izda">
            &nbsp; <a href="..." title="..."
            class="boton" id="pulsado">...</a>
            &nbsp; <a href="..." title="..."
            class="boton" >...</a>            
            ...
        </div>
        <div id="botonera-dcha">
            ...
        </div>
        <div class="borra-flotaciones"></div>
    </div>
    MIGAS
    ...
    LATERAL IZQUIERDO
    ...
    LATERAL DERECHO
    ...
    CONTENIDO
    ...
    PIE
    ...
</div>

Hemos dispuesto la botonera en dos supartes. Así a la izquierda ponemos los vínculos que nos llevan a documentos de contenido del sitio. En la parte derecha irán utilidades como el ampliador de texto y una caja para el buscador, por ejemplo. El estilo de todo el conjunto es:

div#botonera {
    margin-top: 0.5em; 
    margin-bottom: 0.5em; 
    margin-left: 0.2em; 
    margin-right: 0.2em;
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
    border-color: transparent;
    background-color: rgb(200, 225, 225); 
    font-family: 'Arial Narrow'; 
    height: 1.5em;
    border-top:  rgb(49, 99, 98) solid 0.2em;
    }

div#botonera-izda {
    text-align: left; 
    float: left; 
    border-color: transparent; 
    height: 1em;
    }
    
div#botonera-dcha {
    text-align: right; 
    border-color: transparent;  
    height: 1em;
    }

El elemento <div id="botonera"> no tiene especificado el ancho, como habíamos dicho para la estructura elástica. El resto de dimensiones son relativas en em. Se ha puesto sólo un borde superior para decorarlo y usamos la fuente Arial Narrow pero sin cambiar el tamaño para respetar la estructura elástica.

Para que los bloques <div> de ambos lados de la botonera se sitúen en la misma línea, hemos de flotar a la izquierda uno sobre el otro. Sólo hay que controlar que en el ancho mínimo de la página, especificado con min-width en el elemento <div id="total">, quepan todos los botones para que no se solapen los de la botonera izquierda con la derecha.

Un botón es un elemento <a> que puede estar o no pulsado. Para este efecto dotamos de id="pulsado" al botón de la página donde nos encontremos, y así darle el estilo siguiente:

a.boton {
    padding: 0.1em; 
    background-color: rgb(200, 225, 225); 
    color: rgb(80, 80, 80); 
    text-decoration: none;
    }
    
a.boton:focus, a.boton:hover, a.boton:active  { 
    background-color: rgb(49, 99, 98);
    color: white; 
    text-decoration: underline;
    }
    
a#pulsado {
    font-weight: bold; 
    }

Poco más hay que comentar sobre este estilo para los botones. Quitamos el subrayado a los vínculos pero lo hacemos aparecer cuando nos situamos sobre el botón. Cuando el botón está pulsado lo ponemos en negrita, lo que es un indicativo para que el usuario sepa en que parte del sitio se encuentra, pues lo mantenemos "pulsado" incluso para las subpáginas pertenecientes a ese enlace. Por ejemplo, esta página pertenece al botón "Como se hace" y este aparece en negrita.

Las "migas"

Se trata de un camino de enlaces que permite al usuario ubicarse en la ruta de vínculos. La expresión "migas" hace referencia al cuento, donde vamos dejando un "reguero" de vínculos por los cuáles el usuario puede retroceder.

<div id="total" style="font-size: 1em;">
    CABECERA
    ...
    BOTONERA
    ...
    MIGAS
    <div id="migas">
        <div id="migas-interior">    
            <a href="...">Inicio</a> » 
            <a href="...">...</a> »         
            Nombre de la página actual, sin vínculo
        </div>              
    </div>   
    LATERAL IZQUIERDO
    ...
    LATERAL DERECHO
    ...
    CONTENIDO
    ...
    PIE
    ...
</div>

Para preservar el tamaño de la fuente y así no deformar la estructura elástica de este marco, incluimos en su interior otro bloque "migas-interior" y así con el estilo siguiente le aplicamos un tamaño de fuente más pequeño:

div#migas {
    margin-bottom: 0.5em;
    margin-left: 0.2em; 
    margin-right: 0.2em; 
    padding-left: 0.5em;
    padding-right: 0.5em;   
    color: rgb(80, 80, 80);
    }

div#migas-interior {
    font: 0.8em 'Arial';    
    }