metal.ize

El CSS

Y bueno, la idea principal es posicionar relativamente nuestro contenedor (en este caso, nuestro <li>) y dentro posicionar el <a> absolutamente; ajustarlo al ancho y alto del <li>, ponerlo transparente y darle un efecto :hover al <li> mismo. ¿Suena complicado? Vamos por pasos.

Primero daremos estilo al <ul> y al <li> al cual posicionaremos absolutamente. También le estoy dando un ancho fijo, pero puede ser un porcentaje sin problemas.

Ahora vamos a aprovechar que le dí una clase diferente a cada li para poder darle un color de fondo y un borde. También usaré la pseudo-clase :hover para que, al momento de pasar el mouse sobre nuestro <li>, este cambie de color y obtengamos ese efecto que queremos.

Bien. Ahora vamos a darle estilo a los elementos que tenemos dentro de nuestros <li>. Esto es, el <h3> y el <p>:

Nada ostentoso; pero ustedes pueden dejar volar su imaginación: Ahora si, vamos a lo importante: el anchor. A este elemento lo vamos a mostrar como bloque, lo posicionaremos absolutamente y vamos a ocultar el texto utilizando text-indent. También me aseguraré de que no tenga ningún fondo usando background: none:

El ancho puede ir en porcentaje, pero recomiendo usen pixeles (por IE6).

Arreglar el Código para IE6

Si todo fuera bello y utópico, habríamos terminado; pero como vivimos en un mundo donde la gente utiliza miles de navegadores diferentes, debemos arreglar un poco nuestro código para que sea compatible con los demás navegadores.

Me centraré en IE6. ¿El problema con IE6? En realidad son dos:

1. La pseudo-clase :hover no funciona sobre ningún elemento que no sea un <a>. Por este motivo, el efecto de cambio de color, y por lo tanto, el indicador de que la caja es un link, desaparece.
2. Internet Explorer no sabe cómo manejar height: 100%, pues el elemento padre (el <li>) no tiene un alto especificado (es tonto, lo sé). Por este motivo, solo muestra el alto que considera necesario; esto es; el alto de tu line-height (pues el hipervínculo es solo una línea de texto).

Molesto ¿Cierto? Pero igual, IE6 sigue siendo MUY usado, y estoy seguro que otros navegadores con un soporte equitativamente patético sobre el modelo de caja andan por ahí, navegando la web. Así que vamos a salvar a los pobres usuarios de estos navegadores.

Hay una forma de arreglar el segundo error: simplemente darle un alto al contenedor. Pero aquí estoy asumiendo que el texto es dinámico, por lo que no es una opción. También podría usar javascript; pero si está desactivado el usuario de dicho navegador seguiría sin un link apropiado. En lugar de intentar darle el mismo efecto a IE6 me decidí por darle un estilo alternativo; pero igual atractivo y funcional.

Lo que tenemos en este momento en IE6 es un anchor de 255px y 1EM de alto posicionado arriba y a la izquierda de nuestro <li> sin un efecto hover que nos ayude. Para mostrar el link y, al mismo tiempo, darle un efecto hover a la caja, usaré una imagen:

Bonita flechita ¿que no? Esta flechita la pondré como fondo del anchor; pero solo para IE6 y hacia abajo; con la esperanza de que el usuario deduzca que se trata de un hipervínculo. Tiene dos flechitas, una para el estado normal y una para el hover. Solo es cuestión de usarla de imagen de fondo del anchor, ponerla a la derecha y cambiar la posición de la misma al pasar el mouse sobre el anchor. El código queda así:

Con esto, usuarios de IE6 e IE5.5 (los dos que probé) tienen un indicador de un hipervínculo y un estado :hover. Quiza no es perfecto, y causaría algunos problemas al desactivar las imagenes; pero es lo más cercano que pude llegar a una solución casi perfecta.

Les dejo el demo de las cajas con links. Pueden desactivar las hojas de estilo para que vean que sigue siendo semántico y entendible; visitarlo en IE6 para que vean el efecto y en IE7, Firefox u Opera para ver los links como debieran ser. ¡Espero les sea útil!

Páginas: 1 2 3