El día 10/01/07, Martin Sarsale <[EMAIL PROTECTED]> escribió:
>
> [EMAIL PROTECTED]:
>
> Tengo un menu de navegacion en un <ul>, cada item es un <li>. Ahora,
> quiero mostrar imagenes en vez de textos ahi, cual es la manera
> correcta de markupearlo?
>
> 1) <li><a href='/home'><img src='home.png' alt='home' /></a></li>
>
> 2) <li><a href='/home' title='home'><img src='home.png' /></a></li>
>
> 3) <li><a href='/home' id='home'><span>Home</span></a></li>
> y un estilo:
> #home {
> background-image: url("home.png");
> ...
> }
> #home span{
> display:none;
> }
>
>
> Creo que la mas correcta es 3), no? me parece que 2) es la que le
> sigue, pero es incorrecto que aparezca una imagen en el sitio que no
> agrega informacion. 1) definitivamente es la peor.
>
> Algunas respuestas? algunas pistas? algunos links?


Si, la tres es la que tiene mas onda.
Pero  ponerle display:none causa que algunos lectores de pantalla no lean el
texto, según tengo entendido, entonces la forma más linda que yo conozco es:
<li class="itemHome">Home</li>

li {
text-indent: -5000em;
}

li.itemHome {
background: url(../images/menuHome.png);
}

Hace un tiempo había leído una página con todas las técnicas de image
replacement, y recomendaban esta, lamentablemente no recuerdo el link.

Suerte!

Martín.


gracias! :)
> --
> Martin Sarsale - [EMAIL PROTECTED]
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a