problema con imagenes menu css

[rufus]

quiero hacer un menu con imagenes de 2 estados pero no se me ven en el menu. este es el codigo que he usado.

header.php:

Código HTML:

<div id="menu">

	<a class="quienesmenu" href="index.php"><span></span></a>
    <a class="serviciosmenu" href="servicios.php"><span></span></a>
    <a class="contactomenu" href="contacto.php"><span></span></a>

</div> 

css:

#menu{width:940px; height:41px; float:left;background-image:url(../images/barramenu.png); background-repeat:no-repeat;background-position:center; background-color:#FFF;}


/*css de imagenes del menu*/

Código:

.quienesmenu { margin-top:5px;}
.serviciosmenu { margin-top:5px;}
.contactomenu { margin-top:5px;}

.quienesmenu span  { background-image:url(../images/boton_oscuroquienessomos.png); width:90px; height:35px;}

.serviciosmenu span { background-image:url(../images/boton_oscuro_servicios.png); width:90px; height:35px;}

.contactomenu span { background-image:url(../images/boton_oscuro_contacto.png); width:90px; height:35px;}

por que no se ven las imagenes?

[jomaruro]

Hola:

¿Estás seguro de que la ruta es la correcta?

Saludos.

[gVenom]

a mi me parece que el problema es porque los span estan vacios y las imagenes van de background

[rufus]

si creo que si te explico tengo las imagenes en una carpeta images y el header.php donde va el menu esta dentro de la carpeta includes. ademas e agregado la imagen usando el bronwser del dreamweaver. entonces esta mal la ruta?

[rufus]

aun no e solucionado el problema no se me ven las imagenes para navegar con el menu. necesito ayuda

asi es como tengo el codigo ahora:

Código HTML:

<div id="menu">

	<a class="quienesmenu" href="index.php"><span></span></a>
    <a class="serviciosmenu" href="servicios.php"><span></span></a>
    <a class="contactomenu" href="contacto.php"><span></span></a>

</div> 

Código:

#menu{width:940px; height:41px; float:left;background-image:url(../images/barramenu.png); background-repeat:no-repeat;background-position:center; background-color:#FFF;}


/*css de imagenes del menu*/

.quienesmenu {top:-2px; left:35px;}
.serviciosmenu {top:-2px; left:90px;}
.contactomenu {top:-2px; left:150px;}

.quienesmenu span  { background-image:url(../images/boton_oscuroquienessomos.png); width:90px; height:35px;}

.serviciosmenu span { background-image:url(../images/boton_oscuro_servicios.png); width:90px; height:35px;}

.contactomenu span { background-image:url(../images/boton_oscuro_contacto.png); width:90px; height:35px;}

[sanxuan]

Como te han dicho, el problema es que no tienes nada dentro del span.
El span se adaptará en todo caso a su contenido.
Creo que puedes usar el fondo directamente en los enlaces añadiendo la propiedad display:block y ahorrarte los span.
Seguramente necesitarás hacer que los enlaces floten uno al lado del otro.
Hay bastantes ejemplos de menús hechos con css sin salir de este foro. Seguro que te sirven como orientación. En lo que a menús se refiere está todo prácticamente dicho. Haz una búsqueda en Google y escoge lo que más se parezca a tu idea.

[rufus]

ey si pongo display block no se me pone el menu alineado horizontalmente. y sobre el uso de los span a un amigo mio que hizo un menu casi igual que el mio le funciono sin poner nada en los span. pero yo he puesto asi el codigo y se me ven las imagenes en pequeño debajo del texto que meto en html asi.

Código HTML:

<div id="menu">
<ul>
	<li><a class="quienesmenu" href="index.php"><span>Quiénes somos</span></a></li>
    <li><a class="serviciosmenu" href="servicios.php"><span>Servicios</span></a></li>
    <li><a class="contactomenu" href="contacto.php"><span>Contacto</span></a></li>
</ul>

</div> 

Código:

#menu{width:940px; height:65px; float:left; background-color:#026CB6;}


/*css de imagenes del menu*/
#menu ul li { display:inline; padding-left:35px;}
.quienesmenu {top:-6px; left:35px;}
.serviciosmenu {top:-6px; left:90px;}
.contactomenu {top:-6px; left:150px;}

.quienesmenu a  { background-image:url(../images/boton_oscuroquienessomos.png); width:90px; height:35px; padding-top:-10px;}

.serviciosmenu a { background-image:url(../images/boton_oscuro_servicios.png); width:90px; height:35px;}

.contactomenu a { background-image:url(../images/boton_oscuro_contacto.png); width:90px; height:35px;}