Ir para o conteúdo

Painel Horizontal

HTML

<div id="nav">
  <ul>
    <li><a href="http://skeletorscorpse.com/joomla/#">Home</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">News</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">About</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">Services</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">Links</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#" >Contact</a></li>
  </ul>
</div>

Se quiser não precisa de usar uma Div, pode usar uma Table Cell.

Isto apenas vai tirar os bullets dos links, para que fiquem como isto:

CSS

Na primeira parte de código CSS vamos usar para meter uma border à volta da td ou da div:

#nav{
  border:1px solid #FFFFFF;
}

Neste caso estamos a usar o ID (reparem no #), mas também se pode usar a class (teríamos de fazer tipo .nome_da_classe).

Agora vamos aplicar um pouco de CSS para formatar a layout para o nosso ul:

#nav ul{
  width:100%;
  background-color:#6699cc;
  padding-left:0;
  margin:0;
  float:left;
} 

Isto mantém a barra de navegação na esquerda com a float tag.

Agora temos de formatar cada li:

#nav ul li{
  display:inline;
}

Agora precisamos de aplicar um pouco de CSS para os nossos links com as tags li:

#nav ul li a{
  float:left;
  color:#FFFFFF;
  padding:6px 12px 6px 12px;
  border-right:1px solid #FFFFFF;
}

Isto serve para o link se parecer mais com um botão do que com um simples link.

Ideia: Você pode usar outro formato de letra ou então usar o default de links da sua página.

Para adicionar rollouver só precisamos de adicionar este bocadinho de código de CSS. Isto mudará a cor de fundo para dark-blue:

#nav ul li a:hover{
  background-color:#336699;
}