¿Menú cada botón de un color?
3 seguidores
Hola a todos:
Estoy haciendo una plantilla en css y tengo una botonera horizontal (ul li) dentro del header en la que quiero que cada botón sea de un color diferente y que al mismo tiempo todos conserven la posibilidad de tener varios estados.
He buscado por Internet pero no encuentro cómo hacerlo y todos los menús que me encuentro con css tienen todos los botones iguales ¿es que no se puede hacer?.
Gracias de antemano.
Ventd'Aval
claro que se puede... asignas un id a cada li (o 'a'), y declaras los diferentes colores para cada id... los demas estilos los puedes declarar comunes para todos ul.menu li {...}
Tambien puedes declarar los colores para cada li inline (atributo style), aunq en casi todos los casos, es mas guarro...
Usuario desconocido
Otra solucion que se me ocurre, y más experimental que otra cosa:
Te creas una imagen por ejemplo de 150px de alto. Y la divides en 3 filas de diferentes colores (si tienes 3 opciones en tu menú)
Esa imagen se la pones de fondo a la UL.
A los li les das una altura de 50px y les pones un color de fondo, el que necesites.
A los li:hover le pones fondo:ninguno, y listo calisto.
¿Qué os parece?
zigotica
yo eso no lo haría porque si el usuario cambia el tamaño de letra los colores de fondo no van a coincidir (o si, pero normalmente no)
ademas creo recordar que en IE no puedes quitarle el fondo con hover, si el elemento ya tiene color de fondo. deberia probarlo, no recuerdo ien.
aimaro
Muchas gracias por contestar. Como lo tengo metido en el div header, ¿tengo que asociarlo de alguna manera?. Es decir, ¿las clases de cada botón tienen que ir asociadas al header de alguna forma? (por ejemplo, la clase #azul)
zigotica
#azul sería <em>el</em> elemento con id azul
.azul sería <em>cualquier</em> elemento con class azul
aimaro
Ok, he conseguido que me coja el formato a los botones (color, texto...) pero por alguna extraña razón no consigo que funcionen los links de los botones (es decir, me aparece como texto estático) :-(
zigotica
es una obviedad, pero ¿has puesto los a href...?
aimaro
Lo tengo puesto tipo así:
<code><div>
<ul>
<li>
<a href="http://www.google.com">
</a>Trabajos</li>
</ul>
</div>
</code>
pero no sé si está correcto...
Ventd'Aval
<code><div>
<ul>
<li>
<a href="http://www.google.com">Trabajos</a>
</li>
</ul>
</div>
</code>
aimaro
Ups...vaya cagada :S
El caso es que ahora me coge el link pero me ha cambiado el estilo. Supongo que habrá otro en el css que esté interfiriéndolo porque tenga preferencia. Voy a investigarlo bien ;-) prometido.
Muchas gracias :D