comparte el articulo 

Utilización de listas en la maquetación de páginas web

Actualizado el 03/01/2011 < > 0 Comentarios

Resumen: Las listas son elementos muy dúctiles para la maquetación de diferentes elementos de una página web, y para muchos de ellos, lo más correcto desde el punto de vista semántico.

Cuando comenzamos a explorar las posibilidades de la maquetación de páginas web, dentro de los primeros elementos que aprendemos a manejar se encuentran las listas. Por supuesto que la generación de listas ordenadas y no ordenadas dentro de los textos es algo frecuente, pero no es para lo único que se emplean las etiquetas ul y ol junto con los ítems de lista li.

En esta misma página encontrarán algunos ejemplos de menús realizados con listas, y es semánticamente correcto, ya que los menús son listas de enlaces. Algunos de estos ejemplos citados son:

Siguiendo los pasos indicados en estos tutoriales, podremos realizar menús de navegación empleando listas no ordenadas y sus ítems (ul y li). Pero además de estos menús, podemos realizar otras tareas empleando listas, dada la gran versatilidad de este tipo de elementos. Podemos hacer que los ítems de una lista se comporten como elementos flotantes, como bloques o elementos de línea, mediante la utilización de las propiedades “float” y “display”, versatilidad que puede aumentarse al hacer que los ítems sean enlaces y modificar las propiedades de los mismos.

Las listas son tan útiles que, aún siendo semánticamente incorrecto, podríamos maquetar una página empleando únicamente listas. Pero para demostrar las posibilidades que tienen las listas en la maquetación, debemos mostrar algunos ejemplos, además de los menús que ya hemos citado. En esta misma página encontrarán los siguientes ejemplos:

En los siguientes ejemplos, podremos ver otras formas de aplicar las listas en el maquetado de páginas web.

Listas o menús de varias columnas

Las listas o los menús pueden construirse siguiendo muchas formas. En el siguiente ejemplo, se han dispuestos los ítems como si se tratara de una tabla con enlaces. Para ello solo utilizaremos una lista no ordenada.

Listas para maquetación de páginas web

Este ejemplo puede utilizarse como forma de crear menús o calendarios. Su implementación es muy simple, ya que los diferentes elementos li son flotantes, y su ordenamiento se debe a que la caja contenedora tiene dimensiones tales que solo permite que se ubiquen tres ítems en cada fila, ordenándose tres más en la siguiente fila. Es importante destacar que cada ítem tiene todos los bordes negros de 1 pixel, pero como se ha dado margen de -1px arriba y a la derecha, no aparecen los bordes duplicados. Los códigos del presente ejemplo son los siguientes:

<div id="menu-a">
  <ul>
    <li><a href="#">Uno</a></li>
    <li><a href="#">Dos</a></li>
    <li><a href="#">Tres</a></li>
    <li><a href="#">Cuatro</a></li>
    <li><a href="#">Cinco</a></li>
    <li><a href="#">Seis</a></li>
    <li><a href="#">Siete</a></li>
    <li><a href="#">Ocho</a></li>
    <li><a href="#">Nueve</a></li>
  </ul>
</div>

div #menu-a {
width: 160px;
background: #ccc;
margin: 50px auto;
}

#menu-a ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu-a ul li {
float: left;
background: #ddd;
width: 150px;
height: 50px;
border: solid 1px black;
margin: -1px -1px 0 0;
}

#menu-a ul li a {
color: #777;
text-decoration: none;
font: normal 13px arial;
display: block;
line-height: 50px;
width: 50px;
text-align: center;
}

#menu-a ul li a:hover {
color: black;
background: #c4c4c4;
}


Viñetas con imágenes

Para decorar un menú o una lista, pueden emplearse imágenes de fondo de forma tal que parezcan viñetas utilizando la imagen que se desee. A continuación mostramos un ejemplo de un menú sencillo.

Listas en la maquetación de páginas web

Este tipo de decoraciones puede utilizarse en muchas formas y para otras utilidades, además de los menús, como es el caso del ejemplo. En los ejemplos que hemos citado con anterioridad, se emplean mucho las imágenes de fondo, no solo para lograr efectos decorativos, sino también de modo de mejorar la usabilidad de los menús, diferenciando el estado de los diferentes ítems.

Para que puedan ejercitarse y hacer las modificaciones que crean pertinentes, les dejamos los códigos del ejemplo anterior:

<div id="menu-b">
  <ul>
    <li><a href="#">ítem uno</a></li>
    <li><a href="#">ítem dos</a></li>
    <li><a href="#">ítem tres</a></li>
    <li><a href="#">ítem cuatro</a></li>
    <li><a href="#">ítem cinco</a></li>
  </ul>
</div>
div #menu-b  {
  margin: 50px auto;
  }
  
#menu-b ul {
  list-style: none;
  }
  
#menu-b ul li {
  margin: 0 10px;
  float: left;
  }
  
#menu-b ul li a {
  background: url(http://i814.photobucket.com/albums/zz70/anfergon/boton1.jpg) no-repeat left;
  font: normal 15px arial;
  color: black;
  text-decoration: none;
  padding: 5px 5px 5px 15px;
  border-bottom: solid 5px #ccc;
  }
  
#menu-b ul li a:hover {
  color: #f00;
  border-color: #f00;
  background: url(http://i814.photobucket.com/albums/zz70/anfergon/boton3.jpg) no-repeat left;
  }

Publicado el 03/01/2011, última actualización 03/01/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras