Foros del Web » Creando para Internet » CSS »

problemas con list-style-image

Estas en el tema de problemas con list-style-image en el foro de CSS en Foros del Web. buenas me gustaria poner una imagen que cambie de color cuando passes el cursor por encima.. la question es que encontre esto que se hacia ...
  #1 (permalink)  
Antiguo 21/05/2009, 05:26
 
Fecha de Ingreso: abril-2008
Mensajes: 144
Antigüedad: 9 años, 8 meses
Puntos: 1
Pregunta problemas con list-style-image

buenas me gustaria poner una imagen que cambie de color cuando passes el cursor por encima.. la question es que encontre esto que se hacia con listas.. pero yo no tengo listas tengo este codigo...

Código PHP:

<div align="center">

        <div class="nav gap" style="width:966px">
            <div id="index" class="home_menu">
            <a href="/"><? echo $this->label['Home']; ?></a>
            </div>
            <div id="product" class="rest_menu">
            <a href="/index/product"><? echo $this->label['FAQ']; ?></a>
            </div>
            <div id="shop" class="rest_menu">
            <a href="/index/shop"><? echo $this->label['Instructions Manual']; ?></a>
            </div>
            <div id="support" class="rest_menu">
            <a href="/index/support"><? echo $this->label['Support']; ?></a>
            </div>
            <div id="voucher" class="rest_menu">
            <a href="/voucher"><? echo $this->label['Voucher']; ?></a>
            </div>
            <div id="contact" class="rest_menu">
            <a href="/index/contact"><? echo $this->label['Contact']; ?></a>
            </div>
        </div>
            <div id="<? echo $page_name ?>_bnr" align="right"></div>
                   <div id="logo"></div>
    </div>
   </div>
y mi css és.. os pongo el trozo que usan...

Código PHP:
.nav,.nav a    {

    
color:#000000;
    
font-size:13px;
    
text-decoration:none;
    

}
.
nav a:hover    {
    
text-decoration:none;
}
.
gap .home_menu    {
    
padding-top:25px;
    
padding-left:600px;
    
float:left;
}
.
gap .rest_menu    {
    
padding-top:25px;
    
padding-left:20px;
    
float:left;

como lo hago para usar algo parecido a las listas de poner un mini icono delante de cada link... como por ejemplo....
style-image:url(../newimages/home/plus.gif);

gracias
  #2 (permalink)  
Antiguo 21/05/2009, 06:37
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: problemas con list-style-image

Tendrías que ponerle una imagen de fondo posicionada a los <a>:

Código HTML:
a {
background: url(imagen.gif) no-repeat center left:
padding-left: 20px;
}
Salud!
  #3 (permalink)  
Antiguo 21/05/2009, 08:21
 
Fecha de Ingreso: abril-2008
Mensajes: 144
Antigüedad: 9 años, 8 meses
Puntos: 1
Pregunta Respuesta: problemas con list-style-image

Cita:
Iniciado por AlbertoGarcia Ver Mensaje
Tendrías que ponerle una imagen de fondo posicionada a los <a>:

Código HTML:
a {
background: url(imagen.gif) no-repeat center left:
padding-left: 20px;
}
Salud!
muchas gracias! me funciono muy bien! :) ahora el problema es que me sale un icono pequeño sin texto.. en el siguente codigo.. me funciona muy bien en todos los links pero me sale una imagen sola antes ahir sola "volando". se puede esconder la primera... porque creo que me sale en la primera linia antes del home...

Código PHP:
    <div class="nav gap" style="width:966px">
            <div id="index" class="home_menu">
            <a href="/"><? echo $this->label['Home']; ?></a>
            </div>


            <div id="support" class="rest_menu">
            <a href="/index/support"><? echo $this->label['Support']; ?></a>
            </div>
            <div id="voucher" class="rest_menu">
            <a href="/voucher"><? echo $this->label['Voucher']; ?></a>
            </div>
            <div id="contact" class="rest_menu">
            <a href="/index/contact"><? echo $this->label['Contact']; ?></a>
            </div>
        </div>
como declaro el css:

Código PHP:
.nav,.nav a    {

    
color:#000000;
    
font-size:13px;
    
text-decoration:none;
    
backgroundurl(../newimages/home/plus.gifno-repeat center left;
    
padding-left20px;


}

.
nav a:hover    {
    
backgroundurl(../newimages/home/plus2.gifno-repeat center left;
    
padding-left20px;
    
text-decoration:none;
}


.
gap    {
    
padding-top:45px;
}
.
gapi    {
    
padding-top:10px;
    
color:#000000;
    
font-size:13px;
    
text-decoration:none;
}
.
gap .home_menu    {
    
padding-top:25px;
    
padding-left:550px;
    
float:left;
}
.
gap .rest_menu    {
    
padding-top:25px;
    
padding-left:20px;
    
float:left;


gracias :P
  #4 (permalink)  
Antiguo 21/05/2009, 11:50
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: problemas con list-style-image

El plus.gif se lo tienes asignado tanto al div que contiene el menú (<div class="nav gap">) como a todos los <a> que contiene. Quita el .nav de la primera declaración. Te aconsejo también que el ancho del div lo saques del html y lo pongas en la hoja de estilo.

Código HTML:
.nav a    {

    color:#000000;
    font-size:13px;
    text-decoration:none;
    background: url(../newimages/home/plus.gif) no-repeat center left;
    padding-left: 20px;


}
Salud!
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 22:34.