1. Las cabeceras fijas en aplicaciones web y de escritorio
Muchas aplicaciones web presentan una serie de botones, titulares y menús que por diversos motivos han de estar siempre a la vista del usuario, aunque este haga scroll para mostrar contenidos que estén más abajo. Esta parte fija se suele dejar como una cabecera al principio de la página o una barra de enlaces o botones a la izquierda (en algunos casos, como Blogger, también a la derecha, o como Gmail, tanto en la cabecera como a la izquierda). Eso permite moverse por los datos manteniendo los botones para las acciones más habituales al alcance de la vista todo el rato. Como se entenderá mejor con una imagen, os muestro cómo se ve esto en el caso de Gmail:
Imagen 1. Cabeceras y barras de menú laterales fijas en aplicaciones web
Muchas otras aplicaciones tanto web como de escritorio también hacen cosas parecidas. Por ejemplo, en Twitter (al menos en su versión para Android) también ocurre así, aunque en este caso no se trate de una aplicación web, sino de escritorio). Aplicaciones de escritorio como Excel y Calc también permiten dejar fijas unas celdas de la hoja para que estén siempre visibles, arriba y/o a la izquierda.
El caso es que me interesaba hacer algo así para una página web que estoy haciendo y, ya que estoy intentando utilizar el CSS de una manera un poco más sistemática de lo que lo he venido haciendo hasta ahora, quería hacerlo con esta técnica.
2. Planteamiento
En mi caso, quería un diseño de página donde se quedara fija una cabecera siempre visible que tuviera tres partes:
- A la izquierda, espacio para un logo
- En el centro, tres líneas de texto informativo al usuario
- A la derecha, uno o varios iconos con botones y/o enlaces
Vamos, algo parecido a esto:
Imagen 2. Qué queremos conseguir
La solución: secciones (div) en la página
La solución a la que he llegado ha consistido en definir 4 bloques o divisiones (<div>) en la página (pagina1.php):
1) Una división para el rectángulo que contiene a los otros tres elementos
2) Una división para el logotipo
3) Una división para el texto informativo (en este caso, para las 3 líneas)
4) Una división para los botones de acción
Más o menos, algo así:
1 <?php
2 $modname = "PAGINA1";
3 $modversion = "E31";
4 $moddescri = "Descripción de la página 1";
5 $linea1 = "<h1>" . $modname . " - versión " . $modversion . "</h1>";
6 $linea2 = "<h2>" . $moddescri . "</h2>";
7 $linea3 = "<h3>" . date("d/m/Y",time()) . "</h3>";
8 $logo = "img/logo_pagina1.jpg";
9 ?>
10 <div id="rectangulo_fondo">
11 <div id="logo">
12 <img src="<?php echo $logo; ?>" height=100 alt="Logo" title="Logo"/>
13 </div> <!-- fin logo -->
14
15 <div id="textos-cabecera">
16 <?php echo $linea1 . $linea2 . $linea3; ?>
17 </div>
18
19 <div id="opciones-derecha">
20 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
21 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
22 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
23 </div>
24 </div> <!-- fin rectangulo_fondo -->
(Como veréis, he parametrizado en variables la ruta hacia el logo y las tres líneas de información textual a mostrar, pero también podría haber puesto un contenido fijo).
Después de esto, he creado otro bloque con el resto de la información a mostrar, en este caso, 100 líneas de texto sin ningún sentido, pero suficientes para ilustrar lo que quiero hacer:
1 <div id="bloque1">
2
3 <?php
4 for ($i=0; $i<100; $i++) {
5 echo "<h1>Línea de texto número $i</h1>";
6 }
7 ?>
8
9 </div> <!--bloque1-->
Si miramos ahora el aspecto de la página, sin haber creado aún el CSS, veremos algo así:
Imagen 3. La página sin CSS
Aplicando las hojas de estilos (CSS)
Feo, ¿verdad? Pero ahora entra en funcionamiento la magia del CSS. Vamos a indicar el color que queremos para el rectángulo de fondo (aquí he puesto un verde oliva), un borde para la parte inferior del rectángulo, una altura y un ancho:
1 /* el rectángulo de fondo de la cabecera */
2 #rectangulo_fondo {
3 background: #e8e8a0; /* propiedad en modo shorthand, color verde oliva */
4 border-bottom:1px solid #DDD;
5 height: 100px !important;
6 width: 100%;
7 }
La altura de 100 píxeles que he establecido para mi rectángulo la he determinado por prueba y error, comprobando que es espacio suficiente para albergar las tres líneas de texto informativo que he establecido. Esto dependerá del formato que elijáis para vuestro texto, en mi caso he definido estos tres estilos:
1 h1 {
2 font-family: verdana,helvetica;
3 font-size: 18px;
4 font-weight: bold;
5 color: #bb3902;
6 }
7 h2 {
8 font-family: verdana,helvetica;
9 font-size: 15px;
10 font-weight: bold;
11 color: #bb3902;
12 }
13 h3 {
14 font-family: verdana,helvetica;
15 font-size: 12px;
16 color: #000000;
17 }
Si usáis fuentes y/o tamaños diferentes, es posible que tengáis que establecer un poco más o un poco menos de altura a la cabecera.
Por otro lado, el ancho lo he establecido al 100% del ancho de la página, ya que quiero que la cabecera vaya de izquierda a derecha ocupando todo el frontal.
Si visualizáis la página ahora mismo, se verá mal. Las 3 líneas informativas se mezclan con las líneas de datos. Para evitar esto, indicaremos que el logo será flotante y esto hará que la sección que contiene a las líneas informativas ("textos-cabecera") se pegue al logo.
1 #logo {
2 float: left;
3 }
El resultado hasta ahora es este:
Imagen 4. Esos iconos, a la derecha, ¡ARRRR!
Hmmm... vamos mejorando algo, pero nos interesa que los botones de acción se queden a la derecha. Para ello
1 #opciones-derecha {
2 float: right;
3 }
Lo que nos deja un resultado así
Imagen 5. Los iconos de la derecha están que se arrastran. ¿Podríamos subirles el ánimo un poco?
Vaya, casi. Nos falta que queden arriba. Para conseguir esto, tenemos que indicar que el bloque con las 3 líneas de texto sea un bloque "inline", es decir, que se muestre en línea con el contenido que le precede y con el que va detrás. Es decir, ponemos
Y entonces se visualiza así:
1 #textos-cabecera {
2 display: inline-block;
3 }
Imagen 6. Ya está todo en su sitio
Vale, esto casi está. Sin embargo, si hacéis el scroll de la página, comprobaréis que la cabecera, que tan chula nos ha quedado, se nos pierde por arriba.
Imagen 7. ¿A dónde vas, cabecera?
Necesitamos que no se mueva la cabecera y sí lo haga el bloque de líneas de datos.
La clave es indicar que el bloque de cabecera debe quedarse FIJO. Esto se consigue con el atributo
1 position: fixed;
Y ahora, al hacer el scroll, ya se queda la cabecera visible todo el rato
Imagen 8. Cabecera fijada
¿Hemos terminado? Pues no, aún nos quedan unos detalles importantes. Fijaos que al abrir la página, el bloque1, que contiene las líneas de datos, no se ve desde el principio. Las primeras líneas quedan ocultas por la cabecera
Imagen 9. ¿Dónde están las líneas 0, 1 y 2?
Para corregir esto, como sabemos que la cabecera tiene una altura de 100 píxeles, podemos establecer un margen superior para el bloque1 a partir de 110 píxeles.
1 #bloque1 {
2 margin-top: 110px;
3 }
¿Se verá ahora bien?
Imagen 10. Ese hueco encima de la cabecera me hace sentir "vacío"
Pues no. Resulta que la cabecera se ha "arrastrado" hacia abajo. ¿Cómo podemos dejarla fija arriba? Pues estableciendo su propiedad "top" de forma que quede pegada al borde de la pestaña del navegador. O sea,
1 top: 0 !important;
Y ahora se ve así:
Imagen 11. Bien, Pepe, bien. Ahora casi que sí.
Bueno, ahora sí. Y podemos comprobar el scroll y ver que la cabecera se queda fija.
Últimos detalles
Por último, sólo nos quedarían pequeños detalles, como que el borde izquierdo de la cabecera se pegue a la ventana del navegador (ese pequeño margen blanco a la izquierda no me gusta nada), cosa que conseguiremos con un
1 left: 0;
Y que el texto informativo se quede centrado, lo que conseguiremos con
1 text-align: center;
y además, indicando que el texto ocupe un amplio porcentaje del espacio de la cabecera
1 width: 75%;
Si no hiciéramos esto último, el texto se centraría únicamente en el espacio mínimo reservado para él. Para mostrarlo, voy a pintar el fondo de este bloque de otro color
1 background: #a8e8aa;
Y mostraremos cómo queda cuando no especificamos ancho
Imagen 12. Centrado, sí, pero en un espacio lateral
Y cuando sí lo hacemos al 75%
Imagen 13. Centrado en la franja central (el 75% de la cabecera)
Si somos muy estrictos, podemos ver que en realidad podríamos establecer un poco más del 75% como ancho de la zona de texto informativo, pues queda un pequeño espacio hasta el primero de los botones de acción de la derecha. Tampoco he querido esmerarme más ya que dependiendo del número de opciones que tengamos a la derecha, esto puede que haya que ajustarlo a un poco más o un poco menos, así que creo que es mejor hacer los ajustes en cada caso concreto.
Todo junto
Bueno, ya podemos volver a dejar el color del fondo como estaba y dar por terminada la página.
Esta página se puede utilizar como plantilla para aquellas páginas en las que necesitemos dejar una cabecera fija. Yo así lo voy a hacer, así que añadida queda a mi repertorio de plantillas. ¡Pa la saca!
Aquí os dejo el HTML completo y el CSS
El HTML
1 <?php
2 $modname = "PAGINA1"; $modversion = "E31"; $moddescri = "Descripción de la página 1";
3 ?>
4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel="stylesheet" id="style-css" href="pagina1.css">
9 <title><?php echo $modname . " - " . $modversion; ?></title>
10 </head>
11 <body>
12 <!--cabecera frente1-->
13 <?php
14 $linea1 = "<h1>" . $modname . " - versión " . $modversion . "</h1>";
15 $linea2 = "<h2>" . $moddescri . "</h2>";
16 $linea3 = "<h3>" . date("d/m/Y",time()) . "</h3>";
17 $logo = "img/logo_pagina1.jpg";
18 ?>
19 <div id="rectangulo_fondo">
20 <div id="logo">
21 <img src="<?php echo $logo; ?>" height=100 alt="Logo" title="Logo"/>
22 </div> <!-- fin logo -->
23
24 <div id="textos-cabecera">
25 <?php echo $linea1 . $linea2 . $linea3; ?>
26 </div>
27
28 <div id="opciones-derecha">
29 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
30 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
31 <a href="ref1.htm" target=_blank><img src="img/info.png" title="Opción imagen"></a>
32 </div>
33 </div> <!-- fin rectangulo_fondo -->
34
35 <div id="bloque1">
36
37 <?php
38 for ($i=0; $i<100; $i++) {
39 echo "<h1>Línea de texto número $i</h1>";
40 }
41 ?>
42
43 </div> <!--bloque1-->
44 </body>
45 </html>
El CSS
1 h1 {
2 font-family: verdana,helvetica;
3 font-size: 18px;
4 font-weight: bold;
5 color: #bb3902;
6 }
7 h2 {
8 font-family: verdana,helvetica;
9 font-size: 15px;
10 font-weight: bold;
11 color: #bb3902;
12 }
13 h3 {
14 font-family: verdana,helvetica;
15 font-size: 12px;
16 color: #000000;
17 }
18
19 /* el rectángulo de fondo de la cabecera */
20 #rectangulo_fondo {
21 background: #e8e8a0; /* propiedad en modo shorthand, color verde olivoso */
22 border-bottom:1px solid #DDD;
23 height: 100px !important;
24 /* para que permanezca la cabecera al hacer scroll */
25 position: fixed;
26 top: 0 !important;
27 left: 0;
28 width: 100%;
29 }
30
31 #logo {
32 float: left;
33 }
34
35 #textos-cabecera {
36 display: inline-block;
37 text-align: center;
38 background: #a8e8aa;
39 width: 75%;
40 }
41
42 #opciones-derecha {
43 float: right;
44 }
45
46 #bloque1 {
47 margin-top: 110px;
48 }
Pues nada, si os viene bien esta plantilla ya la tenéis explicada en detalle.
Y tú, ¿tienes alguna otra plantilla interesante para hacer cabeceras o barras de opciones laterales que se queden fijas? ¿La compartes con nosotros?
