Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

camilo.oliveira

Problema com lista

Por , em Desenvolvimento frontend

Recommended Posts

camilo.oliveira    0

camilo.oliveira
Postado

Pessoal, estou montando o código de um site e vou fazê-lo em, tableless.

 

 

Estou montando alguns includes e tem um que está me dando dor de cabeça.

 

É o menu lateral.

 

O site deve ficar assim:

 

 

Imagem Postada

 

 

Pra fazer esse efeito, criei uma lista <ul>, e uma <li>, para cada ítem.

 

Até aí tudo bem, mas precisava colocar essa setinha do lado deles.

Tentei como list-style-image, mas não deu pois ele alinhava à esquerda e preciso que se alinha à direita.

 

A solução então foi colocar a tal setinha como background da ul, com repetição para baixo (repeat-y).

Criei uma imagem transparente, que ocuparia a li inteira, com preenchimento somente na setinha, para ela ficar 'apontando' para o meio do texto que vai vir.

 

Só que ficou assim:

 

Imagem Postada

 

 

A setinha 'aponta' cada hora para uma parte do ítem e não especificamente o meio.

 

Alguém pode me dar alguma dica de como resolver?

 

Olha o código da página (include)

<head><link rel="stylesheet" type="text/css" href="/style/includes.css"></head><body><div id="menu"><ul><li>página inicial</li><li>quem somos</li><li>indique</li><li>últimas notícias</li><li>galeria de fotos</li><li>fale conosco</li><li>cadastre-se</li></ul></div></body>
Agora o código CSS

 

ul	{background-image:url("/i/menu.gif");background-repeat:repeat-y;margin:0;}li		{height:30px;list-style:none;font-family:Arial, Helvetica, sans-serif;font-size:16px;text-align:right;color:#FFF;margin: 0 39px 0 0;}

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

camilo, você pode colocar essas imagens como fundo do próprio <li>.

 

.paginaInicial{ background:url("paginaInicial.gif") right center no-repeat; }.quemSomos{ ... }.indique{ ... }

Depois:

<ul><li class="paginaInicial">página inicial</li><li class="quemSomos">quem somos</li><li class="indique">indique</li></ul>

Falow! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito