10 Setembro 2008 Escrito por Gonçalo Martins

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:

<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: 

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*/
}

Artigos Relacionados

• Faça o IE6 comportar-se como o IE7/IE8
• O poder das Content Delivery Network
• O seu website está lento?
• Descubra o cache/Expires Head
• Adicione ícones através de CSS aos seus links

TrackBack URI for this entry

Rodrigo Piva Setembro 11, 2008	Muito bom! Estou ainda engatinhando em CSS e essas dicas ajudam bastante. Abraços
Marcelo R. de Souza Setembro 11, 2008	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	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