Como customizar as suas listas com CSS

Sou defensor da melhoria continua de uma página de internet, ou blog, e não de uma mudança radical como muitos webmasters fazem às suas páginas. Uma mudança radical só deve ser realizada se o antigo formato da página for péssimo. Caso contrário, o webmaster deve melhorar a página de forma progressiva, para ir de acordo com os desejos dos utilizadores, ou de acordo com um aumento da conversão de determinado item.

Sendo assim e visitando este site, do ponto de vista do utilizador detectei uma falha (entre muitas) que decidi melhorar. Falha essa que aparecia no fim de todos os artigos na secção "Artigos Relacionados". Apliquei um pouco de CSS e voilá, ficou com um aspecto ligeiramente mais profissional!

Como realizar a mudança?

A lista que utilizo nos artigos relacionados possui a seguinte estrutura html:

html
<ul>
  <li>
    <p>link 1</p>
  </li>
  <li>
    <p>link 2</p>
  </li>
  <li>
    <p>link 3</p>
  </li>
</ul>
 

Sendo assim é só aplicar umas linhas de código CSS à lista: 

css
ul{
  list-style-type: none;
   /*retira os pontos negros da lista*/
  padding: 0;
 
  margin: 0;
 
}
li{
  background-image: url(imagem.gif);
   /*Substitui os pontos negros por uma imagem 
à sua escolha*/
  background-repeat: no-repeat;
 
  background-position: 0 50%;
 
  padding-left: 12px;
 /*normalmente isto é o comprimento da imagem de forma a que o texto 
não a sobreponha*/
  font: normal .9em Verdana, Helvetica, sans-serif;
        /*Tipo de letra*/
  color: #000000;
                                                /*cor da letra*/
}

css
ul{ 
  list-style-type: none;
 
} 
 

TrackBack URI for this entry

Rodrigo Piva Setembro 11, 2008 http://www.curiosando.com.br	Muito bom! Estou ainda engatinhando em CSS e essas dicas ajudam bastante. Abraços
Marcelo R. de Souza Setembro 11, 2008 http://csspadroes.blogspot.com	Só uma sugestão para o código. Se a caso o desevolvedor tiver certeza que os itens da lista não vão tem mais que uma linha. Ex: a Sidebar de vez colocar background: url(img.gif) no-repeat 0 50%; ele simplesmente coloca list-style: url(img.gif) no-repeat. Só uma sugestão o artigo esta bem explicado e simples. Abraço.
vcfazobr Setembro 14, 2008 http://vocefazobrasil.blogspot.com/	Praticamente não sei nada, porém é muito bom sempre aprender com quem sabe então...vou tentar testar este código. bjs...bye!!!
Jackson Lins Janeiro 29, 2010	Valeu mesmo, foi de uma ajuda imprescindível