[Ovillo] Estilo en <li>

Dom Jun 24 09:57:45 UTC 2007

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!!!
> 