Foros del Web - Menu CSS con estados

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Menu CSS con estados (http://www.forosdelweb.com/f53/menu-css-con-estados-590165/)

Menu CSS con estados

Hola, que tal? Estoy tratando hace unos días de modificar un poco los colores de mi menu css pero no lo he logrado. He creado una clase "selected" para ponersela en cada sección del sitio correspondiente. Acá va el código así comprenden mejor:

Html:

Código:

<div id="buttons">

<ul>

<li><a href="/">Historia</a></li>

<li><a href="/">Contacto</a></li>

<li><a href="/">Recursos</a></li>

<li><a href="/">Links</a></li>

<li><a href="/">Galería</a></li>
 <li class="selected"><a href="/">Inicio</a></li>

</ul>

</div>

Css:

Código:

#buttons {

padding:1em;

height:1.5em;

color:#ffffff;

}

#buttons li {

float:right;

list-style-type:none;

white-space:nowrap;

}

#buttons li a {

display:block;

padding:0 5px;

font-size:1.2em;

font-weight:normal;

text-decoration:none;

background-color:inherit;

color: #ffffff;

}
 #buttons .selected {

color:green;

text-decoration:none;

}
 

#buttons a:hover{

color:red;

text-decoration:none;

}

El problema es que no me funciona la clase selected, le puse color:green como para ver la diferencia pero no anda.
Espero que me puedan ayudar.

Saludos Y Muchas gracias

PD: www.cincomasdos.com.ar/DEMO2/index.html

Respuesta: Menu CSS con estados

Creo que debes dar la clase a la ancla, pues está dentro del li, y por tanto sus características lo sobreescriben. Suerte!

Respuesta: Menu CSS con estados

Cita:

Iniciado por daPhyre (Mensaje 2420145)

Creo que debes dar la clase a la ancla, pues está dentro del li, y por tanto sus características lo sobreescriben. Suerte!

He probado cambiando a

Código:

#buttons li a .selected {

color:green;

text-decoration:none;

}

pero no se soluciona. Alguna ayudita??

Respuesta: Menu CSS con estados

Me refería a esto:

Código HTML:

<li><a class="selected" href="/">Inicio</a></li>

Y otro detalle, no se muy bien como funcionen las clases dentro de los identificadores. Si no funciona, prueba primero sin todo lo que precede a .selected en el CSS. Suerte!

Respuesta: Menu CSS con estados

Cita:

Iniciado por juampick (Mensaje 2420157)

He probado cambiando a

#buttons li a .selected {
color:green;
text-decoration:none;
}

pero no se soluciona. Alguna ayudita??

Hola, juampick.

Está mal puesto. Debe ser

#buttons li.selected a {
color:green;
text-decoration:none;
}

Pruébalo a ver.

Mikel.

Respuesta: Menu CSS con estados

Cita:

Iniciado por Mikmoro (Mensaje 2420216)

Hola, juampick.

Está mal puesto. Debe ser

#buttons li.selected a {
color:green;
text-decoration:none;
}

Pruébalo a ver.

Mikel.

Increible, perfecto Mikel!
Ando hermoso. Ahora entiendo por qué no funcionaba era un "pequeñísimo error". Otra consultita: se puede hacer que en el hover haya como una especie de transición entre 2 colores en loop?? .
Espero que me entiendas.

Gracias

Respuesta: Menu CSS con estados

No, lo siento, no sé qué quieres decir.

Mikel.

Respuesta: Menu CSS con estados

Disculpa mi falta de expresión. Quiero saber cómo se puede hacer para modificar mi boton para que sea igual que ahora solamente que en el estado hover en vez de ser asi:

Código:

#buttons a:hover{

color:red;

text-decoration:none;

}

realice en vez de un cambio de color a red haga una transición de colores, es decir vaya entre un amarillo y azul por ejemplo. Me explico ahora?
Hay alguna forma? o tendría que realizarlo con imagenes?

Saludos y muchas gracias por el interés

Respuesta: Menu CSS con estados

No lo sé al cien por cien, pero estoy casi seguro de que no es posible. Eso tendrías que hacerlo con un gif, en el que hagas la transición en dos o más escenas.

Mikel.