Boton Css con Imágenes PNG

[juampick]

Hola a TODOS! acá estoy tratando de hacer funcionar una botonera que al no tener la posibilidad de usar fuentes raras decidí hacerla con imágenes png transparentes. Este es el sitio: www.cincomasdos.com.ar/DEMO2/index.html. (Solamente hice las imágenes para el boton de HOME, porque era solo una prueba).
El problema que tengo es que las imágenes son de 62x53 px ambas pero cuando el hover la quiere "tapar" se posiciona en otro lugar.
El código html es el siguiente:

Código:

<li>img src="home.png" alt="homebtn" /></a></li>

y el css:

Código:

#buttons a:hover{
*/color:#FFCB22;
font-size:1.5em; ESTA COMENTADO PORQUE ANTES TENIA TEXTO
text-decoration:none;*/
background-image:url('home hover.png');
background-repeat:no-repeat;
}

Css completo: www.cincomasdos.com.ar/DEMO2/ccslink1.css
Cómo soluciono esto?? Otro problema que tiene es que en Firefox aparece un recuadro en este caso azul que al tener el hover se cambia a naranja. Le coloqué border:0; pero no funcionó.

Muchas gracias desde ya y espero que me puedan dar una mano

[geek08]

hola juampick,
mira yo haria esto:
#buttons {
background:url('home.png') no-repeat; //la imagen comun
width:62px;
height:53px;
}
#buttons:hover {
background:url('home_hover.png') no-repeat; //la imagen con hover
width:62px;
height:53px;
}
fijate si asi anda.. suerte!

[juampick]

Gracias por tu ayuda. Algo pude solucionar. EL html lo resolví así:

Código:

<li class="btnhistoria"><a href="historia.html"></a></li>
<li class="btncontacto"><a href="contacto.html"></a></li>
<li class="btnrecursos"><a href="recursos.html"></a></li>
<li class="btnlinks"><a href="links.html"></a></li>
<li class="btngaleria"><a href="galeria.html"></a></li>
<li class="btnhomevisited"><a href="index.html"></a></li>

(cambiando la clase para cada subpágina, el actual es para index.html)

y el css:

Código:

#buttons li.btnhomevisited a {
background-image:url('home visited.png');
background-repeat:no-repeat;
width:60px;
height:15px;
}
#buttons li.btnhome a {
background-image:url('home.png');
background-repeat:no-repeat;
width:60px;
height:15px;
}
#buttons li.btnhome a:hover {
background-image:url('home hover.png');
background-repeat:no-repeat;
width:60px;
height:15px;
}

(De 1 solo botón para no poner de todos ya que son similares.

El problema (aparte de que tendría que hacer de nuevo las imágenes porque están un poco grandes) es que en Internet Explorer (Como siempre con problemas) se ve de un color clarito como beige el transparente de las imágenes que NO se tendría que ver. Otra cosa es que me parece que es como que tardan en IE en cargar las imágenes. Pesan entre 2-20kb. Hay alguna otra solución??
Mi idea de usar como recursos las imágenes fue porque la fuente que me pidieron que use para la página es muy rara y practicamente ninguna la persona la tendría (Es la AndrewScript). Qué harían uds? o cómo puedo solucionar estos problemas?.

Espero que me puedan dar una mano. Saludos

[Mikmoro]

Mira, yo en tu lugar lo haría así:

En primer lugar haces una imagen con los tres estados del botón:



Luego pones una clase a cada enlace:

<a href="#" class="historia"></a>

Y ahora muestras cada estado del botón poniendo la imagen como fondo y mostrando sólo la parte que te interesa usando las posiciones de fondo:

.historia {background: url(img/historia.jpg) no-repeat; center top}
.historia:visited { background-position: center bottom;}
.historia:hover { background-position: center;}

Es mucho más sencillo y económico porque puedes agrupar en un selector de posición todos los botones en la css de esta manera:

.historia:hover, home:hover, links:hover {...etcétera

Mira este ejemplo.

La imagen es cutre porque la he hecho sin cuidado, pero bien hecho es una buena solución, para todos los navegadres y sin retardo de carga de imágenes. Mírate el código fuente y supongo que lo verás enseguida.

Mikel.

[juampick]

Iniciado por Mikmoro

Mira, yo en tu lugar lo haría así:

En primer lugar haces una imagen con los tres estados del botón:



Luego pones una clase a cada enlace:

<a href="#" class="historia"></a>

Y ahora muestras cada estado del botón poniendo la imagen como fondo y mostrando sólo la parte que te interesa usando las posiciones de fondo:

.historia {background: url(img/historia.jpg) no-repeat; center top}
.historia:visited { background-position: center bottom;}
.historia:hover { background-position: center;}

Es mucho más sencillo y económico porque puedes agrupar en un selector de posición todos los botones en la css de esta manera:

.historia:hover, home:hover, links:hover {...etcétera

Mira este ejemplo.

La imagen es cutre porque la he hecho sin cuidado, pero bien hecho es una buena solución, para todos los navegadres y sin retardo de carga de imágenes. Mírate el código fuente y supongo que lo verás enseguida.

Mikel.

Hola!!! La verdad Mikel te pasaste! espectacular tu explicación y tu ejemplo, creo que lo he comprendido y hice las imágenes y me parece que salieron. Tengo 1 problemita: quiero que los botones queden un poco separados entre si xq ahora estan casi pegados. Mira para comprender mejor: www.cincomasdos.com.ar/DEMO2/index.html
y también estaría bueno y aprovechar el ancho del header y hacer 2 filas de botones, 1 con 3 y la otra con 3 tmb. Como podría hacer esto?

(La única página que está acomodada con los botones nuevos es index.html)

La única modificación que hice fue crear una clase para visited (yo a eso lo llamo cuando estamos situados en esa página, me entendes?)
Es decir las clases: homev, galeriav, contactov, recursosv, linksv, historiav son cuando las páginas estan cargadas en "ACTIVE".
Acá te dejo el html final y el css:

html:

Código:

<li><a href="historia.html" class="historia"></a></li>
<li><a href="contacto.html" class="contacto"></a></li> 
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="links.html" class="links"></a></li>
<li><a href="galeria.html" class="galeria"></a></li> 
<li><a href="index.html" class="homev"></a></li>

css:

Código:

/*-------------------------------------- Buttons -------------------------------------------------------------------*/
#buttons {
padding:1em;
height:1.5em;
color:#2955C7;
font-family:sans-serif;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
}
/* ----- HOME ----- */
#buttons li a.home {
color:#87C1F1;
display:block;
height:28px;
width:62px;
}
#buttons li a.homev {
color:#87C1F1;
display:block;
height:28px;
width:62px;
}
.home {
background: url('home.jpg') no-repeat; 
background-position:center top;
}
.homev { 
background: url('home.jpg') no-repeat;
background-position: center bottom;
}

/* ----- GALERIA ----- */
#buttons li a.galeria {
color:#87C1F1;
display:block;
height:48px;
width:87px;
}
#buttons li a.galeriav {
color:#87C1F1;
display:block;
height:48px;
width:87px;
}
.galeria {
background: url('galeria.jpg') no-repeat; 
background-position:center top;
}
.galeriav {
background: url('galeria.jpg') no-repeat; 
background-position:center bottom;
}
/* ----- CONTACTO ----- */
#buttons li a.contacto {
color:#87C1F1;
display:block;
height:28px;
width:105px;
}
#buttons li a.contactov {
color:#87C1F1;
display:block;
height:28px;
width:105px;
}
.contacto {
background: url('contacto.jpg') no-repeat;
background-position:center top;
}
.contactov {
background: url('contacto.jpg') no-repeat;
background-position:center bottom;
}
/* ----- RECURSOS ----- */
#buttons li a.recursos {
color:#87C1F1;
display:block;
height:28px;
width:108px;
}
#buttons li a.recursosv {
color:#87C1F1;
display:block;
height:28px;
width:108px;
}
.recursos {
background: url('recursos.jpg') no-repeat;
background-position:center top;
}
.recursosv {
background: url('recursos.jpg') no-repeat;
background-position:center bottom;
}
/* ----- LINKS ----- */
#buttons li a.links {
color:#87C1F1;
display:block;
height:28px;
width:55px;
}
#buttons li a.linksv {
color:#87C1F1;
display:block;
height:28px;
width:55px;
}
.links {
background: url('links.jpg') no-repeat;
background-position:center top;
}
.linksv {
background: url('links.jpg') no-repeat;
background-position:center bottom;
}
/* ----- HISTORIA ----- */
#buttons li a.historia {
color:#87C1F1;
display:block;
height:28px;
width:98px;
}
#buttons li a.historiav {
color:#87C1F1;
display:block;
height:28px;
width:98px;
}
.historia {
background: url('historia.jpg') no-repeat;
background-position:center top;
}
.historiav {
background: url('historia.jpg') no-repeat;
background-position:center bottom;
}
/* ----- GENERALES .HOVER ---- */
.home:hover, .galeria:hover, .contacto:hover, .recursos:hover, .links:hover, .historia:hover { background-position: center;}

Muchas gracias nuevamente y espero tu respuesta!!

[Mikmoro]

Mi opinión es que en lugar del visited que dices, cambies esa clase por esta otra:

.historia.activo { background-position: center bottom;}

y ahora, cuando ese botón está activo, le asignas class="historia activo"

de esa manera sigues teniendo sólo tres selectores por botón.

El otro asunto lo miro esta tarde.

Mikel.

[Mikmoro]

Bueno, creo que la mejor manera de hacer esto super económico es esta:

.historia {background: url(historia.jpg) no-repeat; center top}
.contacto {background: url(contacto .jpg) no-repeat; center top}
.recursos {background: url(recursos .jpg) no-repeat; center top}
.links {background: url(links .jpg) no-repeat; center top}
.galeria {background: url(galeria .jpg) no-repeat; center top}
.home {background: url(home .jpg) no-repeat; center top}
a.activo { background-position: center bottom;}
a:hover { background-position: center;}
</style>
</head>
<body>
<div id="menu">
<li><a href="historia.html" class="historia"></a></li>
<li><a href="contacto.html" class="contacto"></a></li>
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="links.html" class="links"></a></li>
<li><a href="galeria.html" class="galeria"></a></li>
<li><a href="index.html" class="home activo"></a></li></div>
</body>

Mikel.

[Mikmoro]

Lo de las dos filas, mira a ver si te gusta añadiendo estos dos selectores:

#buttons ul {width: 500px;float: right;margin-right: 60px;}

#buttons li {float:right; list-style-type:none; white-space:nowrap;margin-left: 60px;margin-top: 4px;}

Mikel.

[juampick]

Iniciado por Mikmoro

Lo de las dos filas, mira a ver si te gusta añadiendo estos dos selectores:

#buttons ul {width: 500px;float: right;margin-right: 60px;}

#buttons li {float:right; list-style-type:none; white-space:nowrap;margin-left: 60px;margin-top: 4px;}

Mikel.

1º de todo GRACIAS. Va tomando más forma el sitio, pero en un gran porcentaje gracias a vs! ja
Te dejo el código html y css para que lo mirés...
html:

Código:

<ul>
<li><a href="historia.html" class="historia"></a></li>
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="index.html" class="home activo"></a></li> 
<li><a href="contacto.html" class="contacto"></a></li> 
<li><a href="links.html" class="links"></a></li>	
<li><a href="galeria.html" class="galeria"></a></li> 	        
</ul>

css:

Código:

/*-------------------------------------- Buttons -------------------------------------------------------------------*/
#buttons {
padding:1em;
height:1.5em;
}
#buttons ul {
width: 500px;
float: right;
margin-right: 60px;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
margin-left:60px;
margin-top:4px;
}
#buttons li a.historia {
background: url('historia.jpg') no-repeat; 
background-position:center top; 
display:block;
height:28px;
width:98px;
}
#buttons li a.contacto {
background: url('contacto.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:105px;
}
#buttons li a.recursos {
background: url('recursos.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:108px;
}
#buttons li a.links {
background: url('links.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:55px;
}
#buttons li a.galeria {
background: url('galeria.jpg') no-repeat; 
background-position:center top;
display:block;
height:48px;
width:87px;
}
#buttons li a.home {
background: url('home.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:62px;
}
#buttons li a.activo { background-position: center bottom;}
#buttons li a:hover { background-position: center;}

Modifiqué unas pequeñas cositas como los selectores, más de esto no lo pude achicar, pero seguro es posible.
Primero te quería consultar como hiciste para hacer esas 2 filas, el código parece muy simple pero no lo comprendo, como con esas líneas uno puede hacerlas.

El problema ahora de las 2 filas es que no quedan totalmente centradas, es decir que los botones no quedan uno debajo del otro, hay alguna manera de hacerlo? Lo que se me ocurre es dejar espacio en blanco, puede ser?

Espero que no te joda mucho más con esto. Un saludo y espero rta.

Bye

Juampi
PD: www.cincomasdos.com.ar/DEMO2/index.html y www.cincomasdos.com.ar/DEMO2/csslink2.css
PD2: Cómo se podría hacer para que en la clase a.activo no funcione la otra clase a:hover??

[Mikmoro]

Vamos por partes (dijo Jack el destripador).

Tu código css todavía se puede reducir:

#buttons li a {display:block;
background-repeat: no-repeat;
background-position:center top;
}

#buttons li a.historia {
background: url('historia.jpg');
height:28px;
width:98px;
}
#buttons li a.contacto {
background: url('contacto.jpg');
height:28px;
width:105px;
}
#buttons li a.recursos {
background: url('recursos.jpg') ;
height:28px;
width:108px;
}
#buttons li a.links {
background: url('links.jpg') ;
height:28px;
width:55px;
}
#buttons li a.galeria {
background: url('galeria.jpg');
height:48px;
width:87px;
}
#buttons li a.home {
background: url('home.jpg');
height:28px;
width:62px;
}

Siempre buscando agrupar lo más posible.

En segundo lugar, el asunto de que no quedaran unos encima de otros fue intencionado, por eso te puse "a ver si te gusta", ya que por el estilo desenfadado e infantil del tipo de letra me parecía que quedaría mejor sin simetría, unos en los huecos de los otros más o menos.

¿Cómo estaba hecho para dos líneas? muy sencillo: al darle una ancho al ul y una separación a los li, sencillamente no caben en el ancho y deben saltar obligatoriamente a la siguiente línea los que no quepan. He estirado el margen hasta conseguir que saltaran 3 de ellos. Simple ¿no?

Y la última pregunta, añadiendo:

#buttons li a.activo:hover { background-position: center bottom;} debería funcionar.

Mikel.

[juampick]

Iniciado por Mikmoro

Vamos por partes (dijo Jack el destripador).

Tu código css todavía se puede reducir:



Siempre buscando agrupar lo más posible.

En segundo lugar, el asunto de que no quedaran unos encima de otros fue intencionado, por eso te puse "a ver si te gusta", ya que por el estilo desenfadado e infantil del tipo de letra me parecía que quedaría mejor sin simetría, unos en los huecos de los otros más o menos.

¿Cómo estaba hecho para dos líneas? muy sencillo: al darle una ancho al ul y una separación a los li, sencillamente no caben en el ancho y deben saltar obligatoriamente a la siguiente línea los que no quepan. He estirado el margen hasta conseguir que saltaran 3 de ellos. Simple ¿no?

Y la última pregunta, añadiendo:

#buttons li a.activo:hover { background-position: center bottom;} debería funcionar.

Mikel.

Mike: ahora anduvo todo a la perfección, gracias por tu ayuda. La "última" consulta sería como puedo hacer (he intentado formas pero no me salieron en estas últimas horas) para hacer que exista texto (tipo hidden o debajo de las imágenes) del menu, para darle accesibilidad y alguna persona desactiva las imágenes. Es posible no?
Saludos y nuevamente Gracias

[Mikmoro]

Prueba usando algo como:

<a href="#"><span>home</span></a>

y entonces en la css

#buttons li a span {visibility: hidden;}

Mikel.

[juampick]

Iniciado por Mikmoro

Prueba usando algo como:

<a href="#"><span>home</span></a>

y entonces en la css

#buttons li a span {visibility: hidden;}

Mikel.

Casi que anduvo, el problemita es que aparece como la una under-line del texto en el medio del boton (imagen) y no se como sacarsela. Le puse en el css text-decoration:none; pero igual jode.... Como saco eso?

Abrazo

[Mikmoro]

¿Has puesto #buttons li a {text-decoration: none;} ?

Mikel.

[juampick]

Iniciado por Mikmoro

¿Has puesto #buttons li a {text-decoration: none;} ?

Mikel.

Con ese código en ese selector se acomoda y se le va el underline pero el problema es que cuando desactivo las imagenes con la extensión WebDeveloper Toolbar (Firefox) no se ve el texto en span. Como le digo que cuando las imagenes estén desactivados se ponga en visibility: visible??? o algo por el estilo??

Gracias!!!

AH, el código html es el siguiente:

Código:

<ul>
<li><a href="historia.html" class="historia"><span>historia</span></a></li>
<li><a href="recursos.html" class="recursos"><span>recursos</span></a></li>
<li><a href="index.html" class="home activo"><span>home</span></a></li> 
<li><a href="contacto.html" class="contacto"><span>contacto</span></a></li> 
<li><a href="galeria.html" class="galeria"><span>galeria</span></a></li> 		
<li><a href="links.html" class="links"><span>links</span></a></li>
</ul>

y el css:

Código:

#buttons li a {
background-position:center top; 
display:block;
background-repeat: no-repeat;
text-decoration:none;
}
#buttons li a span {
visibility: hidden;
}

Saludos y espero que se pueda solucionar

[juampick]

Hola, quería comentarles que cuando agregué las imágenes en el menú, en ie se empezó a ver mal (lo corroboré recién hoy, ya que el height se va disparado enorme, lo que hice fue el truquito enseñado por Mike hace tiempo del height, les muestro el codigo a ver si me pueden decir porque no se me soluciona.
html:

Código:

<div id="header">
			<div id="logoleft"><img src="pruebalogofondopng.png" alt="logo 5+2" /></div>
			<div id="buttons">
			<ul>
			<li><a href="historia.html" class="historia"></a></li>
			<li><a href="recursos.html" class="recursos"></a></li>
		        <li><a href="index.html" class="home activo"></a></li> 
			<li><a href="contacto.html" class="contacto"></a></li> 
			<li><a href="galeria.html" class="galeria"></a></li> 		
			<li><a href="links.html" class="links"></a></li>
			</ul>
			</div>
		</div>

css:

Código:

#header {
min-height:100px;
height:auto!important;
height:100px;
margin:0 auto;

}
#logoleft {
float:left;
width:100px;
min-height:100px;
height:auto!important;
height:100px;
margin:0;
}


/*----- Buttons -----*/
#buttons {
padding:1em;
height:1.5em;
}
#buttons ul {
width: 550px;
float: right;
margin-right: 60px;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
margin-left:70px;
margin-top:3px;
}
#buttons li a {
background-position:center top; 
display:block;
background-repeat: no-repeat;
text-decoration:none;
}
#buttons li a span {
visibility: hidden;
}
#buttons li a.historia {
background: url('historia.jpg');
height:28px;
width:98px;
}
#buttons li a.contacto {
background: url('contacto.jpg');
height:28px;
width:105px;
}
#buttons li a.recursos {
background: url('recursos.jpg');
height:28px;
width:108px;
}
#buttons li a.links {
background: url('links.jpg');
height:28px;
width:55px;
}
#buttons li a.galeria {
background: url('galeria.jpg');
height:48px;
width:87px;
}
#buttons li a.home {
background: url('home.jpg');
height:28px;
width:62px;
}
#buttons li a.activo { 
background-position: center bottom;
cursor:default;
}
#buttons li a:hover { background-position: center;}
#buttons li a:hover.activo { 
cursor:default;
background-position: center bottom;
}

Espero que lo podamos solucionar. El link es el de siempre: **editado**
Gracias

[JavierB]

Hola juampick

No hace falta que pongas los enlaces en todos los mensajes. Con una vez es suficiente.

Saludos,

[Mikmoro]

Visto en IE6 tiene toda la pinta de que es que no te cabe de ancho el ul a causa del margen derecho que le dimos para obligar a saltar las dos líneas. Como ahora tú lo has hecho de otra manera para que queden los botones centrados, prueba a reducir ese margen del ul o su ancho para que te quepa junto al logo.

Mikel.

[juampick]

Iniciado por Mikmoro

Visto en IE6 tiene toda la pinta de que es que no te cabe de ancho el ul a causa del margen derecho que le dimos para obligar a saltar las dos líneas. Como ahora tú lo has hecho de otra manera para que queden los botones centrados, prueba a reducir ese margen del ul o su ancho para que te quepa junto al logo.

Mikel.

Mikel no comprendí tu solución. Lo que probé cambiar (pero en IE6 sigue andando mal) es esto:

Código:

#buttons {
padding:1em;
height:1.5em;
}
#buttons ul {
width: 550px;
float: right;
margin-right: 65px;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
margin-left:50px;
margin-top:3px;
}

¿Cómo puedo solucionarlo?
Achiqué el margin-left en 50px y sigue igual.
Saludos

[Mikmoro]

No, no. Lo que te decía es que le dí un tamaño y un margen derecho al ul para que saltaran las dos líneas:

#buttons ul {
width: 550px;
float: right;
margin-right: 65px;

y que probablemente sea eso lo que le hace saltar abajo. Prueba a cambiarlo (reducir el margen derecho o el tamaño del ul), a ver si te cabe y se resuelve.

Mikel.

[juampick]

Iniciado por Mikmoro

No, no. Lo que te decía es que le dí un tamaño y un margen derecho al ul para que saltaran las dos líneas:

#buttons ul {
width: 550px;
float: right;
margin-right: 65px;

y que probablemente sea eso lo que le hace saltar abajo. Prueba a cambiarlo (reducir el margen derecho o el tamaño del ul), a ver si te cabe y se resuelve.

Mikel.

Gracias, pero hice varias pruebas de ir cambiando los valores y se me sigue corriendo igual, achicando, agrandando y nada, hay alguna forma de hacerlo? ME estoy volviendo LOCO! ja :P.
O se me ocurre, no es posible meterle 2 divs ahi en forma horizontal q cada uno contenga 3 botones y listo? Saludos y espero que me puedas ayudar porque se re-agranda en IE6.
Bye y gracias desde ya

[Mikmoro]

No sé si no me has entendido o es que has tenido poca paciencia para probar.

El margen derecho del selector ul es demasiado grande para la modificación de tamaños y posiciones que has hecho. Cámbialo de 80px a 30px y se acomodará bien en IE6:

#buttons ul {
width: 450px;
float: right;
margin-right: 30px;
}

Mikel.

[juampick]

Iniciado por Mikmoro

No sé si no me has entendido o es que has tenido poca paciencia para probar.

El margen derecho del selector ul es demasiado grande para la modificación de tamaños y posiciones que has hecho. Cámbialo de 80px a 30px y se acomodará bien en IE6:

#buttons ul {
width: 450px;
float: right;
margin-right: 30px;
}

Mikel.

MIkel, disculpame que no te había comprendido bien. Lo probé como decís y anda a la perfección! MUCHISIMAS GRACIAS!.

Ahora el "espero que último problema relacionado con el menu" es que como mencione acá:

Con ese código en ese selector se acomoda y se le va el underline pero el problema es que cuando desactivo las imagenes con la extensión WebDeveloper Toolbar (Firefox) no se ve el texto en span. Como le digo que cuando las imagenes estén desactivados se ponga en visibility: visible??? o algo por el estilo??

Gracias!!!

AH, el código html es el siguiente:
Código:

<ul>
<li><a href="historia.html" class="historia"><span>historia</span></a></li>
<li><a href="recursos.html" class="recursos"><span>recursos</span></a></li>
<li><a href="index.html" class="home activo"><span>home</span></a></li>
<li><a href="contacto.html" class="contacto"><span>contacto</span></a></li>
<li><a href="galeria.html" class="galeria"><span>galeria</span></a></li>
<li><a href="links.html" class="links"><span>links</span></a></li>
</ul>

y el css:
Código:

#buttons li a {
background-position:center top;
display:block;
background-repeat: no-repeat;
text-decoration:none;
}
#buttons li a span {
visibility: hidden;
}

Saludos y espero que se pueda solucionar

Cómo pregunté en ese caso, como le digo al css que cuando no esten activadas las imágenes cambie la propiedad span css de visibility:hidden; a visibility:visible; ??

Muchas gracias nuevamente

[Mikmoro]

Yo creo que no se puede, pero he tenido otra idea:

- En cada enlace, cambias el span por esto

<li><a href="recursos.html" class="recursos"><img src="falsa.jpg" alt="recursos" /></a></li>

- Ahora haces una imagen de 1px por 1px con el color de fondo de la cabecera

http://www.araudi.net/forosdelweb/img/falsa.jpg

(aunque no veas nada, es la imagen que te digo; bájatela y ponla donde necesites.)

- Y ahora añades a la css este selector:

#buttons li a img {
border: none;
}

¿Qué hemos hecho? El enlace contiene una imagen que no se ve, porque tiene 1px y es del color del fondo. Esa imagen tiene un alt, que será el que se vea cuando se desactiven la imágenes, porque esa imagen falsa también será desactivada.

A ver qué tal.

Mikel.