Ediciones ENI Editorial | líder en informática
La estructuración de la página con paneles
Los objetivos
Las primeras páginas web estaban formadas principalmente de texto con algunas ilustraciones. Estas páginas eran lineales y tenían como principal objetivo compartir información. La composición de la página importaba poco.
Después llegó el momento de las primeras composiciones, con ayuda de las tablas. Este uso no adecuado permitía ubicar texto e imágenes en las celdas de la tabla para simular una estructuración con ayuda de una rejilla de composición.
Para terminar, con el CSS 2.1, llegaron las verdaderas funcionalidades de estructuración, usando los paneles posicionales.
Actualmente, la llegada de los módulos Flexbox y Grid permite a los diseñadores entrar en una nueva era de la composición, con funcionalidades muy avanzadas. Vamos a dedicar un capítulo a estas dos nuevas técnicas de paginación muy eficaces.
El posicionamiento de los paneles
1. Las posiciones de los paneles
El posicionamiento de los paneles forma parte integrante de CSS 2.1: https://www.w3.org/TR/CSS2/visuren.html#propdef-position. Actualmente, el W3C trabaja sobre el módulo dedicado a Positioned Layout Module Level 3, que sigue siendo un Working Draft a fecha 19 de mayo de 2020: https://www.w3.org/TR/css-position-3/
Por lo tanto, es un módulo no preparado para la producción, solo se puede usar para las pruebas en local.
La propiedad position del CSS 2.1 acepta varios valores:
-
static es el posicionamiento estándar y por defecto de todos los paneles que se muestran en el flujo normal de la página, en la ventana del navegador.
-
relative permite posicionar un elemento de manera relativa a otro elemento. Este posicionamiento se hace también en el flujo habitual de la página.
-
absolute implica que el elemento implicado ha salido del flujo normal de la página y se muestra encima de este flujo. Su posición se determina respecto al elemento padre, que puede ser la ventana del navegador.
-
fixed da el mismo resultado que el posicionamiento absoluto, con la diferencia de que el elemento permanece fijo en la ventana del navegador cuando el usuario mueve la página.
El posicionamiento de los elementos HTML implicados se hace con las siguientes propiedades:
-
top: posición respecto al lado superior del elemento.
-
right: posición respecto al lado derecho del elemento.
-
bottom: posición respecto al lado inferior del elemento.
-
left: posición respecto al lado izquierdo del elemento.
Puede utilizar valores numéricos positivos o negativos.
2. La posición relativa
La posición relativa se hace tomando como referencia la posición normal del elemento en el flujo. A continuación se muestra un ejemplo de posicionamiento relativo:
<!doctype html>
<html lang="es">
<head>
<meta...El flotamiento de los paneles
1. Rodear una imagen con texto
El objetivo inicial del flotamiento de los paneles era la alineación del texto alrededor de una imagen. Como sucede habitualmente, esta funcionalidad se ha acabado usando para otros fines, como el de la composición de página. Esto sigue siendo posible pero con numerosas limitaciones que es necesario saber evitar.
Es necesario utilizar la propiedad CSS 2.1 float. Acepta estos valores:
-
left: el elemento se ubica a su izquierda en su elemento padre y los elementos siguientes lo rodean a su derecha.
-
right: el elemento se ubica a su derecha en su elemento padre y los elementos siguientes lo rodean a su izquierda.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#hipopotamo img {
float: left;
margin-right: 20px;
}
#tigre img {
float: right;
margin-left: 20px;
...La superposición de los paneles
Hemos visto que con el posicionamiento absoluto los paneles se superponen siguiendo el orden de declaración en el código.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#uno, #dos, #tres {
position: absolute;
border: 1px solid #000;
background-color: #eee;
width: 400px;
}
#uno {
left: 40px;
top: 40px;
}
#dos {
left: 80px;
top: 80px;
}
#tres {
left: 120px; ...La estructuración con las propiedades de visualización tabla
La propiedad display que hemos estudiado anteriormente permite cambiar el modo de visualización de los elementos HTML, que tienen otro tipo de visualización inicial. En este apartado usaremos los valores de visualización dedicados a las tablas para crear una estructura.
Atención, no se trata de crear una estructura con las tablas. Simplemente vamos a utilizar las propiedades de visualización de las tablas para crear una estructura.
Vamos a crear una composición con un encabezado, un cuerpo de página en dos columnas y un pie de página.
A continuación se muestra el código HTML/CSS utilizado:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#tabla {
display: table;
}
#encabezado {
display: table-header-grupo;
}
#pie-de-pagina {
...El desbordamiento de los paneles
En una composición de página, puede suceder que el contenido sea mayor que el contenedor. Por ejemplo, podemos tener un panel con una altura perfectamente fijada que contenga mucho más texto del que este panel puede mostrar. La propiedad overflow permite decidir qué es necesario hacer para la visualización del texto sobrante. A continuación se muestran los valores posibles:
-
hidden: el contenido sobrante se oculta, sin posibilidad de visualizar el texto que se desborda.
-
visible: el contenido sobrante es visible y la visualización ignora las restricciones de altura fija del elemento padre.
-
scroll: se muestra una barra de desplazamiento para visualizar el texto que se desborda.
A continuación se muestra un ejemplo de estas tres posibilidades:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#uno, #dos, #tres {
border: 1px solid #000;
width: 400px;
height: 150px;
margin-bottom: 50px;
...La visibilidad de los paneles
La propiedad visibility permite ocultar un panel con el valor hidden y mostrarlo con el valor visible. Atención, cuando un elemento se oculta con el valor hidden simplemente no se muestra, pero el espacio utilizado para su visualización siempre se conserva en la ventana del navegador. Por el contrario, con la propiedad display: none, no solo no se muestra el elemento, sino que también se retira de la página, sin que su espacio de visualización se conserve. Por lo tanto, es conveniente no confundir la utilización de estas dos propiedades.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#cache {
visibility: hidden;
}
</style>
</head>
<body>
<p>Pellentesque ornare sem lacinia quam venenatis...</p>
<p id="cache">Pellentesque ornare sem lacinia quam...</p>
<p>Pellentesque ornare sem lacinia quam venenatis...</p> ...
