Foros del Web » Creando para Internet » CSS »

menu css

Estas en el tema de menu css en el foro de CSS en Foros del Web. tengo un problema con un menu en css, y como aun no soy ningun guru del CSS no se como resolverlo. Tengo un menu: y ...
  #1 (permalink)  
Antiguo 10/03/2009, 02:58
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 18 años, 3 meses
Puntos: 3
menu css

tengo un problema con un menu en css, y como aun no soy ningun guru del CSS no se como resolverlo.
Tengo un menu:

y cuando paso el raton por encima de cada boton, quiero que cambie el fondo, en IE me funciona bien:


Pero en Firefox me hace esto:


haber si alguien me puede hechar una mano, Gracias.
  #2 (permalink)  
Antiguo 10/03/2009, 03:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: menu css

Péganos el código HTML y CSS.

Tiene pinta de un <li> vacío. Pero sin ver es dar palos de ciego.
  #3 (permalink)  
Antiguo 10/03/2009, 03:09
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 18 años, 3 meses
Puntos: 3
Respuesta: menu css

Código HTML:
<div class="menu">
    	<ul>
        	<li><a href="index.htm"><img src="gfx/empresa.png" border="0"/></a></li>
            <li><a href="servicios.htm"><img src="gfx/servicios.png" border="0"/></a></li>
            <li><a href="tiendas.htm" title="puntos de venta de Blucom"><img src="gfx/tiendas.png" border="0"/></a></li>
            <li><a href="contacto.htm"><img src="gfx/contacto.png" border="0"/></a></li>
        </ul>
</div> 
Código:
.menu{
	float:left;
	width:150px;
	background-color:#FFF;
	background-image:url(gfx/fondo_menu.jpg);
	background-repeat:no-repeat;
	min-height:450px;
	margin-left:1px;
	margin-top:2px;
	margin-right:1px;

	}
ul {
	text-align:left;
	padding:0;
	list-style:none;
	margin:30px auto;
}
li{
	padding:0;
}
	
a {
	padding:0;
	margin:0 auto;
	}
a:hover{
	background:url(gfx/fondo_hover.png);
	background-repeat:no-repeat;
	background-position:center;

	}
gracias
  #4 (permalink)  
Antiguo 10/03/2009, 03:47
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 16 años, 5 meses
Puntos: 4
Respuesta: menu css

Hola en principio para el menú lo único que necesitas para el cambio de imágenes es esto:
Código:

ul {
	padding:0;
	list-style:none;
	margin:0px;
}
li{
	padding:0;
	list-style: none;
}
	
a {
	padding:15px 0 0;
	margin:0 auto;
	display: block;
	background: url(css/i/tu_fondo.jpg) no-repeat;
	width: 125px;
	height: 40px;
	text-align: center;
	}
a:hover{
	background:url(gfx/fondo_hover.png);
	background-repeat:no-repeat;
	background-position:center;

	}
Faltan: active, visited y focus, fíjate que es en <a> en la hoja de estilos donde tengo las imágenes y el tamaño ancho y alto que tiene que ser el tamaño de la imagen.

html
Código:
<ul>
<li><a href="index.htm">link 1</a></li>
<li><a href="servicios.htm">link 2</a></li>
<li><a href="tiendas.htm" >link 3</a></li>
<li><a href="contacto.htm">link 4</a></li>
</ul>
  #5 (permalink)  
Antiguo 10/03/2009, 05:11
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 18 años, 3 meses
Puntos: 3
Respuesta: menu css

Gracias, talmente.
  #6 (permalink)  
Antiguo 10/03/2009, 05:49
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 16 años, 5 meses
Puntos: 4
Respuesta: menu css

De nada.
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 14:30.