| www.blogonautia.tk ©2007-2008
extraido de: FUENTE<----
30/4/08 - Ya hemos estudiado la aplicación de estilos CSS a listas en diversos artículos de DesarrolloWeb.com, en el
taller de CSS y en los distintos manuales que tenemos sobre la materia. En concreto, hay un artículo que vamos a completar con este otro taller de CSS, en el que vimos cómo
Crear una barra de navegación vertical con listas y CSS. En este caso veremos como crear una barra de navegación, pero en horizontal. Además veremos como alterar los estilos cuando se pasa el ratón por encima de los enlaces.
Básicamente, para crear una barra de navegación horizontal por listas, tenemos que conseguir que los elementos de la lista se pongan uno detrás de otro en la misma línea (el comportamiento normal de las listas es que aparezcan los elementos uno debajo del otro en distintas líneas). Además, cada elemento será un enlace y al pasar el ratón sobre ellos, debe resaltarse de alguna manera el elemento, lo que aportará el dinamismo a la barra de navegación. Todo esto se puede hacer con CSS. Veremos cómo a lo largo de este artículo.
Sería ideal
ver el resultado final del ejemplo en marcha antes de continuar.
Código HTML de la lista - Barra de navegaciónEl código HTML de la lista para hacer la barra de navegación es sencillo. La complejidad la reservaremos para las declaraciones de estilos.
<div id="navegador"><ul><li><a href="#">Elemento 1</a></li><li><a href="#">Elemento 2</a></li><li><a href="#">Elemento 3</a></li><li><a href="#">Elemento 4</a></li></ul></div>Como se puede comprobar, tenemos una capa llamada "navegador", que tiene el código de la lista, que en principio no necesita nada especial. Simplemente se colocarán los elementos LI deseados y un enlace dentro de cada uno.
Código CSS de la listaPrimero vamos a definir el estilo de la lista (etiqueta UL):
#navegador ul{ list-style-type: none; text-align: center;}Simplemente indicamos, con list-style-type: none;, que no se van a utilizar bolitas o marcas de ningún tipo al lado de los elementos de la lista.
Luego, para centrarla le asignamos text-align: center;
Ahora los estilos para cada uno de los elementos de la lista (etiqueta LI):
#navegador li{ display: inline; text-align: center; margin: 0 10px 0 0;}Esto indica varias cosas. Primero le damos un display: inline; para conseguir que los elementos se dispongan uno detrás de otro en la misma línea. Luego con text-align: center; volvemos a indicar que cada uno de los elementos tiene el texto centrado y por último con margin indicamos un margen entre los elementos.
Los estilos para los enlaces serían como estos:
#navegador li a { padding: 2px 7px 2px 7px; color: #666; background-color: #eeeeee; border: 1px solid #ccc; text-decoration: none;}Primero hacemos un padding: 2px 7px 2px 7px; para que el enlace tenga un poco de espacio a los lados. Esto nos vendrá también bien para que el área que se puede pinchar del enlace sea mayor. Luego marcamos el color del enlace con color: #666;, un fondo background-color: #eeeeee;, el borde border: 1px solid #ccc; y por último le quitamos el subrayado a los enlaces con text-decoration: none;.
Para acabar, utilizamos la pseudoclase hover para definir un estilo distinto cuando el ratón pasa por encima de un enlace.
#navegador li a:hover{ background-color: #333333; color: #ffffff;}Eso es todo! acabamos de terminar nuestra barra de navegación horizontal con listas y CSS.
Este es el código completo del ejemplo:<html><head><title>Barra de navegación horizontal con listas y estilos CSS</title><style type="text/css">#navegador ul{ list-style-type: none; text-align: center;}#navegador li{ display: inline; text-align: center; margin: 0 10px 0 0;}#navegador li a { padding: 2px 7px 2px 7px; color: #666; background-color: #eeeeee; border: 1px solid #ccc; text-decoration: none;}#navegador li a:hover{ background-color: #333333; color: #ffffff;} </style></head><body><div id="navegador"><ul><li><a href="#">Elemento 1</a></li><li><a href="#">Elemento 2</a></li><li><a href="#">Elemento 3</a></li><li><a href="#">Elemento 4</a></li></ul></div></body></html>Se puede
Ver el ejemplo en marcha en una página aparte.
Entradas
.gif)
0 @comentarios :
MUCHAS GRACIAS POR VISITAR MI BLOG, ACEPTO TUS CRITICAS Y COMENTARIOS QUE PUEDES EXPRESAR AQUI: