Foros del Web » Creando para Internet » CSS »

Imagenes en li

Estas en el tema de Imagenes en li en el foro de CSS en Foros del Web. Hola, Tengo un menu tal que: Cita: <div id="menu"> <ul> <li class="nivel1 activo" ><a id="activo" href="#">Inicio</a></li> <li class="nivel1"><a href="#">¿Quienes somos?</a></li> <li class="nivel1"><a href="#">Asociaci&oacute;n</a></li> <li class="nivel1"><a ...
  #1 (permalink)  
Antiguo 16/02/2011, 17:54
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 17 años, 6 meses
Puntos: 1
Pregunta Imagenes en li

Hola,

Tengo un menu tal que:

Cita:
<div id="menu">
<ul>
<li class="nivel1 activo" ><a id="activo" href="#">Inicio</a></li>
<li class="nivel1"><a href="#">¿Quienes somos?</a></li>
<li class="nivel1"><a href="#">Asociaci&oacute;n</a></li>
<li class="nivel1"><a href="#">Servicios</a></li>
<li class="nivel1"><a href="#">Hazte Socio</a></li>
<li class="nivel1"><a href="#">Noticias</a></li>
</ul>
</div> <!-- /menu principal -->
Y al primer li quiero ponerle una imagen se ajuste al texto? Ya que la priemra vez estará activo Inicio y si pasas el el ratón por encima se pondrán las otras activas con la misma imagen.

Muchas gracias por vuestra ayuda.
  #2 (permalink)  
Antiguo 17/02/2011, 09:49
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Imagenes en li

Una idea básica sería:

#menu ul {list-style-type: none; }
#menu li {margin: 0px; padding-left: 10px;}
#menu li:hover {background: url(imagen.png) left center no-repeat;}
#menu .activo{background: url(imagen.png) left center no-repeat;}

con una imagen pequeña claro, para la posición de la imagen solo habría que cambiar la posición en el background por ej. 'top center' pa q esta este arriba del enlace
  #3 (permalink)  
Antiguo 17/02/2011, 16:42
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 17 años, 6 meses
Puntos: 1
Pregunta Respuesta: Imagenes en li

Gracias por tu ayuda, pero si la imagen está formada en dos partes,yo tengo esto(el menu configurado para que este en fila):
Cita:
div#menu {
height:35px;
left:215px;
position:relative;
top:30px;
}
div#menu li a {
color:#000000;
height:35px;
line-height:35px;
text-decoration:none;
padding:10px 11px;
}

div#menu li.nivel1 {
margin-right:5px;
font-weight:bold;
}
div#menu li.activo {
background: url(imagenes/menu_tab_l.png) left center no-repeat;
}
div#menu li a#activo{
color:#AA1428;
background: url(imagenes/menu_tab_r.png)right center no-repeat;
}

y me queda la primera imagen que solo ocupa el sitio del li (más bajo) y la del a más alta. Si pongo en el li dispay:block me las pone en fila y yo las quiero in-line.
¿Como puedo hacer para que las imagenes coincidan y formen entre las 2 la imagen correcta?

Muchas gracias.
  #4 (permalink)  
Antiguo 18/02/2011, 11:13
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Imagenes en li

Intenta con esto

CSS:
#menu ul {list-style-type: none; }
#menu li {margin: 0px; padding-left: 10px;}
#menu li:hover {background: url(imagen.png) left center no-repeat;}
#menu li:hover label{background: url(imagen.png) right center no-repeat; padding-right: 20px;}
#menu .activo{background: url(imagen.png) left center no-repeat;}
#menu .activo label{background: url(imagen.png) right center no-repeat; padding-right: 20px;}

HTML:
<div id="menu">
<ul>
<li class="nivel1 activo" ><label><a id="activo" href="#">Inicio</a></label></li>
<li class="nivel1"><label><a href="#">¿Quienes somos?</a></label></li>
<li class="nivel1"><label><a href="#">Asociaci&oacute;n</a></label></li>
<li class="nivel1"><label><a href="#">Servicios</a></label></li>
<li class="nivel1"><label><a href="#">Hazte Socio</a></label></li>
<li class="nivel1"><label><a href="#">Noticias</a></label></li>
</ul>
</div>

Suerte!

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 18:28.