Foros del Web » Creando para Internet » CSS »

problema con imagenes menu css

Estas en el tema de problema con imagenes menu css en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 07/03/2011, 10:02
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
problema con imagenes menu css

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?
  #2 (permalink)  
Antiguo 07/03/2011, 10:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con imagenes menu css

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 07/03/2011, 10:17
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: problema con imagenes menu css

a mi me parece que el problema es porque los span estan vacios y las imagenes van de background
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 07/03/2011, 10:18
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con imagenes menu css

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?
  #5 (permalink)  
Antiguo 12/03/2011, 09:52
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con imagenes menu css

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;}
  #6 (permalink)  
Antiguo 12/03/2011, 11:42
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: problema con imagenes menu css

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.
  #7 (permalink)  
Antiguo 13/03/2011, 13:25
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con imagenes menu css

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;}

Etiquetas: imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:19.