Foros del Web » Creando para Internet » CSS »

menu, cambiando imagenes de fondo

Estas en el tema de menu, cambiando imagenes de fondo en el foro de CSS en Foros del Web. Hola todos.. Estoy haciendo el siguiente menu: Lo que hice fue hacer una lista y poner una imagen blanca de fondo a cada item de ...
  #1 (permalink)  
Antiguo 02/06/2005, 18:45
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
menu, cambiando imagenes de fondo

Hola todos..
Estoy haciendo el siguiente menu:



Lo que hice fue hacer una lista y poner una imagen blanca de fondo a cada item de la lista. Pense que hacer el mouseover del cambio de imagen era facil, aunque funciona no me muestra exactamente como me gustaria.

tengo este codigo:

Código HTML:
<div id="menu_bg">
    <ul id="menu_items" class="hyper_color">
	<li><a href="#"><span>menu1</span></a></li>
	<li><a href="#"><span>menu2</span></a></li>
	<li><a href="#"><span>menu3</span></a></li>
    </ul>
</div> 
Código:
div#menu_bg {
	position:relative;
	margin:auto;
	padding:auto;
	margin-top:5px; 
	padding-top:1px; 
	margin-left:20px;
	width: 168px;
	height: 128px;
	background:url(../images/family_menu_blue.gif) 0 0 no-repeat;
}
ul#menu_items {
	margin-top: 20px;
}
ul#menu_items li{
	color:#077093;
	font-size:13px;
	list-style: none;
	margin-left: -24px;
	padding-bottom:6px;
	position:relative;
	background:url(../images/menu_white_bg.gif) 0 0 no-repeat;
}

ul#menu_items li span{
	position:relative;
	margin-left: 17px;
	width:132px;
}
ul#menu_items li a:hover{
	clear:both;
	position:relative;
	color:#FFFFFF;
	font-size:13px;
	list-style: none;
	display:block;
	background:url(../images/button_orange_1.gif) 0 0 no-repeat;
	padding-bottom: 1px;
}
tengo estas dos preguntas:
1. para cambiar imagenes de fondo es correcto simplemente cambiarle el a:hover a li? o debo usar imagenes con capas?

2. usando estas imagenes de fondo es posible que al pasar el cursor por el fondo de la imagen (no solo por la palabra) me haga el efecto?

Gracias de antemano.
Liz
  #2 (permalink)  
Antiguo 03/06/2005, 04:39
Avatar de marisoplete  
Fecha de Ingreso: febrero-2005
Ubicación: En algún lugar de un gran país...
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Salto

Hola!

He probado tu menú y el único fallo que me daba (no sé si a tí te pasará esto) es que en el "hover" da un pequeño salto porque tienes un "padding-bottom" de un pixel que sobraría. Igual esto no te interesa pero bueno.

En cuanto a tus otras preguntas, creo que lo has hecho correctamente.

No sé si te he ayudado o no pero bueno. Suerte!
  #3 (permalink)  
Antiguo 04/06/2005, 01:29
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
Gracias por probarlo marisoplete,

Ese salto de de 1px lo puse porque la imagen naranja me la muestra 0.5 mas arriba, no he podido hallarle la causa de esto. Puede que sea que esta heredando o combinando con otros divs que tengo arriba. Voy a revisarlo!

Gracias, fue de ayuda saber que lo estoy haciendo bien

Liz
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 15:25.