Foros del Web » Creando para Internet » CSS »

Imagen de fondo en div

Estas en el tema de Imagen de fondo en div en el foro de CSS en Foros del Web. Hola, siguiendo en esto del css de mi web me he topado con otro problema, le estoy haciendo un menu desplegable, con javascript y css. ...
  #1 (permalink)  
Antiguo 27/02/2010, 22:28
Avatar de ONahuelO  
Fecha de Ingreso: junio-2009
Ubicación: Gualeguaychú, Argentina
Mensajes: 144
Antigüedad: 8 años, 5 meses
Puntos: 4
Imagen de fondo en div

Hola, siguiendo en esto del css de mi web me he topado con otro problema, le estoy haciendo un menu desplegable, con javascript y css. Ya he logrado el tema de que me oculte y muestre la divicion al pasar el puntero sobre el linck pero nececitaria que tambien al pasar el puntero sobre em mismo link, la imagen que este debajo de este cambie (para que de el efecto de seleccion), pero al hacerlo es como que la imagen de fondo no toma el tamaño entero de la divicion, es como que solo toma el tamaño de las letras.
Imagenes:
Normal :

Al pasar em mause por encima:

Otro problema que me sucede es que el texto no queda en el centro de la divicion, queda en el medio pero arriva.

Aca esta el html:

Código:
<div  id="s_menu" onmouseout="ocultar('s_menu');"></div>

<div class="menu">
<div class="menu_items" align="center" onmouseover="mostrar('s_menu');">
<a >dfgd</a>
</div>
</div>
Aca esta el CSS
Código:
.menu_items{
	position:relative;
	z-index:100;
	left: 52px;
	top: 27px;
	width: 109px;
	height: 32px;
	vertical-align:middle;
	background:#000 url('s_munu_out.png') center top no-repeat;
	

}

.menu_items a:hover {
background:#000 url('s_munu_over.png') center top no-repeat;
width: 109px;
height: 32px;	 
}
Espero que me puedan ayudar, desde ya muchisimas gracias.
  #2 (permalink)  
Antiguo 28/02/2010, 19:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Imagen de fondo en div

Es por que se lo asignas al anchor <a>. Prueba asignarlo a su contenedor.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 28/02/2010, 21:35
Avatar de ONahuelO  
Fecha de Ingreso: junio-2009
Ubicación: Gualeguaychú, Argentina
Mensajes: 144
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: Imagen de fondo en div

Es lo mismo lamentablemente, le agrego al a los datos de ancho y alto pero es igual el resultado.

Código:
<div  id="s_menu" onmouseout="ocultar('s_menu');"></div>
<div class="menu">
<div  class="menu_items" align="center" onmouseover="mostrar('s_menu');">
<ul >
<li style="height:200px;">
<a style="height:100px; width:500px;">asdasd</a>
</li>
</ul>
</div>
</div>

Código:
.menu_items li{
	display:block;
	float:left;
	margin:0;
	pading:0;
	position:absolute;

	left: 38px;
	top: 26px;
	vertical-align:middle;
}

.menu_items li a:hover{
color:#FFFFFF;
background-color:#FFFFFF;
}
#s_menu {

	position:absolute;
	z-index:100;
	background-image:url('s_menu.png');
	width:976px;
	height:150px;
	left: 0px;
	top: 70px;
	display:none;
}
  #4 (permalink)  
Antiguo 28/02/2010, 21:53
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Imagen de fondo en div

no entiendo bien que quieres hacer, pero <a> es un elemento en linea... para que coja tamaños y demasn necsitas, display:block; ahora...
Código:
.menu_items li{
	display:block;
	float:left;
	margin:0;/*usa mejor un reset para no ponerselo a todos los elementos*/
	pading:0;/*usa mejor un reset para no ponerselo a todos los elementos*/
	position:absolute;/*o flotas el elemento o le das posicion absoluta sacando del flujo del sitio del todo*/

	left: 38px;
	top: 26px;
	vertical-align:middle;
}

.menu_items li a:hover{
color:#FFFFFF;
background-color:#FFFFFF;
}
#s_menu {

	position:absolute;
	z-index:100;
	background-image:url('s_menu.png');
	width:976px;
	height:150px;
	left: 0px;
	top: 70px;
	display:none;
}
no necesitas usar js para un menu desplegable pasate por http://www.araudi.net para ver ejemplos de menus desplegables....
  #5 (permalink)  
Antiguo 28/02/2010, 22:13
Avatar de ONahuelO  
Fecha de Ingreso: junio-2009
Ubicación: Gualeguaychú, Argentina
Mensajes: 144
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: Imagen de fondo en div

Muchas gracias me ha funcionado jolla, lo que me sigue quedando mal es que el link queda en la parte superior de la divicion y no en el medio

Edit: nono ya lo solucione, muchas gracias

Etiquetas: fondo
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 17:54.