En los capítulos anteriores se han estudiado los principales elementos HTML y las propiedades que determinaban su aspecto.
En los ejercicios desarrollados durante su descripción, estos se mostraban de forma aislada o en combinaciones sencillas cuya ubicación venía determinada por el propio navegador.
Pero, cualquier página, por muy sencilla que sea, está formada por múltiples elementos que se agrupan en secciones según un diseño gráfico más o menos complejo.
Si hasta ahora el encargado de situarlos en pantalla era el navegador, a partir de ahora será usted quien decida la posición ocupada por cada uno de ellos.
Para conseguirlo, tendrá que aprender a utilizar un conjunto específico de propiedades.
La primera de ellas (display) le permitirá especificar de forma explícita el modo de presentación de un elemento HTML, que podrá ser uno de los que el navegador asigna por defecto u otro de caja flexible.
Todos los elementos HTML tienen asociado por defecto uno de los siguientes modos de presentación:
En bloque.
Los elementos ocupan todo el ancho de la pantalla y, por lo tanto, se muestran unos debajo de los otros.
En línea. Los elementos solo ocupan el espacio que necesitan, por lo que se sitúan unos al lado de los otros (mientras haya hueco).
Estos dos modos son los más sencillos y utilizados. Pero, cuando el diseño lo requiera, el modo de caja flexible ofrece formas más variadas y creativas de reparto del espacio de la página.
Además de los modos de presentación anteriores, con la propiedad float también tendrá la posibilidad de hacer que los elementos queden desplazados hacia uno u otro lado de la página (o el contenedor en el que se encuentren) y mantengan su posición, aunque cambie el tamaño de la ventana del navegador.
Esto permite realizar diseños en los que ciertos elementos (los que usted quiera) siempre estén situados a la izquierda o la derecha de la pantalla en una posición determinada, lo que proporciona cierta estructura a la página.
Si en los anteriores modos de distribución se establecían las reglas de reparto general del espacio entre todos los elementos, mediante las propiedades position (en combinación con top, bottom, left y right) será capaz de ubicarlos de forma individual en una posición absoluta o relativa.
Asimismo, podrá decidir si quiere que dichos elementos se muevan con el resto del contenido de la página al hacer scroll o permanezcan inmutables.
Para finalizar este capítulo, se ha incluido una sección de carácter práctico en la que se muestran diversas alternativas de distribución horizontal y vertical del espacio disponible en una página web.
Este mismo ejercicio se hará también dentro de un contenedor, con el fin de demostrar lo sencillo que resulta realizar diseños gráficos más elaborados.
Como se acaba de comentar en la introducción de este capítulo, el navegador asigna a cada etiqueta un modo de presentación por defecto.
En concreto, las descritas en esta obra se distribuyen de la siguiente forma:
Modo bloque.
Los elementos HTML que tienen este modo de presentación por defecto comienzan en una nueva línea y ocupan todo el ancho disponible de la pantalla.
Entre ellos están los encabezados y los párrafos (etiquetas <h1> a <h6> y <p>), las listas (<ul>, <ol> y <li>), algunas de las etiquetas de citas (<blockquote> y <address>) o los contenedores (<div>, <form>, <header>, <nav>, <section>, <article>, <aside>, y <footer>).
Modo línea. A diferencia de los elementos anteriores, estos no requieren comenzar en una nueva línea y solo ocupan el espacio necesario para mostrar su contenido.
Las etiquetas que conoce de este tipo son las de formato de textos (<b>, <strong>, <i>, <ins>, <u>, <del>, <em>, <mark>, <small>, <sub> o <sup>), algunas de citas (<q>, <cite> y <abbr>), los hipervínculos (etiqueta <a>) o las imágenes (etiqueta <img>).
Para cambiar el modo de presentación por defecto de una etiqueta, deberá utilizar la propiedad display, que puede tomar los siguientes valores:
block.
El elemento se muestra en bloque.
inline. El elemento se muestra en línea.
inline-block.
Igual que inline, pero respetando los valores de las propiedades width y height.
flex.
El elemento se distribuye en modo de caja flexible, con mayores posibilidades de ordenación de elementos que los modos anteriores.
none. Hace invisible un elemento HTML, que deja de ocupar espacio en la página.
Si quiere conocer el resto de valores que puede tomar la propiedad display, los encontrará en la página https://developer.mozilla.org/es/docs/Web/CSS/display.
Veamos en detalle la forma en la que se distribuyen los elementos en la ventana del navegador (o en el contenedor donde se encuentren) según cada uno de estos valores.
Todos los elementos HTML de una página web tienen asociado un modo de presentación por defecto, por lo que el valor de su propiedad display será block o inline de forma predeterminada.
El siguiente código HTML expone claramente estos dos modos de presentación:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
Por defecto, el texto de este párrafo y el de abajo se muestran en bloque (uno debajo del otro).
</p>
<p>
En cambio, las siguientes imágenes lo hacen en línea (una al lado de la otra).
</p>
<img src="./Imagenes/fontana-di-trevi.jpg" style="width:25%;" alt="Fontana di Trevi">
<img src="./Imagenes/coliseo.jpg" style="width:25%;"
alt="Coliseo Romano">
</body>
</html>
El cuerpo del documento se compone de dos párrafos y dos imágenes.
Estas últimas se muestran con un tamaño del 25% de la pantalla (propiedad width).
Como cabía esperar, los párrafos se han mostrado uno debajo de otro (en bloque), mientras que las imágenes lo hacen una al lado de la otra (en línea).
Si quiere intercambiar el comportamiento de párrafos e imágenes, sustituye el código del cuerpo del documento HTML anterior por este otro.
<p style="display: inline;">
Este es el texto del primer párrafo.
</p>
<p style="display: inline;">
Este es el del segundo, que ahora se muestra al lado (no debajo).
</p>
<img src="../Imagenes/fontana-di-trevi.jpg"
style="width:25%; display: block;">
<img src="../Imagen
En esta ocasión, tanto los párrafos como las imágenes hacen uso de la propiedad display para que los primeros se muestren en línea (valor inline) y las segundas en bloque (valor block). El resultado es ahora el siguiente:
Como se puede apreciar, los párrafos se escriben uno a continuación del otro con un punto y seguido (en vez de un punto y aparte). En cambio, las imágenes aparecen una debajo de la otra (en vez de al lado).
Sin embargo, cuando se asigna el valor inline se producen dos efectos colaterales que pueden dar resultados inesperados:
Se ignora el valor de las propiedades width y height.
Los márgenes externos no provocan la separación esperada con otros elementos (propiedad margin) a lo alto.
Para comprobarlo, imagine que quiere escribir un texto a varias columnas, como se hace en revistas y periódicos. Una posible alternativa sería utilizar distintos párrafos distribuidos en línea, con un ancho limitado al de la columna.
El código sería algo así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
display: inline;
width: 200px;
}
</style>
</head>
<body>
<p>
Este es el texto correspondiente a la primera columna.
</p>
<p>
Este es el texto correspondiente a la segunda columna.
</p>
<p>
Este es el texto correspondiente a la tercera columna.
</p>
</body>
</html>
El cuerpo de este documento se compone de tres párrafos, en cuya regla de estilo se establece un ancho de 200 píxeles (propiedad width) y un modo de presentación en línea (se asigna el valor inline a la propiedad display), con el fin de que el texto se muestre en columnas de dicho tamaño dispuestas una al lado de la otra.
Sin embargo, el resultado que puede ver a continuación no se parece en nada a lo que se pretendía conseguir:
El motivo es porque el navegador ha ignorado el valor asignado a la propiedad width.
La forma de resolver este problema es sustituir el valor inline de la propiedad display por inline-block.
Esta otra imagen prueba que ahora los párrafos tienen el ancho especificado y, en consecuencia, el texto se reparte en columnas.
En los periódicos, las columnas tienen varios párrafos por columna.
Para conseguir este efecto, cree tantos contenedores <div> como columnas quiera tener y asígneles las propiedades de estilo anteriores.
Luego, incluya dentro de cada uno de ellos los párrafos que quiera que pertenezcan a la misma columna.
Antes de finalizar esta sección debe saber que, independientemente del modo de presentación utilizado, el navegador añade un margen en los lados superior, derecho e izquierdo.
Incluso, los elementos en línea dejan un espacio de separación entre ellos (aunque establezca un margen de 0 píxeles de forma explícita).
Es importante que tenga en cuenta este espacio extra cuando su diseño gráfico contemple que los elementos ocupen el 100% de la ventana del navegador.
Esos pocos píxeles adicionales harán que, por ejemplo, dos imágenes cuya propiedad width tome el valor 50% se muestren una debajo de la otra, en vez de al lado.
El siguiente código HTML permite comprobarlo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="../imagenes/fontana-di-trevi.jpg" style="width:50%;">
<img src="../imagenes/coliseo.jpg" style="width:50%;">
</body>
</html>
A la vista de este código podría pensar que el navegador mostraría dos imágenes que ocupan todo el ancho de la pantalla (cada una de ellas la mitad).
Sin embargo, y de forma inesperada, verá que una aparece debajo de la otra.
Esto contradice el hecho de que las imágenes se muestran por defecto en línea. ¿Qué ha sucedido?
Que el navegador separa por defecto las imágenes 4 píxeles, por lo que la segunda no cabe a lo ancho y se desplaza hacia abajo.
La forma de resolver el problema sería, por ejemplo, asignar a la segunda imagen un ancho menor del 50%.
¿Cuál sería el ancho máximo que podría tener? El 50% menos los 4 píxeles de separación.
Para hacer ese sencillo cálculo, HTML ofrece la función:
Calc(expresión aritmética)
La expresión aritmética puede ser una suma, una resta, una multiplicación o una división (operadores ‘+’, ‘-’, ‘*’ y ‘/’).
Entre los operadores y los operandos debe haber siempre un espacio de separación.
Sustituya la etiqueta de la segunda imagen del código anterior por esta otra:
<img src="../Imagenes/coliseo.jpg" style="width:calc(50% - 4px);">
Refresque la pantalla del navegador y observe que esta vez ambas imágenes se muestran horizontalmente.
Si observa con detalle la imagen, el borde superior del Coliseo está más abajo que el de la Fontana de Trevi.
Eso es porque la imagen es 4 píxeles más pequeña.
Si no le gustara el efecto que produce, quite 2 píxeles de ancho a ambas imágenes, en vez de 4 a una de ellas.
Para finalizar esta sección, se va a analizar el código de un documento HTML en el que se expone un caso frecuente donde los elementos de una lista se distribuyen horizontalmente (por defecto, lo hacen en vertical) para convertirlos en la barra de navegación de una página web.
A continuación, se muestra el resultado que se pretende obtener:
El Código HTML con el que se ha conseguido este efecto es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
text-align:center;
}
ul {
padding: 0px;
}
li {
display:inline;
margin:20px;
padding:10px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Principales buscadores de Internet</h1>
<ul>
<li><a href="https://www.google.es/">Google</a></li>
<li><a href="https://es.yahoo.com/">Yahoo</a></li>
<li><a href="https://www.bing.com/">Bing</a></li>
</ul>
</body>
</html>
El cuerpo del documento se compone de un encabezado <h1> que hace las veces de título de la página y una lista cuyos elementos contienen los hipervínculos que llevan a los principales buscadores de Internet (el valor del atributo href de cada uno ellos son los URL de Google, Yahoo! y Bing).
Como pudo apreciar en la imagen anterior, tanto la barra de navegación (lista de hipervínculos) como el encabezado están centrados.
Para conseguirlo, la primera regla de estilo emplea el selector universal (*), en cuyo bloque de declaraciones se asigna el valor center a la propiedad text-align.
Sin embargo, como la lista tiene por defecto un margen interno, esta no queda completamente centrada, motivo por el que la regla a la que está vinculada se encarga de eliminarlo (asigna el valor 0px a la propiedad padding).
Respecto de las opciones del menú, todas tienen el mismo estilo: un color de fondo amarillo (propiedad background-color), un margen interno de 10 píxeles de grosor que rellena cada opción de dicho color (propiedad padding) y un margen externo que las separa entre sí 20 píxeles (propiedad margin).
Pero, lo más importante desde el punto de vista de este ejercicio, es que los elementos de la lista se muestran horizontalmente al haber asignado el valor inline a la propiedad display.
Los modos de distribución de elementos que se han visto hasta ahora sitúan los elementos debajo o al lado de los que hay en la página, en función de su comportamiento natural o porque así se había indicado al asignar los valores block o inline a la propiedad display.
Sin embargo, las páginas actuales exigen diseños más complejos y elaborados que requieren mayores posibilidades de organización de elementos.
A tal fin, HTML ofrece el modo de caja flexible, que se establece al asignar el valor flex a la propiedad display del contenedor que hace de caja, en el que se van a colocar los elementos.
Una vez hecho esto, tendrá la posibilidad de utilizar las siguientes propiedades:
flex-direction.
Fija la dirección (horizontal o vertical) en la que se quieren distribuir los elementos.
flex-wrap.
Si el ancho de un contenedor es inferior al de la suma de los elementos que incluye, permite que estos se sitúen en filas por debajo.
flex-flow. Equivale a las dos anteriores.
justify-content. Establece la forma de colocar horizontalmente los elementos cuando hay más espacio del que pueden ocupar.
align-items. Establece la forma de colocar verticalmente los elementos a lo alto de cada fila, cuando hay más espacio del que pueden ocupar.
align-content. También ordena los elementos verticalmente, pero a diferencia del anterior, no lo hace por filas, sino teniendo en cuenta el alto del contenedor.
De esta forma, se consigue que todos los elementos se ordenen como si fueran un solo bloque.
Insistir en el hecho de que estas propiedades solo tienen efecto en elementos flexibles, es decir, aquellos que están dentro de un contenedor cuya propiedad display tiene el valor flex.
A continuación, se describirá en detalle cada una de estas propiedades, empezando por la primera (flex-direction), que puede tomar los valores:
row.
Los elementos se distribuyen horizontalmente. Es el valor por defecto.
row-reverse. Igual que el anterior, pero en orden inverso.
column.
Los elementos se distribuyen verticalmente.
column-reverse. Igual que el anterior, pero en orden inverso.
El siguiente código representa un ejemplo de uso de esta propiedad:
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor {
display: flex;
flex-direction: row;
background-color: blue;
width: fit-content;
}
.contenido {
background-color: white;
width: 50px;
margin: 10px;
text-align: center;
font-size: 25px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="contenido">1</div>
<div class="contenido">2</div>
<div class="contenido">3</div>
<div class="contenido">4</div>
</div>
</body>
</html>
Tal como puede apreciar, el cuerpo del documento HTML está formado por un contenedor <div> dentro del que hay otros cuatro, en cada uno de los cuales hay un número que los identifica.
Para crear las reglas de estilo, se han creado dos clases (“contenedor” y “contenido”).
La primera se vincula al contenedor superior y la otra a todos los que incluye.
En el bloque de declaraciones de la regla asociada a la clase “contenedor”, es decir, la que afecta al contenedor superior, lo primero que se hace es asignar el valor flex a la propiedad display para convertir los contenedores interiores en elementos flexibles.
Además, como se quiere que estos se distribuyan de forma horizontal, también se asigna el valor row a la propiedad flex-direction.
Las dos últimas propiedades (width y background-color) se utilizan para ajustar su ancho al de los elementos contenidos (no el de la pantalla) y pintar de azul el espacio ocupado por este.
El estilo de la clase “contenido” afecta a los contenedores incluidos en el superior.
Tendrán un color de fondo blanco y un ancho de 50 píxeles (background-color y width).
El alto vendrá dado por el de la línea en la que se escribe el número (line-height), que es de 50 píxeles.
El tamaño de la fuente del texto será la mitad, es decir, de 25 píxeles (font-size) y estará centrado horizontalmente (el valor de text-align es center).
Por último, los contenedores interiores se separan entre sí y del superior mediante un margen de 10 píxeles (margin).
Al ser mayor el alto de la línea que el de la fuente, el texto queda centrado verticalmente.
A continuación, se muestra el resultado que se obtendría, tanto para este código (los contenedores se distribuyen horizontalmente), como para otro en el que se hubiera asignado el valor column a la propiedad flex-direction (lo hacen verticalmente):
Esta otra imagen corresponde al mismo código, solo que en esta ocasión se asigna los valores row-reverse y column-reverse a la propiedad flex-direction.
Observe que ahora los números de los contenedores aparecen en sentido contrario.
El código inicial del ejercicio anterior establecía una distribución horizontal de los contenedores interiores (la propiedad flex-direction tomaba el valor row).
Se trataba de una situación ideal en la que todos ellos cabían dentro del principal, ya que se había especificado que su ancho coincidiera con el de los interiores.
Sin embargo, puede haber dispositivos en los que este sea muy limitado (por ejemplo, el de un teléfono móvil en posición vertical).
En ese caso, ¿qué sucedería? Para descubrirlo, asigne al contenedor principal un ancho de, por ejemplo, 200 píxeles.
Por lo tanto, modifique la declaración de la regla de estilo asociada a la clase “contenedor” en la que participa la propiedad width de la siguiente forma:
width: 200px;
En la imagen mostrada a continuación se puede ver el resultado obtenido tras realizar este cambio:
Se aprecia claramente que los contenedores interiores son más estrechos.
Eso es debido a que la regla de estilo que les afecta solo establece un margen exterior (propiedad margin), no interior.
Por ese motivo, al reducir el tamaño del contenedor principal, el navegador ha disminuido el margen interior para encajarlos en el ancho disponible, respetando el margen exterior (recuerde que era de 10 píxeles).
Entonces, ¿qué sucedería si se redujera aún más el ancho del contenedor principal?
Para averiguarlo, limítelo a tan solo 100 píxeles. Esta otra imagen muestra lo que sucede:
En tales circunstancias, el margen interno se reduce al mínimo (el ancho de los contenedores interiores es el del propio número).
A pesar de esta medida tan drástica, siguen sin caber dentro del principal (el margen externo se respeta ya que se ha establecido explícitamente) por lo que se produce un desbordamiento por la derecha.
Si no quiere que se produzca este efecto indeseado, tendrá que añadir otra declaración a la regla de estilo del contenedor principal en la que se asigne el valor wrap a la propiedad flex-wrap.
De esta forma, cuando los contenedores interiores no quepan a lo ancho, se irán situando en filas por debajo.
Siempre que realice un diseño, asegúrese de que los elementos permanezcan dentro de los contenedores destinados a cada uno de ellos.
De lo contrario, el aspecto de la página podría no coincidir con el esperado.
Para comprobarlo, añada esta propiedad a la regla de estilo de la clase “contenedor”, la cual quedaría así:
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: blue;
width: 100px;
}
A continuación se muestra el efecto producido por esta última propiedad, tanto para un ancho del contenedor principal de 100 píxeles (corresponde al código anterior), como de 200 píxeles:
Cuando el contenedor principal tiene un ancho de 100 píxeles los interiores se distribuyen en cuatro filas, mientras que en el de 200 píxeles caben dos por fila.
Puesto que habitualmente las propiedades flex-direction y flex-wrap se utilizan de forma conjunta, estas se pueden sustituir por una sola, flex-flow, cuyo valor toma los valores de ambas (separadas por un espacio):
flex-flow: valor_flex_direction valor_flex_wrap
Así, por ejemplo, estas dos declaraciones del código anterior:
flex-direction: row; flex-wrap: wrap;
se podrían sustituir por una sola:
flex-flow: row wrap;
Una vez distribuidos los elementos en filas, bien porque el ancho del contenedor era suficiente para darles cabida, o después de haber actuado la propiedad flex-wrap, será necesario determinar la estrategia de distribución en cada una de ellas.
A tal fin se utiliza la propiedad justify-content, que puede tomar los siguientes valores:
center. Los elementos se centran horizontalmente.
flex-start.
Los elementos se sitúan de izquierda a derecha.
flex-end. Los elementos se sitúan de derecha a izquierda.
space-between.
El espacio disponible horizontalmente se distribuye de forma uniforme entre los elementos.
space-around.
El espacio disponible horizontalmente no solo se distribuye entre los elementos, sino también entre estos y los límites del contenedor.
space-evenly. Igual que el anterior, pero el espacio de separación en los extremos es el mismo que entre los elementos (no la mitad).
Modifique la regla de estilo asociada a la clase “contenedor” de documento HTML utilizado de ejemplo para que ahora sea:
.contenedor {
display: flex;
flex-direction: row;
justify-content: center;
background-color: gray;
}
Como puede observar por el valor de la propiedad justify-content, ahora los contenedores interiores quedarán centrados.
En este caso concreto lo harán en la pantalla, porque al haber eliminado la propiedad width del bloque de declaraciones de esta regla, el contenedor principal ocupa todo el ancho de la ventana del navegador.
El resultado lo puede ver a continuación:
Estas otras dos imágenes muestran el efecto de cambiar el valor de la propiedad justify-content por flex-start y flex-end (en vez de center).
En cambio, en estas últimas imágenes se aprecia el resultado de asignar el valor space-between, space-around y space-evenly a la propiedad justify-content de la regla de estilo anterior.
En la superior, el espacio horizontal sobrante se reparte solo entre los contenedores interiores, mientras que en la del centro también se tienen en cuenta los extremos (aunque la mitad).
Finalmente, en la imagen inferior el espacio se reparte de forma completamente homogénea.
Si con la propiedad justify-content se establecía la estrategia de distribución horizontal de los elementos, con align-items y align-content lo podrá hacer en sentido vertical a lo alto de cada fila o del contenedor, respectivamente.
Empecemos analizando los efectos de la primera propiedad, align-items, la cual puede tomar los siguientes valores:
stretch.
Los elementos se estiran para ocupar todo el alto de cada fila. Es el valor por defecto.
center.
Los elementos se centran a lo alto de cada fila.
flex-start.
Los elementos se sitúan de arriba hacia abajo a lo alto de cada fila.
flex-end.
Los elementos se sitúan de abajo hacia arriba a lo alto de cada fila.
baseline.
Los elementos se alinean por su línea base.
Modifique de nuevo la regla de estilo asociada a la clase “contenedor” de forma que ahora sea:
.contenedor {
display: flex;
flex-direction: row;
align-items: center;
background-color: gray;
}
Como puede observar, además de la propiedad flex-direction, cuyo valor distribuye los elementos del contenedor de forma horizontal (se podía haber hecho para centrarlos verticalmente), también se utiliza la propiedad align-items para centrarlos verticalmente (su valor es center).
A continuación, se presenta el resultado obtenido:
Se aprecia claramente que la fila de elementos queda centrada verticalmente en la ventana del navegador (incluso aunque modifique su altura).
En estas otras imágenes se puede advertir el cambio de aspecto de la página tras modificar el valor de esta última propiedad por flex-start y flex-end.
El código utilizado de ejemplo solo muestra una fila, pero si hubiera varias, la alineación al centro, arriba o abajo se haría tomando como referencia el alto de cada fila.
Por ejemplo, en caso de haber dos filas, los elementos de la primera se distribuirían al centro, arriba o debajo de la mitad superior del contenedor, mientras que los de la segunda lo harían en la mitad inferior.
Para comprobarlo, modifique una vez más la regla de estilo del contenedor principal con objeto de que los contenedores interiores se repartan en dos filas:
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
background-color: blue;
width: 200px;
height: 300px;
}
Lo que se ha hecho es añadir la propiedad flex-wrap para que los elementos que no quepan en una fila se desplacen a otras inferiores.
Eso es precisamente lo que ha pasado al limitar el ancho del contenedor principal a 200 píxeles (propiedad width), que ha provocado que ahora los cuatro contenedores interiores se repartan en dos filas.
La propiedad height solo se incluye para hacer más patente el efecto de centrado por filas.
El resultado obtenido tras efectuar estos cambios es el siguiente:
Queda patente que los contenedores interiores se centran verticalmente por fila.
Si en vez del valor center, la propiedad align-items tomara los valores flex-start y flex-end, el efecto sería el mostrado en esta otra imagen, donde la alineación de los contenedores (tanto en la parte superior como en la inferior) también se realiza por filas:
Si lo que quiere es alinear verticalmente todos los elementos en bloque a lo alto del contenedor, independientemente del número de filas que haya, deberá usar la propiedad align-content.
Esta toma los siguientes valores:
stretch. Los elementos se estiran para ocupar todo el alto del contenedor.
Es el valor por defecto.
center. Los elementos se centran verticalmente a lo alto del contenedor.
flex-start.
Los elementos se sitúan desde la parte superior del contenedor hacia abajo.
flex-end.
Los elementos se sitúan desde la parte inferior del contenedor hacia arriba.
space-between.
El espacio disponible verticalmente se distribuye de forma uniforme entre los elementos.
space-around.
El espacio disponible verticalmente no solo se distribuye entre los elementos, sino también entre estos y los límites del contenedor.
space-evenly. Igual que el anterior, pero el espacio de separación en los extremos superior e inferior es el mismo que entre los elementos (no la mitad).
Tanto en esta propiedad, como las anteriores relacionadas con los elementos flexibles, también pueden tomar el valor inherit o initial.
Para demostrar la forma en la que se comporta esta propiedad, sustituya la propiedad align-items por align-content en la regla de estilo anterior (aquella que afectaba al contenedor principal).
El valor de ambas propiedades es el mismo, por lo que quedará así:
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
background-color: blue;
width: 200px;
height: 300px;
}
En la imagen inferior se compara el resultado anterior (izquierda) con el nuevo (derecha) después de sustituir la propiedad align-items por align-content.
Se aprecia claramente que, en este último caso, los contenedores internos se centran en bloque respecto del contenedor principal (no por filas).
En esta otra imagen se contrastan los efectos obtenidos al asignar el valor flex-start a la propiedad align-items (izquierda) con los de la propiedad align-content (derecha).
En la parte izquierda (propiedad align-items) se puede observar que los contenedores interiores 1 y 2 se alinean en la parte superior de la primera fila, mientras que el 3 y el 4 lo hacen en la parte superior de la segunda fila.
En cambio, a la derecha (propiedad align-content) los cuatro elementos se agrupan en la parte superior del contenedor principal.
Por último, esta nueva imagen confronta el resultado obtenido cuando se asignó el valor flex-start a la propiedad align-items (izquierda) con el de la propiedad align-content (derecha).
Ahora, en la parte izquierda (propiedad align-items) se muestra cómo los contenedores interiores se alinean en la parte inferior de la fila donde se encuentran, mientras a la derecha (propiedad align-content) lo hacen en bloque en la parte inferior del contenedor principal.
Antes de finalizar esta sección se analizará el siguiente código, que se puede utilizar como plantilla para centrar cualquier elemento (en este caso, un contenedor de 100 píxeles de lado) dentro otro superior o en la propia página:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
div {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="contenido"></div>
</body>
</html>
Como puede observar, el cuerpo del documento está formado únicamente por un contenedor <div>, cuyo aspecto es el de un cuadrado azul de 100 píxeles de lado, tal como se define en la regla de estilo de esta etiqueta.
El cuerpo del documento (la etiqueta <body>) representa el contenedor superior donde se encuentra, por lo que la regla de estilo de esta etiqueta será la responsable de centrarlo horizontal y verticalmente en la página.
En ella, lo primero que se hace es establecer un modo de caja flexible (se asigna el valor flex a la propiedad display).
Hecho esto, las propiedades justify-content y align-items lo centra en ambas direcciones (se asigna a las dos el valor center).
Sin embargo, para que la alineación vertical tenga realmente efecto, es imprescindible asignar un valor del 100% a la propiedad height de las etiquetas <html> y <body>.
Por ese motivo, en la regla de estilo anterior había una última declaración que especificaba que el alto del contenedor <body> fuera del 100%.
Esa misma declaración aparece también en la regla que afecta al contenedor superior de la página (<html>), que es la última que faltaba por describir.
Una vez cargada esta página en Chrome, la siguiente imagen demuestra que el cuadrado azul permanece en el centro de la pantalla, aunque se redimensione la ventana del navegador.
Si en la sección anterior aprendió a cambiar el modo de presentación que tiene por defecto cada elemento y a distribuirlos en modo de caja flexible, en esta conocerá la forma de hacer que floten hacia el extremo derecho o izquierdo del contenedor en el que se encuentren (o el de la ventana del navegador, si no estuvieran dentro de ninguno).
Para ello, deberá hacer uso de la propiedad float, que convierte cualquier elemento en flotante, cuyo valor determinará el lado del contenedor al que deberá dirigirse.
Cuando hay elementos flotantes, los siguientes se sitúan al lado (siempre que exista espacio suficiente), incluso aunque su modo de presentación sea en bloque.
Si quisiera ubicarlos debajo, deberá hacer uso de la propiedad clear, objeto de estudio de una sección posterior.
Tal como se acaba de indicar, para que un elemento flote a los lados del contenedor en el que se encuentra, deberá hacer uso de la propiedad float, cuyos principales valores son:
none.
El elemento no flota. Es el valor por defecto.
right.
El elemento se coloca en la parte derecha del contenedor donde se encuentra (o de la página, si no estuviera dentro de ninguno).
Si se añadieran nuevos elementos, se irían situando a su izquierda.
left. El elemento se ubica a la izquierda.
Si se añadieran nuevos elementos, se irían situando a su derecha.
Como viene siendo habitual en muchas otras propiedades, esta también puede tomar los valores initial e inherit.
Para demostrar cómo afecta esta propiedad al flujo de distribución de elementos de una página, el siguiente código de ejemplo muestra cuatro columnas de texto situadas por parejas a ambos lados de la ventana del navegador:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
margin: 20px;
width: 150px;
}
.derecha {
float:right;
}
.izquierda {
float:left;
}
</style>
</head>
<body>
<p class="derecha">
Este texto se coloca el primero empezando por la derecha.
</p>
<p class="derecha">
Este texto se sitúa también a la derecha, después del anterior.
</p>
<p class="izquierda">
Este texto se coloca el primero empezando por la izquierda.
</p>
<p class="izquierda">
Este texto se sitúa también a la izquierda, después del anterior.
</p>
</body>
</html>
El cuerpo del documento está formado por cuatro párrafos vinculados a dos clases: “derecha” e “izquierda”.
En las reglas de estilo asociadas se asigna el valor right o left a la propiedad float para hacerlos flotar uno al lado del otro.
Sin dichas reglas, el texto de los párrafos se mostraría en bloque (uno debajo del otro).
La otra regla de estilo afecta a todos los párrafos y se encarga de limitar el ancho a 150 píxeles (propiedad width) con el fin de que tomen la apariencia de columnas.
Además, crea un margen de separación entre ellos de 20 píxeles (propiedad margin).
En la imagen mostrada a continuación se puede ver el resultado obtenido:
Como puede observar, los elementos se sitúan a la derecha o a la izquierda según la clase a la que pertenezcan.
El orden en el que aparecen en el documento HTML es importante, ya que los que están después respetan el espacio ocupado por los anteriores en el mismo lado.
Pruebe a cambiar dicho orden para ver el efecto producido.
Si no hubiera espacio suficiente para mostrar todos los elementos al mismo nivel, estos se irían desplazando hacia abajo.
Si quiere comprobar el orden en el que van bajando y la posición que van ocupando, reduzca progresivamente el tamaño de la ventana del navegador.
Como puede apreciar en la siguiente imagen, el primer elemento que se mueve hacia abajo es el último añadido al documento HTML.
Si siguiera reduciendo el tamaño de la ventana, el siguiente elemento en bajar sería el anterior en el documento HTML, que ocuparía la posición más a la izquierda del nivel inferior, desplazando el elemento que había allí.
El motivo es porque en este segundo nivel se mantiene el flujo de distribución del nivel superior.
Si redujera aún más el ancho de la página, bajarían los párrafos de la parte derecha siguiendo las mismas reglas.
Los elementos flotantes tienen muchas utilidades. Por ejemplo, se usan con frecuencia para situar el contenido de la etiqueta <aside> a uno de los lados de la página.
También se emplean para añadir notas al margen, como se muestra a continuación:
El código de la página anterior es el siguiente.
<!DOCTYPE html>
<html>
<head>
<style>
#nota {
width: 30%;
padding: 10px;
margin: 10px;
font-style: italic;
background-color: lightgray;
float: right;
}
</style>
</head>
<body>
<h1>El Quijote de la Mancha</h1>
<h2>Capítulo primero</h2>
<p id="nota">
Esta obra es considerada una de las mejores de la
literatura universal.
Tanto es así, que la cantidad
de ediciones y traducciones solo es superada por la Biblia.
</p>
<p>
En un lugar de La Mancha,
de cuyo nombre no quiero acordarme...
</p>
<p>
Es, pues, de saber que este sobredicho hidalgo, los ratos que
estaba ocioso...
</p>
<p>
Con estas razones perdía el pobre caballero el juicio, y
desvelábase por
entenderlas y desentrañarles el sentido...
</p>
</body>
</html>
El texto de los párrafos se ha cortado intencionadamente.
Como puede apreciar, el cuerpo del documento tiene un encabezado <h1> con el título de la obra y otro <h2> para el primer capítulo.
Luego hay cuatro párrafos, el primero de los cuales es la nota al margen y el resto son el inicio de los tres primeros párrafos del Quijote.
Como la nota al margen se muestra de forma diferente, tiene asociado un identificador (atributo id), que es el utilizado como selector en la regla de estilo encargada de darle el formato deseado.
En concreto, dicha regla reduce el ancho de la nota al 30% del de la página (propiedad width) y crea unos márgenes internos y externos de separación de 10 píxeles (propiedades margin y padding).
Además, le asigna un color de fondo gris claro (propiedad background-color) y un tipo de fuente itálica (propiedad font-style) para destacarla del resto del texto de la página.
Por último, el valor de la propiedad float la sitúa en el lado derecho, por lo que los tres párrafos siguientes ocuparán el espacio que haya dejado libre a su izquierda.
Los elementos flotantes pueden ser de cualquier tipo (no solo texto).
Es más, lo habitual es que se combinen con imágenes en composiciones como la mostrada a continuación:
Para situar la imagen a la derecha del texto se ha utilizado el siguiente código.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="../imagenes/fontana-di-trevi.jpg" width="50%" style="float:right">
<h1>La Fontana de Trevi</h1>
<p>
Esta impresionante obra de Bernini
es una de las mayores fuentes monumentales de Roma.
</p>
</body>
</html>
El cuerpo del documento se compone de una imagen, un encabezado <h1> que hace de título y un párrafo con una breve descripción de la Fontana de Trevi.
La imagen, que ocupa la mitad del ancho del navegador (el valor del atributo width es del 50%) se sitúa al lado derecho de la página, ya que tiene asociada un estilo en línea en el que la propiedad float toma el valor right.
Todo lo que se añada a continuación (en este caso, el encabezado y el párrafo) ocupará el espacio que haya dejado libre a su izquierda.
Aunque el uso habitual de los elementos flotantes es el que acaba de ver, también permiten crear efectos interesantes como el mostrado a continuación, que puede encontrar en muchas obras literarias:
Para conseguirlo, se ha utilizado el siguiente Código Html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
span {
float: left;
margin-right: 3px;
font-size: 500%;
font-family: "Times New Roman", Garamond, sans-serif;
line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>E</span>n un lugar de La Mancha,
de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo ...
</p>
</body>
</html>
Como puede apreciar, el cuerpo del documento está formado únicamente por un párrafo, cuyo texto corresponde al primer capítulo del Quijote.
Para que la primera letra del párrafo se muestre de forma diferente al resto, se ha utilizado la etiqueta <span>, cuya apariencia se especifica en la única regla de estilo.
En su bloque de declaraciones, lo primero que se hace es convertirla en un elemento flotante que se mueva hacia la izquierda de la página (la propiedad float toma el valor left).
De esta forma, el resto del texto se acoplará en el espacio que haya dejado libre a su derecha.
La fuente de dicha letra es del tipo Times New Roman (propiedad font-family) y tiene un tamaño cinco veces superior a la definida por defecto (propiedad font-size).
Para que su borde superior coincida con el del resto del texto, del que se separa 3 píxeles (propiedad margin), se ha establecido una altura de línea de un 80% (propiedad line-height).
Al modificar el valor de esta característica se consigue el efecto de subirla o bajarla dentro del párrafo.
Una vez dispuestos los elementos a izquierda o derecha mediante la propiedad float, podría llegar a pensar que, cualquier otro elemento cuyo modo de presentación fuera en bloque, se ubicaría debajo de los anteriores.
Sin embargo, eso no es así, ya que trataría de ocupar el espacio libre que hay al lado de los elementos flotantes (a no ser que no entrara en dicho espacio).
Si quiere evitar esta situación, deberá usar la propiedad clear.
Por lo tanto, la propiedad clear se emplea para situar un elemento debajo de otros que floten.
Pero, con frecuencia, dichos elementos suelen tener alturas diferentes. En ese caso, ¿debajo de quién se colocaría?
El valor asignado a esta propiedad es el que lo determinaría, en concreto:
none.
El elemento ocupa el espacio libre que hay al mismo nivel de los flotantes (a no ser que no quepa, en cuyo caso, se mostraría debajo).
Es el valor por defecto.
left. El elemento se sitúa debajo del que llega más abajo entre los que flotan a la izquierda.
right. El elemento se sitúa debajo del que llega más abajo entre los que flotan a la derecha.
both.
El elemento se sitúa debajo del que llega más abajo (independientemente de si flota a la derecha o a la izquierda).
Esta propiedad también puede tomar el valor inherit (no así initial).
Para entender estas opciones, se va a desarrollar un código de ejemplo similar al utilizado en la sección anterior, en el que se mostraban cuatro columnas de texto flotando por parejas a izquierda y derecha de la de la página.
En aquella ocasión todas estaban al mismo nivel. Ahora se distribuirán en dos niveles, tal como se muestra a continuación.
El código utilizado para obtener este resultado ha sido el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style=" width:200px;float: right;">
Este texto se coloca a la derecha.
</p>
<p style=" width:200px;float: left;">
Este texto se coloca a la izquierda.
</p>
<p style=" width:200px;clear:both;float: right;">
Este texto se sitúa también a la derecha, pero por debajo.
</p>
<p style=" width:200px;float: left;">
Este texto se sitúa también a la izquierda, pero por debajo.
</p>
</body>
</html>
En este caso, el cuerpo del documento está formado por cuatro párrafos cuyo estilo se define con el atributo style (no mediante reglas de estilo).
Todos los párrafos hacen uso de la propiedad width a fin de mostrar el texto en columnas de 200 píxeles de ancho.
El primer párrafo se coloca a la derecha y el segundo a la izquierda (la propiedad float toma el valor right y left, respectivamente).
Para que el tercer párrafo se sitúe a la derecha, pero debajo del primero, además de la propiedad float se utiliza también clear.
Al asignarle el valor both quedará por debajo del párrafo superior con más texto.
Pero, lo que le habrá llamado la atención es que el situado en la parte inferior izquierda no hace uso de dicha propiedad.
El motivo es porque el anterior ya rompió el flujo de distribución de elementos del primer nivel, creando el segundo.
Si volviera a utilizar la propiedad clear, crearía un tercer nivel.
Con el fin de afianzar el conocimiento sobre los efectos de la propiedad clear, se realizarán una serie de modificaciones a este nuevo código de ejemplo, en el que inicialmente se emplea la propiedad float para combinar texto e imágenes en un mismo nivel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="../imagenes/fontana-di-trevi.JPG"
style="width:250px; float: right;">
<img src="../imagenes/coliseo.JPG"
style="width:250px;float: left;">
<p style="float: right;width: 150px;margin: 20px;">
Este texto se sitúa
al lado de la Fontana de Trevi.
</p>
<p style="float: left;width: 150px;margin: 20px;">
Este texto se sitúa al lado del Coliseo.
</p>
</body>
</html>
En esta ocasión, se muestran dos imágenes: la Fontana de Trevi a la derecha y el Coliseo a la izquierda (el valor de la propiedad float de dichas imágenes es right y left, respectivamente).
Además, observe que la Fontana de Trevi se muestra con un ancho de 250 píxeles, mientras que el Coliseo lo hace con tan solo 200 píxeles (propiedad width).
Más adelante entenderá por qué se ha hecho así.
Además de las imágenes, en la página se muestran dos párrafos de 150 píxeles de ancho (propiedad width), los cuales quedan separados de las imágenes por un espacio de 20 píxeles (propiedad margin).
Para que cada uno quede “pegado” a la imagen que le corresponde, ambos párrafos también hacen uso de la propiedad float.
El aspecto de esta página es el siguiente:
Ahora, añada este párrafo a continuación de los otros dos:
<p>Seguramente crea que este texto se sitúa debajo de las imágenes.</p>
Es probable que el texto refleje lo que piense que va a suceder, ya que, al tratarse de un párrafo, debería mostrarse debajo de las imágenes.
Pero, como puede comprobar a continuación, lo que hace es ocupar el espacio que han dejado libre los elementos flotantes en el centro.
Si el texto fuera lo suficientemente extenso, se iría desbordando por debajo de los párrafos, luego debajo del Coliseo y, finalmente, de la Fontana de Trevi, ocupando progresivamente el área amarilla de la imagen anterior.
Le animo a que haga este ejercicio y compruebe la forma tan aparentemente extraña en la que se muestra el texto del párrafo a medida que se va rellenando dicho espacio según añade más frases.
Si el párrafo estuviera antes que los elementos flotantes en el documento HTML, este se mostraría en bloque de la forma habitual.
Para situar este último párrafo por debajo de los elementos flotante deberá hacer uso de la propiedad clear, como en este caso, en el que se le ha asignado el valor left:
<p style="clear: left;"> Este texto se sitúa debajo del Coliseo. </p>
La siguiente imagen muestra que ahora el texto aparece justo debajo del Coliseo.
Si quiere que dicho texto se escriba más abajo para que su altura sea la del borde inferior de la Fontana de Trevi, deberá asignar a la propiedad clear el valor right.
También serviría el valor both, ya que esta imagen es la que llega más abajo con respecto a todos los elementos flotantes (no solo se incluyen las dos imágenes, sino los dos párrafos).
<p style="clear: right;"> Este texto se sitúa debajo de la Fontana de Trevi. </p>
Esta otra imagen, resultado de refrescar la pantalla del navegador, lo demuestra:
Aunque en los ejemplos anteriores se ha optado por utilizar el modo de presentación por defecto del párrafo (en bloque), podría ser cualquier otro diferente.
A continuación, se aprecia la existencia de dos niveles de elementos flotantes en los que se intercambia la posición de los textos y las imágenes:
Debido a la elevada resolución de las imágenes utilizadas, quizás deba reducir el ancho de la ventana del navegador para ver la composición tal como se muestra.
El código que ha permitido obtener este resultado es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="../Imagenes/fontana-di-trevi.jpg" style="float:right; width: 50%; margin-left: 18px;">
<h1>La Fontana de Trevi</h1>
<p>
Esta imponente obra de Bernini es una de las mayores fuentes monumentales de Roma.
</p>
<div style="clear: both;"></div>
<img src="../Imagenes/coliseo.jpg" style="float:left; width: 50%; margin-right: 18px;">
<h1>El Coliseo</h1>
<p>
También llamado el Anfiteatro Flavio, es el más grande construido en la época del Imperio romano.
</p>
<div style="clear: both;"></div>
</body>
</html>
En el cuerpo del documento, la primera etiqueta <img> muestra la Fontana de Trevi.
El estilo en línea de esta etiqueta (atributo style) la sitúa en la parte izquierda de la pantalla (el valor de la propiedad float es left).
Además, establece que su tamaño sea un 50% del ancho de la pantalla (propiedad width) y tenga un margen de separación de 20 píxeles con el texto (propiedad margin-left).
Este lo forma un encabezado <h1> y un párrafo <p> con una breve descripción, que aparecen al lado de la imagen en el espacio que deja libre a su izquierda.
La imagen del Coliseo y su texto descriptivo se han agrupado dentro un contenedor <div> del que hace uso la propiedad clear, por lo que se ubicarán por debajo de la imagen y el texto anterior.
Dentro de este contenedor, la distribución de la imagen y el texto es similar a los de arriba, solo que ahora la imagen se sitúa a la izquierda (el valor de la propiedad float es left) y el margen de separación se establece a la derecha, ya que es donde se encuentra el texto en este segundo nivel (propiedad margin-right).
Solo queda abrir el documento HTML en Chrome y comprobar que el resultado coincide con el esperado.
Antes de finalizar esta sección, debe saber que los contenedores no adaptan su tamaño al de los elementos flotantes (a diferencia de cualquier otro tipo de elemento).
Por ese motivo, si no incluyera otro elemento con una altura superior, lo desbordaría.
En el ejemplo que acaba de ver no tiene ninguna consecuencia porque no hay más elementos debajo, pero, si los hubiera, se podrían producir efectos inesperados.
Para hacer evidente este problema, añada el siguiente párrafo al final del documento utilizado de ejemplo:
<p> Si quiere conocer otros sitios de interés pulse <a href="#">aquí</a> </p>
Seguramente habría esperado que este párrafo apareciera al final de la página, debajo del Coliseo, pero, tal como se puede ver a continuación, lo ha hecho debajo de la descripción de este monumento.
Esto solo puede significar una cosa: el alto del contenedor <div> solo abarca el tamaño del texto, mientras la imagen lo desborda por abajo.
Por ese motivo, queda un “hueco” en la parte inferior derecha que es aprovechado por el párrafo que se acaba de añadir.
La mejor forma de verificar esta teoría es incorporar un borde al contenedor que permita saber el área que ocupa realmente:
<div style="clear: both;border:solid;">
Hecho este cambio, el resultado que se obtiene es el mostrado a continuación, donde se observa claramente que la imagen se desborda por abajo.
Aunque la imagen es el elemento más grande del contenedor, al ser flotante no determina su altura, que en este caso viene fijada por el encabezado y el párrafo (son los únicos elementos que no flotan dentro del contenedor).
Este fenómeno se da mucho en barras de navegación cuyas opciones se reparten a los lados de la pantalla.
Como todas son elementos flotantes, el contenedor donde se encuentran no tiene ninguna altura, lo que provoca que el resto de elementos de la página se organicen de forma inesperada e incomprensible.
Para resolver este problema solo tiene que añadir la propiedad overflow al contenedor y asignarle el valor auto:
<div style="clear: both;border:solid;overflow:auto;">
La siguiente imagen demuestra que ahora la altura del contenedor sí tiene en cuenta la imagen.
En consecuencia, el texto del último párrafo aparece en el lugar donde se quería que lo hiciera inicialmente.
Dibujar el borde de un contenedor es un truco muy utilizado cuando los elementos no se colocan en las posiciones esperadas.
Una vez resuelto el problema, no se olvide de quitarlo.
En este caso concreto, se podría haber obtenido el mismo resultado asignando el valor left o both a la propiedad clear en la etiqueta <p>.
El uso de elementos flotantes es un recurso de diseño muy valioso que utilizará con frecuencia.
Sin embargo, y a pesar de su aparente facilidad de manejo, cuando lo haga deberá tener en cuenta los efectos laterales que provoca su empleo:
Los elementos flotantes no influyen en el alto del contenedor donde se encuentran.
Los elementos cuyo modo de presentación es en bloque tratarán de ocupar el espacio libre que han dejado los flotantes a su lado.
Es importante que siempre los tenga presentes porque a menudo provocan que el resto de elementos de la página se sitúen en posiciones inesperadas sin un motivo aparente.
Hasta ahora, las únicas formas de situar los elementos en una página web han sido con los modos de presentación que tiene asignado por defecto cada elemento, distribuyéndolos mediante un modo de caja flexible o haciéndolos flotar a derecha e izquierda.
Sin embargo, hay ocasiones en las que es necesario colocar un elemento en posiciones que no permiten ninguno de los modos anteriores.
En esos casos, deberá hacer uso de la propiedad position, que trabaja de forma coordinada con top, bottom, left y right.
La propiedad position establece el tipo de posicionamiento utilizado para un determinado elemento.
Los valores que puede llegar a tomar son:
static. El navegador establece la ubicación del elemento. Es el valor por defecto.
relative. El elemento se desplaza hacia un lado a partir de dicha posición.
fixed.
El elemento ocupa una posición fija e invariable en la ventana del navegador (incluso aunque haga scroll).
absolute.
Igual que en el caso anterior, pero en el área del contenedor donde se encuentra.
Por ese motivo, ahora al hacer scroll el elemento se desplazaría con el resto del contenido de la ventana del navegador.
Además de initial e inherit, esta propiedad también puede tomar el valor sticky, cuyo comportamiento es una mezcla de los dos últimos modos de posicionamiento.
No se va a describir porque no es compatible con todos los navegadores.
De todos los tipos de posicionamiento, el que se utiliza por defecto es el estático.
En consecuencia, cuando no se usa esta propiedad, es como si le hubiera asignado el valor static.
Eso podría hacerle pensar que no tiene ninguna utilidad. Sin embargo, lo precisará cuando, por ejemplo, dentro de un contenedor en el que se haya especificado otro tipo de posicionamiento, quiera ubicar uno o más elementos según este modo (no el establecido en el contenedor).
Cuando un elemento se ubica en la página de forma estática, no se tiene en cuenta el valor asignado a las propiedades top, bottom, left y right.
Sin embargo, para el resto tienen la siguiente influencia en su emplazamiento:
Posición relativa.
Desplaza el elemento hacia un lado a partir del lugar ocupado por defecto (por ejemplo, la propiedad top lo movería hacia abajo a partir de dicho punto, la propiedad bottom hacia arriba, etc.).
Posición fija o absoluta. Establecen la separación entre el lado de un elemento y el del contenedor donde se encuentre (por ejemplo, la propiedad top determina la distancia entre el lado superior del contenedor y el del contenido, la propiedad bottom lo haría en el lado inferior, etc.).
Veamos en detalle cada una de estas formas de situar un elemento HTML en pantalla.
El modo de posicionamiento relativo desplaza el elemento de la posición que tendría por defecto (posicionamiento estático) el valor asignado a las propiedades top, bottom, left y right.
Con el fin de practicar con estas propiedades, realizará un ejercicio que permita situar en diagonal un cuadrado de color amarillo y otro azul de 100 píxeles de lado, tal como se muestra a continuación:
El código utilizado ha sido el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.cuadrado {
height: 180px;
width: 180px;
}
.azul {
background-color: blue;
}
.amarillo {
background-color: yellow;
}
.diagonal {
position: relative;
left: 180px;
}
</style>
</head>
<body>
<div class="cuadrado azul"></div>
<div class="cuadrado amarillo diagonal"></div>
</body>
</html>
El cuerpo de este documento HTML está formado por dos contenedores <div> que representan los cuadrados.
Su color, tamaño y posición lo determinan las reglas cuyos selectores coinciden con los nombres de las clases a los que están vinculados.
La clase “cuadrado” es la única compartida por los dos contenedores y tiene asociada una regla de estilo que fija su tamaño en 100 × 100 píxeles (propiedades width y height).
Las correspondientes a las clases “azul” y “amarillo” determinan el color de fondo de cada uno de ellos con la propiedad background-color.
La última regla establece un posicionamiento relativo mediante el que el segundo contenedor se desplaza 100 píxeles a la derecha desde la posición que hubiera ocupado por defecto (propiedades position y left).
Observe que el desplazamiento es en el sentido contrario al del nombre de la propiedad.
El modo de posicionamiento fijo especifica una ubicación permanente e inamovible en la pantalla, incluso aunque utilice la barra de scroll para desplazarse por la página o dicho espacio se vea ocupado por otros elementos.
Esta ubicación vendrá determinada por las propiedades top, bottom, left y right, pero, a diferencia del posicionamiento relativo, ahora sus valores marcan la separación de los lados del elemento con los bordes de la ventana del navegador.
Por ejemplo, top fija la distancia entre el lado superior del contenedor y el del elemento contenido, con bottom esa distancia es la que hay entre el lado inferior del contenedor y el del elemento contenido, etc.
El siguiente documento HTML le ayudará entender la forma de actuar de este modo de posicionamiento:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#p-fijo {
position: fixed;
bottom: 8px;
right: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<p>Este texto permite hacer scroll</p>
<p>Este texto permite hacer scroll</p>
<p id="p-fijo">Este texto es fijo</p>
</body>
</html>
El código es muy sencillo, ya que el cuerpo del documento está formado por un conjunto de párrafos que se repiten muchas veces, de forma que haya que utilizar la barra de desplazamiento para verlos todos (los puntos suspensivos no forman parte del documento HTML, representan los que se han excluido a fin de no hacer innecesariamente largo el código).
El único que es diferente es el último, ya que tiene asociado un identificador (atributo id) cuyo valor es el selector de la regla de estilo mediante la que se establece que su posicionamiento sea fijo (el valor de la propiedad position es fixed).
Eso significa que no se situará debajo del párrafo anterior, sino en la ubicación establecida por las propiedades bottom y right.
Puesto que en ambos casos su valor es de 0 píxeles significa que este quedará pegado a la esquina inferior derecha del navegador.
Finalmente, con objeto de diferenciar este texto de los demás se escribe en negrita (la propiedad font-weight toma el valor bold), tal como puede ver a continuación.
Si no le apareciera la barra de scroll vertical, reduzca la altura de la ventana (o añada más párrafos al código).
Cuando la vea, muévala hacia arriba y hacia abajo. Comprobará cómo se desplaza el texto de todos los párrafos, excepto el del último, que permanece inmóvil en la esquina inferior derecha.
El modo de posicionamiento absoluto funciona como el fijo, excepto que no utiliza como referencia la ventana del navegador, sino el área del contenedor en el que se encuentra.
Por ese motivo, y a diferencia del modo fijo, dicho elemento sí se desplaza al hacer scroll en la página.
Si quiere experimentar con este tipo de posicionamiento, solo tiene que asignar el valor absolute a la propiedad position de la regla de estilo del código de ejemplo anterior.
Luego, cargue la página y compruebe que ahora el texto del último párrafo también se desplaza con el resto del contenido de la página.
Para demostrar que este modo de posicionamiento (y el fijo) se puede realizar tomando como referencia el contenedor en el que se encuentra un elemento, en vez de la pantalla, se va a desarrollar un código que dibuja un cuadrado azul situado en la esquina inferior derecha del navegador, dentro del que se incluye otro amarillo de menor tamaño, ubicado en la esquina superior izquierda del primero.
A continuación, se muestra el resultado que se quiere obtener.
El código utilizado ha sido el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#div-exterior {
background-color: blue;
height: 100px;
width: 100px;
position: absolute;
bottom: 8px;
right: 8px;
}
#div-interior {
background-color: yellow;
height: 50px;
width: 50px;
position: absolute;
top: 8px;
left: 8px;
}
</style>
</head>
<body>
<div id="div-exterior">
<div id="div-interior"></div>
</div>
</body>
</html>
Como puede observar, el cuerpo del elemento está formado por dos contenedores <div>, uno dentro del otro.
Eso permitirá situar el interior respecto del exterior.
Cada cuadrado se representa mediante un contenedor (<div>) cuyo aspecto y posición se define en la regla de estilo correspondiente (el selector coincide con su identificador).
El color y el tamaño se especifica con las propiedades background-color, width y height.
El contenedor exterior es de color azul y un tamaño de 100 × 100 píxeles.
El interior, de color amarillo y una superficie de 50 × 50 píxeles.
Ambos contenedores establecen un posicionamiento absoluto (el valor de la propiedad position es absolute).
Sin embargo, en el exterior (azul) su emplazamiento definitivo lo determinan las propiedades bottom y right, que lo colocan en la esquina inferior derecha de la pantalla.
En cambio, las propiedades top y left llevan el interior (amarillo) a la esquina superior izquierda del contenedor anterior (no de la pantalla), que es en el que se encuentra.
Para que un elemento tome como referencia el contenedor al que pertenece (en vez de la pantalla), el modo de posicionamiento de dicho contenedor no puede ser el que tiene por defecto (estático).
Esta ordenación de componentes permanecerá inalterable, independientemente del tamaño de la ventana. Para comprobarlo solo tiene que redimensionarla.
El posicionamiento absoluto es un recurso muy empleado para situar texto encima de imágenes.
Hasta ahora, solo ha podido escribir sobre una imagen cuando esta era el fondo de pantalla.
En el resto de ocasiones no ha sido posible porque los modos de presentación, tanto de las imágenes como de los textos, les asignaban un área de uso exclusivo.
Sin embargo, gracias a la propiedad position podrá colocarlos donde quiera, independientemente de si dicho espacio está o no ocupado.
Para demostrarlo, desarrollará un código HTML que permita escribir el nombre y una breve descripción de la Fontana de Trevi sobre su propia imagen, tal como puede ver a continuación:
El código utilizado es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
opacity: 0.5;
width: 58%;
}
div {
position: absolute;
top: 8px;
left: 8px;
padding-left: 25px;
width: 40%;
}
</style>
</head>
<body>
<img src="../Imagenes/fontana-di-trevi.jpg">
<div>
<h1>La Fontana de Trevi</h1>
<p>
Esta impresionante obra de Bernini es una de las mayores fuentes monumentales de Roma.
</p>
</div>
</body>
</html>
El cuerpo de mensaje está formado por la etiqueta <img> con la que se muestra la imagen de la Fontana de Trevi y un contenedor (<div>) dentro del que se incluye el texto que se sobrescribirá sobre la imagen: un encabezado principal como título (etiqueta <h1>) y un párrafo (etiqueta <p>) a modo de breve descripción.
En la cabecera del documento están las reglas de estilo de la imagen y el contenedor.
La de la imagen establece que su ancho sea del 50% de la pantalla y un nivel de transparencia de 0.5 (propiedades width y opacity).
Así, se podrá ver con claridad el texto que se sobrescriba encima.
Al no existir ninguna propiedad que indique la posición que debe ocupar en la pantalla, esta se muestra por defecto en la parte superior izquierda.
La regla de estilo del contenedor usa un modo de posicionamiento absoluto (el valor de la propiedad position es absolute) cuyas propiedades top y left lo sitúan en la esquina superior izquierda (el valor de ambas es 0), coincidiendo con la imagen.
El margen interno de 25 píxeles se añade por motivos estéticos, para que el texto no empiece a escribirse en el mismo borde izquierdo de la imagen.
Por la misma razón, el ancho se limita al 40% para que tampoco exceda los límites de esta (propiedad width).
Una vez escrito el código, cárguelo en Chrome y modifique el tamaño de la ventana del navegador para comprobar que su comportamiento coincide con el descrito.
A diferencia de los modos de presentación anteriores, los elementos que utilizan la propiedad position para ubicarse en la pantalla (excepto si toma el valor por defecto, static) pueden invadir el espacio de otros y, en consecuencia, ocultarlos parcial o totalmente.
Cuando varios elementos se solapan, puede ser necesario determinar el orden en el que se apilan, ya que eso determina cuál se ve encima del resto.
Por ese motivo, HTML proporciona la propiedad z-index, cuyo valor es un número positivo o negativo (nivel de apilamiento).
Un elemento con un número de apilamiento mayor estará colocado sobre los que tengan un valor inferior.
Por defecto, el valor de esta propiedad es auto, es decir, el del contenedor en el que se encuentra.
Para poner en relieve esta propiedad, el siguiente código muestra tres cuadrados de distintos colores que se solapan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
height: 150px;
width: 200px;
border: solid 1px;
position: absolute;
}
#blanco {
background-color: white;
top: 0px;
left: 0px;
}
#azul-claro {
background-color: lightblue;
top: 50px;
left: 50px;
}
#azul-oscuro {
background-color: blue;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="blanco"></div>
<div id="azul-claro"></div>
<div id="azul-oscuro"></div>
</body>
</html>
El cuerpo del documento HTML está formado por tres contenedores, que representan los tres cuadrados que se va a solapar.
Todos ellos comparten una serie de características comunes, que se agrupan en la regla de estilo cuyo selector es el nombre de la etiqueta <div>.
En su bloque de declaraciones se especifican sus dimensiones (propiedades width y height), un borde (propiedad border) y un tipo de posicionamiento absoluto (la propiedad position tiene el valor absolute).
Cada contenedor tiene asociado un identificador que se utiliza como selector en la regla que les asigna un color de fondo (propiedad background-color) y una posición (atributos top y left).
Así, el blanco está situado en la esquina superior izquierda, mientras que el azul claro y el oscuro se desplazan 50 y 100 píxeles a la derecha y hacia abajo, respectivamente.
El resultado se puede ver a continuación:
Como no se ha utilizado la propiedad z-index, el navegador los ha ido mostrando en el orden que se encuentran en el documento HTML.
Así, primero ha situado el blanco, luego ha colocado el azul claro sobre este y, finalmente, el azul oscuro en primer plano.
Si quiere revertir este orden, añada la propiedad z-index a las reglas de estilo de cada uno de ellos:
#blanco {
background-color: white;
top: 0px;
left: 0px;
z-index: 2;
}
#azul-claro {
background-color: lightblue;
top: 50px;
left: 50px;
z-index: 1;
}
#azul-oscuro {
background-color: blue;
top: 100px;
left: 100px;
z-index: 0;
}
Le animo a combinar distintos valores de esta propiedad y observar los cambios producidos.
Durante el diseño de una página web tendrá que hacer uso de múltiples recursos visuales que la hagan atractiva y fácil de usar y, en especial, los de alineación o centrado de elemento, tanto respecto de la propia página como de cualquiera de los contenedores que la compongan.
Por ese motivo, antes de comenzar el desarrollo del código HTML deberá tener claras todas las opciones que dispone para:
Centrar los elementos horizontalmente.
Centrar los elementos verticalmente.
Alinear los elementos en la parte superior o inferior, a la izquierda o a la derecha.
A continuación, se describe en detalle las alternativas con las que cuenta en cada caso.
A lo largo de las páginas de este libro se han ido realizando ejercicios en los que ya ha tenido ocasión de utilizar técnicas de centrado horizontal.
Una de ellas se aplicaba únicamente a textos y consistía en asignar el valor center a la propiedad text-align, tal como se hace en este código de ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1 style="text-align: center;">Texto centrado</h1> </body> </html>
A continuación, se puede apreciar que el texto queda centrada en la página , aunque se modifique el ancho de la ventana del navegador.
Esto mismo se puede hacer dentro de un contenedor independiente de donde esté situado. El siguiente Código lo demuestra.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
position: relative;
top: 100px;
left: 100px;
width: 400px;
border: solid;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>Texto centrado</h1>
</div>
</body>
</html>
Como puede observar, en el cuerpo del documento hay un contenedor <div>, dentro del que se encuentra el encabezado <h1>.
La única regla de estilo afecta al contenedor; en concreto, a su aspecto y a su posición en la pantalla.
Esta última se establece de forma relativa (la propiedad position toma el valor relative) para poder desplazarlo 100 píxeles a la derecha y debajo de la posición asignada por el navegador (propiedades top y left).
Con el fin de comprobar que el texto del encabezado queda centrado en el área ocupada por el contenedor, se le ha dado un ancho de 400 píxeles (propiedad width) y se ha dibujado un borde que delimita claramente dicha área (propiedad border).
Por último, la propiedad text-align centra el texto dentro del contenedor.
La siguiente imagen así lo demuestra.
¿Y si quisiera que el contenedor también estuviera centrado horizontalmente?
En ese caso, deberá utilizar la propiedad margin, a la que tendrá que asignar el valor auto.
Eso provocará que el navegador reparta de forma homogénea el espacio entre ambos lados del elemento.
Para confirmarlo, sustituya la regla de estilo del documento anterior por:
div {
position:relative;
top:100px;
margin: auto;
width: 400px;
border: solid;
text-align: center;
}
En primer lugar, se ha eliminado la propiedad left que forzaba al contenedor a situarse en una posición horizontal determinada (en concreto, 100 píxeles a la derecha de la que tendría por defecto).
Así, la propiedad margin puede actuar para cumplir con su objetivo, tal como se puede ver a continuación.
Si lo que se pretende centrar no es un contenedor sino una imagen, el procedimiento es el mismo, solo que, al mostrarse por defecto en línea, antes deberá forzar que lo haga en bloque.
Eso se consigue asignando el valor block a la propiedad display, tal como se hace en este otro código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
display: block;
margin: auto;
width: 200px;
}
</style>
</head>
<body>
<img src="../Imagenes/coliseo.jpg">
</body>
</html>
El cuerpo de este documento HTML está formado únicamente por la etiqueta <img> con la imagen del Coliseo.
En el bloque de declaraciones de la regla que tiene asociada, lo primero que se hace es asignar un modo de presentación en bloque (la propiedad display toma el valor block) para poder centrarla horizontalmente con la propiedad margin (a la que se asigna el valor auto).
Con la propiedad width se ajusta el tamaño de la imagen al ancho deseado (no interviene en el centrado).
A continuación se puede ver el resultado obtenido, donde se aprecia que el Coliseo queda centrado en sentido horizontal.
Naturalmente, este método se puede utilizar para centrar imágenes dentro de un contenedor, no solo en la página.
Otra forma de centrar una imagen o un texto dentro de un contenedor es el empleo de un modo de presentación de caja flexible (la propiedad display toma el valor flex).
En este modo, la función de centrado la asumiría la propiedad justify-content, a la que habría que asignar el valor center.
En el siguiente ejercicio se usarán ambas propiedades para obtener este resultado:
El contenedor dispone de un borde que pone en evidencia que la imagen está centrada horizontalmente en su interior y este, a su vez, en la pantalla.
El código utilizado es muy sencillo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 200px;
}
div {
position: relative;
top: 100px;
margin: auto;
width: 400px;
border: solid;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div>
<img src="../Imagenes/coliseo.jpg">
</div>
</body>
</html>
Como cabía esperar, el cuerpo del documento solo está formado por un contenedor <div>, dentro del que se encuentra la etiqueta <img> con la que se muestra la imagen del Coliseo.
En la cabecera se han creado dos reglas de estilo.
La de la imagen especifica un ancho de 200 píxeles (propiedad width).
La del contenedor emplea la propiedad margin para centrarlo horizontalmente en la ventana del navegador (su valor es auto) y las propiedades display y justify-content para centrar la imagen en su interior (la primera toma el valor flex y la segunda, center).
La función del resto de propiedades ya la conoce de una práctica anterior.
Si en la sección anterior se explicaron diversas formas de centrar un elemento horizontalmente, en esta se describirán las que permiten hacerlo en sentido vertical.
La primera de todas vuelve a basarse en el uso de un modo de presentación de caja flexible (la propiedad display toma el valor flex), ahora en combinación con la propiedad align-items (en vez de justify-content).
Con el fin de demostrarlo, modificará el código del ejercicio anterior para que la imagen del Coliseo quede centrada verticalmente (además de horizontalmente) dentro del contenedor donde se encuentra.
El resultado que se pretende obtener es el siguiente:
El código utilizado para conseguir este resultado es prácticamente el mismo del ejercicio anterior
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 200px;
}
div {
position: relative;
top: 100px;
margin: auto;
width: 400px;
height: 400px;
border: solid;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<img src="../Imagenes/coliseo.jpg">
</div>
</body>
</html>
Los únicos cambios que se han realizado en el documento HTML de base afectan solo a la regla de estilo, a la que se ha añadido la propiedad align-items para centrar la imagen verticalmente dentro del contenedor.
La propiedad height se agrega solo con el fin de que el contenedor sea más alto que la imagen y, así, verificar el resultado.
En este código, la propiedad margin centra horizontalmente el contenedor en la pantalla, mientras que las propiedades display, justify-content y align-items centran la imagen en sentido horizontal y vertical en su interior.
Pero ¿qué tendría que hacer si quisiera centrarlo también verticalmente?
Existen varias alternativas, una de las cuales pasa por el uso de una nueva propiedad: transform.
La función de esta propiedad es cambiar el sistema de coordenadas en el que se muestra un elemento con el fin de moverlo, rotarlo, escalarlo, etc. Por lo tanto, tiene innumerables aplicaciones de las que solo se aprovechará la que permite centrarlo verticalmente.
Para ello, deberá asignar a esta propiedad la siguiente función de transformación:
translate(distancia en el eje X, distancia en el eje Y)
Con carácter general, la misión de esta función es desplazar un elemento HTML la distancia indicada en los ejes X e Y. Dicha distancia puede estar expresada en cualquiera de las unidades de medida que ya conoce.
También puede ser un porcentaje del tamaño del propio elemento (no del contenedor en el que se encuentre), es decir, de su ancho en el eje X o de su alto en el eje Y. Un valor positivo desplazaría el elemento hacia la derecha o hacia abajo.
Si fuera negativo lo haría hacia la izquierda o hacia arriba.
Si desea realizar el desplazamiento en un solo eje, utilice las funciones:
translateX(distancia) translateY(distancia)
Aunque en esta obra el parámetro transform solo se va a utilizar en labores de centrado, dada su gran versatilidad le animo a profundizar en todas sus posibilidades.
Un buen punto de partida para hacerlo es https://developer.mozilla.org/es/docs/Web/CSS/transform.
A fin de practicar con la propiedad transform y la función translate(), modificará el código del documento HTML anterior para que tanto el contenedor como la imagen aparezcan centrados horizontal y verticalmente en la pantalla.
A continuación se muestra el resultado que se pretende obtener:
Para conseguirlo, solo tiene que sustituir la regla del estilo del contenedor por la siguiente.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border: solid;
display: flex;
align-items: center;
justify-content: center;
}
Para conseguir que tanto el contenedor como la imagen estén centrados en pantalla, se realizarán los siguientes cambios en la regla de estilo del contenedor:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
border: solid;
}
Las diferencias con la regla de estilo anterior son las siguientes:
Desaparece la propiedad margin, cuyo valor auto hacía que el contenedor quedara centrado horizontalmente.
En este nuevo código, la propiedad transform será ahora la responsable de centrarlo tanto horizontal como verticalmente.
El posicionamiento del contenedor pasa de ser relativo a absoluto (el valor de la propiedad position es absolute).
Las propiedades top y left sitúan la esquina superior izquierda del contenedor en el centro de la pantalla (su valor es la mitad del ancho y el alto de esta, es decir, un 50%).
En la imagen que hay a continuación dicho punto se representa como (1).
Por último, se asigna la función translate() a la propiedad transform.
Los argumentos de esta función (-50% y -50%) trasladan la esquina superior izquierda del contenedor hacia arriba y hacia la izquierda la mitad de su tamaño, para que su centro coincida con el de la página web (o el del contenedor en el que pudiera estar incluido).
La siguiente imagen muestra Gráficamente. Este desplazamiento, efectuado desde el punto (1) al (2).
Aunque en este caso no haya sido necesario, debe saber que si este contenedor hubiera estado dentro de otro, el modo de posicionamiento del contenedor superior deberá ser relativo.
En resumen, la combinación de valores de las siguientes propiedades centra el contenedor en sentido horizontal y vertical:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Mientras estas otras propiedades hacen lo mismo con los elementos que contiene:
display: flex; align-items: center; justify-content: center;
Una vez realizados todos estos cambios, refresque la página del navegador.
Luego, modifique el tamaño de la ventana y compruebe que tanto el contenedor como la imagen siempre permanecen centrados.
Para finalizar esta sección, si lo que se pretende es centrar en pantalla una imagen que no está dentro de ningún contenedor, el código es mucho más sencillo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="../Imagenes/coliseo.jpg">
</body>
</html>
El cuerpo del documento HTML solo contiene la etiqueta <img>, cuyo tamaño y posición se ve afectada por la única regla de estilo que existe.
Además de un ancho de 200 píxeles, en ella se establece un tipo de posicionamiento absoluto (el valor de la propiedad position es absolute) con objeto de situar la esquina superior izquierda de la imagen en el centro de la pantalla (propiedades top y left) para, finalmente, desplazarla hasta dejarla centrada (propiedad transform).
Aunque en los ejemplos de esta sección solo se hayan utilizado imágenes, estos métodos también son válidos con textos u otros contenedores.
Además de centrar los elementos, en muchas ocasiones el diseño de una página requiere colocarlos a los lados de la pantalla (o del contenedor en el que se encuentren).
Si quiere hacerlo a derecha e izquierda solo tiene que convertirlos en elementos flotantes, asignando el valor right o left a la propiedad float.
Para desplazarlos hacia arriba o hacia abajo tendrá que utilizar la propiedad position.
Con el fin de demostrar las posibilidades de esta última propiedad, realizará un ejercicio que señale los puntos cardinales en la ventana del navegador, tal como se muestra a continuación:
utilizado para obtener este resultado ha sido el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0px;
}
div {
position: absolute;
font-size: 25px;
background-color: blue;
color: white;
width: 50px;
height: 50px;
text-align: center;
}
#ne {
top: 0px;
right: 0px;
}
#sw {
bottom: 0px;
}
#n {
left: 50%;
transform: translate(-50%, 0%);
}
#s {
bottom: 0px;
}
#nw {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#se {
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="nw"></div>
<div id="ne"></div>
<div id="sw"></div>
<div id="s"></div>
<div id="n"></div>
<div id="se"></div>
</body>
</html>
El cuerpo del mensaje está formado por 9 contenedores <div>, dentro de los que se encuentra el acrónimo que señala el punto cardinal en el que los sitúa la regla de estilo cuyo selector coincide con su identificador (excepto el primero, por el motivo que se explicará más adelante).
Dichas reglas se encuentran en la cabecera del documento HTML, la primera de las cuales se utiliza para establecer un margen de separación de 0 píxeles entre los elementos de la página (en este caso los contenedores) y los lados de la ventana del navegador.
La siguiente regla de estilo también tiene un selector de etiqueta y determina el color de fondo y el de tinta de todos los contenedores (propiedades background-color y color).
Asimismo, fija un ancho de 50 píxeles (propiedad width), mientras que el alto viene determinado por el de la línea de texto que hay dentro (propiedad line-height).
Recuerde que el alto del contenedor coincide con el del contenido (a no ser que se trate de elementos flotantes);
en este caso, el de la línea de texto, que es de 50 píxeles.
Al ser mayor que el de la fuente, de tan solo 25 píxeles (propiedad font-size), el texto quedará centrado verticalmente dentro del contenedor.
Para hacerlo lo mismo horizontalmente, se asigna el valor center a la propiedad text-align.
Por último, se establece un posicionamiento absoluto (la propiedad position toma el valor absolute), ya que será con el que se ubiquen los contenedores.
Para colocar en su posición el primer contenedor, aquel que indica el noroeste, no se requiere ninguna regla de estilo, ya que, por defecto, el navegador lo pone en la parte superior izquierda de la pantalla.
Los contenedores localizados en los puntos noreste, sureste y suroeste se emplazan en su posición asignando el valor 0 a una o varias de las propiedades top, bottom, left y right, según corresponda.
Las reglas de los contenedores situados en el norte, sur, este y oeste, además de las propiedades anteriores, deben utilizar transform para desplazarlos al punto medio del lado correspondiente.
Al igual que el contenedor central, a dicha propiedad se le asigna la función translate().
La combinación de los valores de sus argumentos, así como el de las propiedades top, bottom, left o right, son las que colocan a cada uno en su sitio.
Analice detenidamente todos estos valores para entender por qué se han utilizado esos y no otros.
Le animo a que experimente con ellos y vea los efectos que provoca cualquier modificación.
Es la mejor forma de entender el comportamiento de estas propiedades, imprescindibles en el diseño de muchas páginas web.
Todas las páginas web profesionales deben seguir un diseño, más o menos complejo, que, de forma genérica, divide (o agrupa) el contenido en secciones.
Aunque su apariencia depende de la imaginación de sus creadores, uno comúnmente aceptado es aquel en el que la parte superior está ocupada por una cabecera y una barra de navegación.
La parte central se reserva para el contenido principal, que, generalmente, va acompañado de una o varias secciones laterales con información relacionada.
Por último, en la parte inferior suele haber un pie de página con datos de contacto y otros de carácter auxiliar relacionados con el propio sitio web.
Cada una de estas secciones se representan mediante contenedores que se reparten el espacio de una forma más o menos sofisticada.
Sin embargo, esta distribución aparentemente intrincada se puede descomponer en patrones más sencillos, como los descritos en las siguientes secciones.
Su combinación permitiría abordar cualquier tipo de diseño, por difícil que parezca.
Uno de los patrones de diseño que utilizará con frecuencia, es aquel en el que los elementos ocupan todo el ancho disponible, que se reparte proporcionalmente entre ellos.
De esa forma, se consigue mantener la misma distribución aunque se redimensione la ventana del navegador.
La siguiente imagen es un ejemplo representativo. Como puede observar, está formado por tres contenedores que incluyen un texto.
Los dos situados en los extremos ocupan un 20% del ancho de la ventana del navegador y el del medio el espacio restante.
Para conseguir este resultado, se ha utilizado el siguiente código.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
display: inline;
box-sizing: border-box;
padding: 10px;
margin: 10px;
border: solid;
text-align: center;
}
#izquierda, #derecha {
width: 20%;
}
#centro {
width: calc(60% - 40px);
}
</style>
</head>
<body>
<div id="izquierda">Contenedor izquierdo</div>
<div id="centro">Contenedor central</div>
<div id="derecha">Contenedor derecho</div>
</body>
</html>
Como puede observar, el cuerpo del documento HTML está formado por tres contenedores que representan las tres secciones en las que se distribuye el contenido de la página.
Todos tienen asociado un identificador (atributo id), que se utiliza como selector en la regla de estilo con la que se especifica el ancho de cada uno de ellos.
En la regla de estilo que afecta a todos los contenedores <div> se establece un modo de presentación en línea (la propiedad display tiene el valor inline) que los coloca en línea.
Luego, se asigna el valor border-box a la propiedad box-sizing, por lo que el valor de la propiedad width especificado en el resto de las reglas tendrá en cuenta el margen interno y el borde del contenedor.
El margen interno y externo será de 10 píxeles (propiedades padding y margin) y el borde estará formado por una línea continua (la propiedad border toma el valor solid).
La última declaración de esta regla centra el texto dentro de los contenedores, la propiedad text-align toma el valor center.
Ya solo queda asignar el ancho de cada contenedor. El izquierdo y el derecho es el mismo, razón por la que comparten la misma regla de estilo con un selector múltiple, cuya única declaración asigna un valor del 20% a la propiedad width.
La última regla de estilo asigna el ancho restante al contenedor central, que es el 60% menos el espacio ocupado por los márgenes externos que los separan entre sí y con los bordes del navegador (10 píxeles a cada lado de los tres contenedores, es decir, 40 píxeles):
calc(60% - 40px);
Una vez guardado el documento HTML en un archivo, ábralo con Chrome y compruebe que las secciones se distribuyen de la forma esperada, incluso aunque modifique el ancho de la ventana del navegador.
Con el fin de cubrir todos los escenarios posibles, en esta sección se describirá cómo distribuir verticalmente el espacio disponible en la ventana del navegador entre las secciones componentes del diseño de una página.
La siguiente imagen muestra un ejemplo de lo que se pretende conseguir:
En este caso concreto, la altura del contenedor superior e inferior es un 20% de la ventana del navegador.
La del central es un 60% menos el espacio ocupado por los márgenes externos.
El código utilizado es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
box-sizing: border-box;
padding: 10px;
margin: 10px;
text-align: center;
border: solid;
}
#arriba, #abajo {
height: 20vh;
}
#centro {
height: calc(60vh - 40px);
}
</style>
</head>
<body>
<div id="arriba">Contenedor superior</div>
<div id="centro">Contenedor central</div>
<div id="abajo">Contenedor inferior</div>
</body>
</html>
De nuevo, el cuerpo del documento HTML está formado por tres contenedores, cuyo identificador es el selector de la regla que determina su altura.
La regla que define las características comunes de todos los contenedores hace uso de las mismas propiedades descritas en el ejercicio anterior, excepto display.
No es necesaria porque estos se muestran por defecto en modo bloque (uno debajo del otro).
Respecto a las reglas que tienen como selector el identificador de cada uno de los contenedores, la única diferencia con las del ejercicio anterior es que estas emplean vh como unidad de medida (en vez de un porcentaje).
Como sabe 1vh equivale al 1% de la altura de la ventana del navegador.
Si en vez de la unidad ‘vh’ quisiera usar porcentajes, tendría que añadir la siguiente regla de estilo:
html, body {
height: 100%;
}
Cargue este archivo en Chrome y compruebe que las secciones se distribuyen como estaba previsto, incluso aunque modifique el tamaño
Para terminar el capítulo, en esta última sección realizará un ejercicio en el que se demuestre que el reparto proporcional de espacios no solo se puede efectuar en el contexto de la página, sino también dentro de un contenedor, lo que permite combinar elementos distribuidos horizontal y verticalmente.
Para ello, dividirá transversalmente en dos mitades el contenedor central del ejercicio anterior y, dentro del que está a la izquierda, creará otras tres secciones colocadas verticalmente en la proporción 20% - 60% - 20%.
El resultado que se pretende conseguir es el siguiente:
Se partirá del código del documento HTML del ejercicio anterior, sobre el que se realizará una serie de modificaciones, empezando por el cuerpo, que deberá sustituirse por este otro:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
box-sizing: border-box;
padding: 10px;
margin: 10px;
text-align: center;
border: solid;
}
#arriba, #abajo {
height: 20vh;
}
#centro {
height: calc(60vh - 40px);
}
</style>
</head>
<body>
<div id="arriba">Contenedor superior</div>
<div id="centro">Contenedor central
<div id="centro-izquierdo">
<div id="centro-izquierdo-arriba">Centro Izquierdo Arriba</div>
<div id="centro-izquierdo-centro">Centro Izquierdo Centro</div>
<div id="centro-izquierdo-abajo">Centro Izquierdo Abajo</div>
</div>
<div id="centro-derecho">Centro Derecho</div>
</div>
<div id="abajo">Contenedor inferior</div>
</body>
</html>
Como puede observar, se mantienen los contenedores (<div>) correspondientes a las secciones cuyo identificador era “arriba”, “centro” y “abajo” del ejercicio anterior.
La diferencia es que, dentro del contenedor central se han añadido dos nuevos contenedores (“centro-izquierdo” y “centro-derecho”), de los cuales, el de la izquierda incluye, a su vez, otros tres contenedores adicionales (“centro-izquierdo-arriba”, “centro-izquierdo-centro” y “centro-izquierdo-abajo”).
El tamaño y la distribución de cada uno de ellos se determina mediante las adecuadas reglas de estilo.
En los dos primeros será del 50% en dirección horizontal y en los tres últimos del 20% - 60% -20% en vertical.
Veamos cómo se consigue.
La regla de estilo que afecta a todos los contenedores <div> (su selector es el nombre de dicha etiqueta) coincide con la del documento HTML tomado de base.
Lo mismo sucede con las que atañen a los contenedores superior e inferior (identificadores “arriba” y “abajo”).
La única que cambia es la correspondiente al central (“centro”), ya que ahora debe distribuir en sentido horizontal los dos nuevos contenedores que incluye.
Por ese motivo, al bloque de declaraciones de esta regla se añade la propiedad display, a la que se asigna el valor flex para establecer un modelo de distribución de caja flexible.
Como sabe, dicha propiedad trabaja de forma conjunta con flex-direction, que al tomar el valor row distribuye horizontalmente los elementos que contiene.
Por lo tanto, la regla del contenedor central quedaría así:
#centro {
height:calc(60vh - 40px);
display: flex;
flex-direction: row;
}
Solo queda dividir el espacio de esta sección en dos partes iguales mediante la siguiente regla, cuyo selector combina los identificadores de los dos contenedores interiores (“centro-izquierdo” y “centro-derecho”):
#centro-izquierdo, #centro-derecho{
width: 50%;
}
Como ambos deben repartirse el espacio horizontalmente a partes iguales, se asigna un 50% a la propiedad width.
La forma de distribuir el espacio del contenedor izquierdo (“centro-izquierdo”) es similar a la utilizada en el ejercicio original, salvo que ahora se utilizan porcentajes, en vez vh, ya que esta unidad toma como referencia la altura de la ventana del navegador, no la del del contenedor.
Por lo tanto, las reglas de estilo que faltaría por añadir son:
#centro-izquierdo-arriba, #centro-izquierdo-abajo{
height:20%;
}
#centro-izquierdo-centro{
height:calc(60% - 40px);
}
Una vez desarrollado el código, abra la página con Chrome y compruebe que su aspecto es el esperado.
Modifique el tamaño del navegador y verifique que se mantienen las proporciones de todos los contenedores (siempre que haya espacio suficiente).
Llegado a este punto, ¿qué le parecería combinar las técnicas de centrado con las de reparto del espacio?
Para demostrarle que es mucho más fácil de lo que parece, realizará una nueva práctica en la que se centran horizontal y verticalmente los textos incluidos en los contenedores (ahora solo lo están en sentido horizontal).
Para ello, se utilizará una vez más el modo de caja flexible, por lo que deberá añadir el siguiente grupo de declaraciones a las reglas de estilo adecuadas en el documento HTML anterior:
display: flex; justify-content: center; align-items: center;
Pero ¿cuáles son dichas reglas? Puede que esté pensando en hacerlo en la que afecta a todos los contenedores, que quedaría así:
div {
box-sizing: border-box;
padding: 10px;
margin: 5px;
text-align: center;
border: solid;
display: flex;
justify-content: center;
align-items: center;
}
Sin embargo, si lo hiciera, obtendría el siguiente resultado.
El motivo es que esta regla de estilo centra horizontal y verticalmente todos los elementos incluidos dentro de los contenedores, no solo el texto, sino también los contenedores interiores.
Sin embargo, estos últimos no deben centrarse, sino mantener la distribución horizontal o vertical que tuvieran, según el caso.
Por lo tanto, las propiedades display, justify-content y align-items tendrán que añadirse únicamente a las reglas que afecten exclusivamente a los elementos que se vayan a centrar, es decir, las de los contenedores cuyos identificadores son “arriba”, “abajo”, “centro-derecho”, “centro-izquierdo-arriba”, “centro-izquierdo-abajo” y “centro-izquierdo-centro”.
Los que tienen como identificadores “centro” y “centro-izquierdo” quedarán excluidos porque incluyen otros contenedores que no deben centrarse (en el primero se tiene que mantener una dis-tribución horizontal y en el segundo vertical).
Un último detalle, como había una regla cuyo selector era una combinación de dos clases (“centro-izquierdo” y “centro-derecho”), la primera de las cuales está asociada a un contenedor cuyo contenido no debe centrarse y la otra sí, hay que dividirla en dos.
Por eso, la regla:
#centro-izquierdo, #centro-derecho{
width: 50%;
}
Se convierte en estas otras dos:
#centro-izquierdo{
width: 50%;
}
#centro-derecho{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
Una vez hecho este último cambio, se obtendría el siguiente resultado:
Otra posibilidad sería crear la siguiente regla de estilo, cuyo selector es una nueva clase (“texto-centrado”) que habría que vincular a los contenedores correspondientes mediante el atributo class:
.texto-centrado{
display: flex;
justify-content: center;
align-items: center;
}
}