El rincon del krilbert

Ya tenía ganas de inaugurar la categoría de CSS y no sabía con que empezar y en eso, como por obra del espíritu santo me preguntó un amigo que como podía hacer menus horizontales con ancho fijo con CSS y dije... de aquí soy! hagamos un post.

La intención de este post es que aprendamos a hacer menús horizontales de forma semántica y para el fondo utilizar la técnica de posicionamiento de fondo.

¿Qué es eso de posicionamiento de fondo?
Cuando uno empieza en este mundo del CSS vemos que podemos utilizar hover para cambiar el estilo cuando se pasa el mouse por arriba, y al hacer nuestros menús lo que hacemos es establecer una imagen para el estado "normal" y poner otra imagen para cuando se pase el mouse arriba, hasta aqui puede que digas mi menú esta perfecto, funciona a la perfección pero... si nos fijamos bien ocurre un parpadeo producto de que al pasar el mouse empieza a cargar la imagen y la despliega, ya que la imagen esta en la cache ya no vuelve a repetirse pero... ¿qué no el chiste es hacer webs de calidad?

La técnica de posicionamiento de fondo consiste en utilizar una única imagen para ambos estados, al hacer esto abres la página y carga la imagen por completo, de esta forma:
1) evitas tener muchas imagenes (innecesarias)
2) ahorras líneas de código en CSs (innecesarias)
3) le da más presentación a tu web (ya que se carga por completo cuando debe hacerlo)

Para este ejemplo hice esta imagen de 150x50, donde los primeros 25px (verticales) serán para el estado normal y los últimos 25px serán mostrados cuando el usuario pase el mouse encima del menú.


¿Menús horizontales de forma semántica?

La silla come mucho despues de las seis

¿Qué? ¿eso no tiene sentido?.... ¿y porque no? yo veo claramente un artículo, sustantivo, verbo, etc... la frase esta bien estructurada sintacticamente, sin embargo semánticamente no. Algo así pasa en la web y es una de las cosas que nos ha traido la tan nombrada WEB 2.0 definamos las cosas como deben de ser.

¿Qué es un menú?
Para terminar rápido un menu es un listado de links, por consiguiente y para que sea semanticamente correcto debemos hacerlos con listas ya sea ordenadas o desordenadas (tags UL y OL). Esto lo aclaro porque mucha gente (por comodidad tal vez) hace sus menús utilizando tablas pero las tablas deberíamos utilizarlas solamente para desplegar cierto tipo de información que requiera de varias columnas y filas por ejemplo, un listado de productos y sus precios, usuarios y sus nombres de usuarios, etc...


Weno... hasta ahorita espero haberme explicado bien, así que empecemos a hacer nuestro menú semanticamente correcto


Creando nuestro menú con ancho definido

Lo primero que hacemos entonces será nuestro listado de links y de una vez le especificamos que tendrá el estilo "menu".

Code:


Ahora vamos a establecer el estilo de menú Lo que vamos a hacer es quitarle las viñeta y flotar cada uno de los elementos de la lista para que aparezcan de forma horizontal, esto lo hacemos con este código cSS:

Code:

Ahora vamos a definir los links (a) que sean parte del listado (li) de nuestro menu (.menu).

Primero le decimos que serán mostrados como bloques display:block, de esta forma el tag A actuará como lo hace un DIV lo cual nos da muchas ventajas en nuestro menú, por ejemplo, para hacer click no solo será en el nombre sino en todo el renglon donde este el link, tambien podremos establecerle el ancho y alto (de otra forma no se podría).

Ya que lo tenemos como bloque le vamos a establecer nuestra imagen de fondo (la que les puse arriba), y utilizaremos la notación corta para esto. Entonces primero le establecemos el color de fondo que queremos (un gris parecido al de nuestra imagen para que aparezca asi mientras carga la imagen), despues el url de nuestra imagen y le ponemos top left no-repeat para que dibuje la imagen desde arriba a la derecha y no se repita como mosaico, es decir que la ponga como si utilizaramos el tag IMG.

Ahora ponemos un borde de 1px de estilo solido (linea continua) y con un color como el de la imagen pero mas oscuro.

Lo unico que nos faltaria es establecer el alto y ancho y le ponemos 100px de ancho y 25px de alto (conforme a la imagen que vamos a utilizar.

¿Recuerdan que le pusimos que no se repitiera? Ok ahora establecimos un ancho de 100px y nuestra imagen es de 150px ¿qué pasará si necesitamos un ancho más grande? no se tal vez 200px porque alguno de nuestros links tiene mucho texto, en este caso no se imprimira todo el fondo, solo hasta 150px.

Aqui lo que tendriamos que hacer es quitar el no-repeat y cambiarlo por repeat-x de esta forma los navegadores van a imprimir el fondo solo horizontalmente y quedará bien nuestro menú.

El código y lo que resulta queda de la siguiente manera:

Code:

¿Pinta bien nuestro menú no creen? sin embargo aun esta estático, vamos a decirle que hacer cuando se pase el mouse encima (posicionamiento de imagen de fondo).

Aqui lo que haremos será decile que cuando pase el mouse, ponga la misma imagen que tenia antes pero movido 25 pixeles hacia arriba, con esto haremos que la parte gris no se vea y solo mostrará la parte naranja dando el efecto de roll over. Entonces los parametros de background son: el url, definimos que no se repita, la posicion de la imagen (siendo el primer valor su posicion horizontal y el segundo la vertical).

Nota 1: Al igual que cuando establecimos el fondo pasado, si requieres que el ancho sea mayor recuerda cambiar el no-repeat por repeat-x.

Nota 2:Si te fijas aqui ya no le estamos diciendo que lo ponga hasta arriba hasta la derecha top left, si lo haces (por lo general se hace un copy paste del anterior xD) asegurate de quitarlos.

Aqui el código de esta sección con su respectivo resultado:
Code:


Voilà ! tenemos nuestro menú horizontal con anchos definidos weno... a decir verdad aun no, falta un pequeñisimo detalle, flotamos las partes del menú, lo que significa que si escriben algo, no aparecerá abajo del menú sino a su derecha. Aqui un ejemplo:


Esto lo arreglamos con el clear:both de CSS. Esto es algo que se necesita mucho cuando trabajas semanticamente porque por lo general "flotas" muchas cosas, asi que voy a hacer un class separador que solo contenga la instruccion clear:both; y abajo del menú se la pongo en un div.


Ahora si ya esta, terminamos, solo faltaría darle estilo a la letra, colores, etc... pero ahi ya es para que ustedes le pongan de su cosecha aqui les dejo el código completo con unas modificaciones en la letra y el resultado final

Code: