HTML para principiantes (parte 20): Diseño de columnas

Redes sociales

Los sitios web a menudo muestran contenido en varias columnas (como una revista o periódico). En este artículo Te vamos a mostrar las diferentes técnicas para crear columnas en HTML;

HTML ofrece varios elementos semánticos que definen las diferentes partes de una página web:

  • <header> Hace referencia a un encabezado para un documento o una sección
  • <nav> Hace referencia a un contenedor para enlaces de navegación
  • <section> Hace referencia a una sección en un documento
  • <article> Hace referencia a un artículo independiente
  • <aside> Hace referencia a contenido extra aparte del contenido (como una barra lateral)
  • <footer> Hace referencia a un pie de página para un documento o una sección
  • <details> Hace referencia a detalles adicionales
  • <sumamary> Hace referencia a un encabezado para el elemento <details>

Técnicas de diseño HTML

Hay cinco formas diferentes de crear diseños de varias columnas. Cada una con sus pros y sus contras:

  • Tablas HTML (no recomendado)
  • Propiedad float de CSS
  • CSS flexbox
  • FrameWork CSS
  • Grig (Rejilla) CSS

¿Cuál elegir?

Tablas HTML

¡El elemento <table> no fue diseñado para ser una herramienta de diseño! El propósito del elemento es mostrar datos tabulados. Por lo tanto, ¡no uses tablas para el diseño de tu página! Traerán un desastre a tu código. E imagina lo difícil que será rediseñar tu sitio después de un par de meses.

Consejo: ¡NO use tablas para el diseño de tu página!

Frameworks CSS

Si desea crear su diseño rápidamente, puede usar un framework como por ejemplo Bootstrap.

Propiedad floaf de CSS

Es común hacer diseños web completos utilizando la propiedad float de CSS. Float es fácil de aprender: solo necesitas recordar cómo funcionan esta propiedad y la propiedades clear

Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede entorpeder la flexibilidad del diseño. Obtenga más información sobre las propiedades CSS Float y Clear .

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Plantilla CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Estilo para el header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Se crean dos columnas/cajas que flotan una al lado de la otra */
nav {
  float: left;
  width: 30%;
  height: 300px; /* solo como demostración, podría ser borrado */
  background: #ccc;
  padding: 20px;
}

/* Estilo para el menú */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /*  solo como demostración, podría ser borrado */
}

/* Borrar floats después de las columna */
section:after {
  content: "";
  display: table;
  clear: both;
}

/* Estilo para el footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Diseño adaptable: hace que las dos columnas / cuadros se apilen uno encima del otro en lugar de uno al lado del otro, en pantallas pequeñas */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Float</h2>
<p>En este ejemplo, hemos creado un encabezado, dos columnas y un pie de página. En pantallas más pequeñas, las columnas se apilarán una encima de la otra.</p>
<p>Cambia el tamaño de la ventana del navegador para ver el efecto adaptable(aprenderá más sobre esto en nuestro próximo capítulo - HTML responsive).</p>

<header>
  <h2>Ciudades</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Zaragoza</a></li>
      <li><a href="#">Madrid</a></li>
      <li><a href="#">Barcelona</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Zaragoza</h1>
    <p>Zaragoza es una ciudad y un municipio de España, capital de la provincia homónima y de la comunidad autónoma de Aragón. Con una población de 666.880 habitantes es la quinta ciudad más poblada de España.</p>
    <p>Está situada a orillas de los ríos Ebro, Huerva y Gállego y del Canal Imperial de Aragón, en el centro de un amplio valle. Su privilegiada situación geográfica la convierte en un importante nudo logístico y de comunicaciones.</p>
  </article>
</section>

<footer>
  <p>Pie de página</p>
</footer>

</body>

Ver ejemplo

CSS Flexbox

Flexbox es un nuevo modo de diseño en CSS3.

El uso de flexbox asegura que los elementos se comportan de manera predecible cuando el diseño de la página debe acomodar diferentes tamaños de pantalla y diferentes dispositivos de visualización.

Desventajas: no funciona en IE10 y versiones anteriores.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Plantilla CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Estilo para el header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Contenerdor para flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Estilo para el menú de navegación */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Estilo para la lista del menú de navegación */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Estilo para el contenido */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Estilo para el footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Diseño adaptable; hace que el menú y el contenido (dentro de la sección) se ubiquen uno encima del otro en lugar de uno al lado del otro */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>Diseño CSS Flexbox</h2>
<p>En este ejemplo, hemos creado un encabezado, dos columnas y un pie de página. En pantallas más pequeñas, las columnas se apilarán una encima de la otra.</p>
<p>Cambia el tamaño de la ventana del navegador para ver este efecto.</p>
<p><strong>Nota:</strong> Flexbox no está soportado in Internet Explorer 10 y anteriores versiones.</p>

<header>
  <h2>Ciudades</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Zaragoza</a></li>
      <li><a href="#">Madrid</a></li>
      <li><a href="#">barcelona</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Zaragoza</h1>
     <p>Zaragoza es una ciudad de España, capital de la provincia homónima y de la comunidad autónoma de Aragón. Con una población de 666.880 habitantes es la quinta ciudad más poblada de España.</p>
    <p>Está situada a orillas de los ríos Ebro, Huerva y Gállego y del Canal Imperial de Aragón, en el centro de un amplio valle. Su privilegiada situación geográfica la convierte en un importante nudo logístico y de comunicaciones.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

Vista de cuadrícula (grid) CSS

El Módulo de diseño de cuadrícula CSS ofrece un sistema de diseño basado en cuadrícula, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar floats y posicionamientos.

Desventajas: no funciona en IE ni en Edge 15 y versiones anteriores.

Obten más información sobre las cuadrículas (grids) CSS haciendo clic aquí.

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.