Javier Barcelona escribió:
> Hola a todas y todos.
>
> A ver si me explico y que se me entienda :-)))
>
> Tengo el siguiente código XTHML:
>
> <div id="container">
> <div id="leftmenu"></div>
> <ul id="navbar">
> <li><a href="tienda.html">Tie<strong class="resaltada">n</
> strong>da</a></li>
> <li><a href="colecciones.html">Colecci<strong
> class="resaltada">o</strong>nes</a></li>
> <li><a href="novedades.html">Nov<strong class="resaltada">e</
> strong>dades</a></li>
> <li><a href="contactar.html">Cont<strong class="resaltada">a</
> strong>ctar</a></li>
> </ul>
> </div>
>
> Con este CSS:
>
> #navbar {
> margin-top:170px;
> color:#C90;
> list-style:none;
> margin-left:235px;
> font-size:1.2em;
> }
>
> #navbar li {
> float:left;
> display:block;
> margin-left:10px;
> padding:0 4px 0 4px;
> }
>
> .resaltada {
> color:#666;
> text-decoration:underline;
> }
>
> .resaltada a:hover {
> text-decoration:none;
> }
>
> Como veis una letra de cada elemento del LI tiene un estilo diferente
> que podéis revisar en el CSS como ".resaltada". Mi idea es que al
> pasar el ratón por encima el estilo de esa letra cambie al estado que
> reflejo en ".resaltada a:hover", pero esta claro que algo no hago bien
> porque no lo logro.
>
> ¿Qué hago mal?
>
Hola,
La mayor parte de los problemas con css vienen porque el selector no es
correcto, es decir, poner un selector mal, es como poner mal la ruta de una
imagen, pero además está el problema de la especificidad, es decir, si hay
alguna orden que esta siendo más especifica, es la que prevalece.
En esto que tu propones, lo primero es que hay un pequeño problema técnico,
porque pretendes que una pseudo clase funcione sobre un elemento strong y
eso no funciona en Explorer 6, así que habría que darle una vueltas, porque
por otro lado, a nivel de marcado, no le veo el sentido esa etiqueta strong
que pones, que corresponde más bien a su aspecto que a su significado.
De todas formas, en cuanto al selector, tu tienes una etiqueta strong con la
clase resaltada dentro de a y en este código que envías ( no se como ha
quedado después de todas las respuestas, así que me atengo al inicial) estas
pidiéndoles que cambien a las etiquetas <a> que estén dentro de la clase
.resaltada. Eso en html seria <a href="tienda.html">Tie<strong
class="resaltada"><a>n</a></strong>da</a> que no siendo correcto a nivel de
marcado, si te solucionaría el problema de Explorer 6.
El selector en css para el html que tenías debería ser:
a strong.resaltada:hover pero la pseudo clase hover se la estás aplicando a
un elemento diferente a a y como ya te he dicho, Explorer 6 no lo entiende.
Por otro lado, optimizando tu css, la clase .resaltada no hace falta,
podrías evitarla poniendo este selector: #navbar li a strong.
Espero que hayas entendido mi explicación, en cualquier caso la respuesta a
lo que preguntas: "que hago mal?" es: estas poniendo el selector
incorrectamente.
En mi opinión te estás liando y yo creo que lo mejor que puedes hacer para
solucionar un problema que parece sobre todo gráfico, es sustituir mediante
css los textos (quitándoles el strong) por imágenes con aquella letra
cambiada, que van a quedar mejor.
Saludos
Rafa
biosfera 4
diseño y desarrollo web
http://www.biosfera4.com
_______________________________________________
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
