problemas con list-style-image

[bellleti]

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

[AlbertoGarcia]

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!

[bellleti]

Iniciado por AlbertoGarcia

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; 
    background: url(../newimages/home/plus.gif) no-repeat center left; 
    padding-left: 20px; 
 
 
} 
 
.nav a:hover    { 
    background: url(../newimages/home/plus2.gif) no-repeat center left; 
    padding-left: 20px; 
    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

[AlbertoGarcia]

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!