Hola Juan José,
Si lo que quieres es un elemento fijo (el que marcas como activo) que se
muestre en un color distinto, es cuestión de cómo has escrito el
selector:
.menu li #activo
en lugar de
.menu ul li #activo
una sutil diferencia, pero el <li> es hijo de <ul> y no del div marcado
como "menu".
Si lo que quieres es que los enlaces sean los que marquen el cambio de
estado, entonces tienes que:
1.- definir los elementos enlace con display: block para que
ocupen todo el ancho del elemento que los contiene (el <li> en
este caso)
a { display: block;}
2.- definir las características específicas para cada estado del
enlace, por ejemplo:
a:link { background-color: #fff; }
a:visited { background-color: #000; }
a:hover { background-color: #f00; }
a:active { background-color: #f00; }
si además has atribuido una clase a este tipo de enlaces, podrás
especificar que este comportamiento sólo se aplique a los
elementos enlace de la clase especificada (en este ejemplo menuA
para que no entre en conflicto con lo que definiste para menu).
a.menuA:link { background-color: #fff; }
a.menuA:visited { background-color: #000; }
a.menuA:hover { background-color: #f00; }
a.menuA:active { background-color: #f00; }
Espero serte de ayuda.
Un saludo y felicidades por el santo ;)
Victoria
El sáb, 23-06-2007 a las 18:45 -0300, Juan José Montes de Oca Arbós
escribió:
> Buenas a todos, quería consultarles algo...
>
> Tengo un menú armado con una lista desordenada. Dicho menú tiene 3
> elementos, y quiero que el que esté seleccionado actualmente, tenga un color
> de fondo diferente a los demás. Para esto, cree un estilo que se llama
> "activo", y que modifica el color de fondo.
>
> El problema lo tengo porque no funciona... cree un estilo para ".menu li"
> que define como tienen que ser los <li>, y después arme otro estilo que
> indica como se tiene que comportar ".menu li #activo", y sin embargo, no lo
> aplica... ¿en que me estoy equivocando? ¿Está mal armada la estructura
> ".menu li #activo"?
>
> El código es el siguiente:
>
> <html>
> <head>
> <style>
> * {
> padding: 0px;
> margin: 0px;
> }
>
> body {
>
> }
>
> .menu {
> padding-top: 23px;
> margin-left: 7px;
> float: left;
> width: 180px;
> }
>
> .menu li #activo {
> background-color: #b5edbc;
> padding: 3px 8px;
> width: 100%;
> }
>
> .menu li {
> background-color: #ffead5;
> padding: 3px 8px;
> width: 100%;
> }
> </style>
> </head>
> <body>
> <div class="menu">
> <ul>
> <li id="activo">
> <a href="http://www.montesoft.com.ar";>Home</a></li>
> <li>
> <a href="http://www.montesoft.com.ar/perfil.aspx
> ">Perfil</a></li>
> <li>
> <a href="http://www.montesoft.com.ar/productos.aspx
> ">Productos</a></li>
> </ul>
> </div>
> </body>
> </html>
>
> Muchas gracias!!!
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
