Lista + Imagem

[_bruninha 0]

Olá outro vez, estou com mais um problema.

 

Eu tenho uma lista li com 4 itens (Minha conta - Lista Desejos - Finalizar - Login) e quero colocar uma imagem diferente para cada item da minha lista.

 

Bom, coloquei as imagens(background) para cada item da minha lista só que agora as imagens da lista estão sendo cortadas.

 

como eu poderia tentar resolver este problema

 

 

[Diéssica 140]

Mostre como você fez. Poste o código :)

:seta: http://forum.imasters.com.br/topic/212439-como-criar-um-tpico-para-o-seu-problema/

[Bru_ce 53]

Define um ID para cada item da sua lista:

 

 

<ul>
<li id="imagem1"><a href="#">Home</a></li>
<li id="imagem2"><a href="#">Produtos</a></li>
<li id="imagem3"><a href="#">Serviços</a></li>
<li id="imagem4"><a href="#">Contato</a></li>
</il>

[_bruninha 0]

Meu código está assim

 

<ul>
<li class="img-conta">Minha Conta</li>
<li class="img-desejo">Lista de Desejos</li>
<li class="img-finalizar">Finalizar Compra</li>
<li class="img-login">Login</li>
</ul>

.img-conta{padding-left:26px; font-size:12px; font-family:Verdana, Geneva, sans-serif; display:inline; background:url(icone_conta_1.png) left center no-repeat;} 

[Bergs 53]

Defina a dimensão de cada li siga esse exemplo para todas lis,

a imagem vai ficar definida em uma unica imagem de sprite em cada tag span dentro da li:

 

/* CSS */

/* Ativar o box model em todas lis*/
ul.menu li {
 display: block;
 float: left;
 position: relative;
}

/* Regra para as imagens */
ul.menu li span {
 background-image: url(../img/icones.png); /*Adicione a imagem dos icones em sprite (todos os ícones em uma só imagem)*/
 background-repeat: no-repeat;
 display: block;
 position: absolute;
 left: 10px; /* posição que a imagem vai ficar dentro do li */
 top: 5px;
}

/* Defina a dimensão em cada li*/
.btn-conta {
 height: 50px;
 width: 70px;
 padding: 0 0 0 30px; /* para distanciar o texto do ícone */
 line-height: 50px; /* centralizar o texto verticalmente */
}
/* imagen da li btn-conta */
span.ico-conta {
  backgroun-position: x y; /* defina a posição da imagem do sprite aqui */
  height: 20px;
  width: 20px;
}

HTML:
<ul> 
<li class="btn-conta"><span class="ico-conta"></span><a href="#">Minha Conta</a></li>
</ul>