Ferramentas de Usuário

Ferramentas de Site


dev_web:css:painel_horizontal

Tabela de Conteúdos

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

A primeira parte de código CSS Nós 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 pode-se usar a class (teria-mos de fazer tipo .nome_da_classe).

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

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

Isto mantém a navigation bar na esquerda com a float tag.

Agora temos de formatar cada li tag:

#nav ul li{
  display:inline;
}

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

#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.

Você pode usar outro formato de letra ou então usar o default de links da sua pagina…

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;
}
Tópico de discussão no fórum: Painel Horizontal
dev_web/css/painel_horizontal.txt · Última modificação em: 2018/05/14 21:37 (edição externa)