Criando um PageControl com css, por Leonardo L Procopio

Tableless!!!

Bom! Resolvi criar um artigo explicando como se projetar um panel com links no topo (se preferir podemos chamar de PageControl).
Isso é muito conhecido aos desenvolvedores de desktop, e nossa idéia é deixar da mesma forma na web!

Primeiramente vamos visualisar o nosso PageControl

Essa é a estrutura do nosso html!

-----------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>PageControl</title>
  </head>
  <body>

  <div id="tudo">
      <ul id="menu_horizontal">
          <li><a href=#>Dados</a></li>
          <li><a href=#>Grid</a></li>
          <li><a href=#>Extras</a></li>
          <li><a href=# class="epecial">Contato</a></li>
          <li><a href=#>Exemplo</a></li>
      </ul>
      <div id="conteudo_painel">      
      </div>
  </div>
  </body>
</html>

-------------------------------------------

Como podemos ver, ele contem um div logo após o body, que engloba todo o conteudo, podendo ser considerado o nosso
segundo body.
Pra que utilizamos isso? Da uma olhada no artigo que escrevi sobre centralizar a pagina na tela .
ele só ta aqui para centralizar!!!

Agora, vamos ao esqueleto do nosso menu (nossas abas!).
Você poderia usar varios comandos html para fazer esse esqueleto, mas na
minha opnião as listas não-ordenadas (<ul>), é a melhor escolha, pois mesmo com o css desabilitado ele vai manter
os links de forma legivel.

Note que temos uma classe="especial" em um link. Isso é necessário para dar um diferencial no link que esta selecionado
(você vai entender melhor isso na frente).

Vamos começar a formatação do nosso menu:

Estamos zerando a margem e o espaço interior da nossa lista, e tambem retirando o marcador.
#menu_horizontal{
    background: #ccc;
    margin: 0;
    padding: 0;
    list-style: none;
}

Agora vamos tirar os links um de baixo do outro e colocar ao lado.
Mas antes disso vou explicar: nos estamos notando que onde os links estão, é um elemento Bloco. Isso quer dizer que ele vai
criar uma quebra de linha antes e depois dele (resumidamente falando!!!). Para colocarmos um ao lado do outro teremos que
retirar essa propriedade dele, fazer um flutuar ao lado do outro:
#menu_horizontal li{
    float: left;
}

Pronto!, agora sim ta começando a ter a forma que estamos querendo!
Agora vamos começar a manipular os links, para dar uma melhor apresentação.
Lembra que tivemos que fazer as li que estavam como bloco vicar uma do lado da outra (inline)? Agora vamos fazer os links
(<a href=...>) que são elementos inline (eles não causam quebra de linha antes e depois deles) virarem blocos.
Aproveitando também para dar um espaçamento entre o texto e as bordar, tirar e tirar o sublinhado!
#menu_horizontal li a{
    display: block;
    background: #f0f0f0;
    padding: 2px 15px 5px;
    margin-right: 7px;
    text-decoration: none;
    color: #000;
    font: 11px Verdana;
    border-top: 1px solid #8cacbb;
    border-right: 1px solid #8cacbb;
    border-left: 1px solid #8cacbb;
}

sintaxe de valores : "padding: top right bottom left;"
Você percebe que não coloquei a borda em baixo do links, eu vou deixar que o div onde vai aparecer o resultado faça isso!

Vamos dar uma melhorada, aplicando uma formatação para o estado hover dos nosso links (estado hover, é quando o ponteiro está
em cima do link!)

#menu_horizontal li a:hover{
    border-top: 1px solid black;
}

Notem que só estou mudando a cor da borda de cima p/ preto, mas você pode colocar uma outra cor de fundo, mudar as outras
bordas, fica a seu gosto.

Agora vamos formatar onde vai aparecer o nosso conteudo, que no caso vai ser o <div id="conteudo_painel"></div>.
Nossa idéia é deixar o fundo da nossa div da mesma cor do fundo dos links; dar um tamanho minimo pra ele (assim deixamos
um padrão mesmo quando o texto for pequeno); uma largura de 700px e a mesma borda dos links. Ufa! Vamos começar!
#conteudo_painel{
    background: #f7f7f7;
    min-height: 300px;
    width: 700px;
    clear: both;
    border: 1px solid #8cacbb;
}

Você notou que tive que colocar um comando clear: both;. Ele é necessário pois os nossos links estão com um float, e sendo
assim eles ficam "sem peso" na página, flutuando mesmo! O clear: both; limpa tudo que tem do lado esquerdo e direito, ou
seja: nada no lado esquerdo e nada no lado direito. Jogando assim pra baixo dos links o noss #conteudo_painel!

Bom, agora só falta um pequeno detalhe pra finalizar nossa obra prima.
Para mostrar qual aba estamos visualizando o conteudo, vamos tirar o sublinhado de baixo dela. Mas como fazer isso?
Nós vamos criar uma class ("especial"), quer ira pintar a borda de baixo do link que foi clicado. Sendo assim, cada
pagina da aba selecionado deverá ter essa class.
Ex: Se for clicado no link Dados, ele vai abrir o documento dados e vai colocar a class="especial" naquele link. Mudando
assim para cada pagina que representa o link.

Olha o códgio:
#menu_horizontal li a.especial{
    background: #f7f7f7;
    margin-bottom: -1px;
    border-bottom: 1px solid #f7f7f7;
}

E no dependendo da pagina é só colocar no link class="especial", para diferenciar do restante.
Suponhamos que a pessoa clicou no link "Extras" e abriu a pagina extras com o mesmo pagecontrol, pra mostrar que estamos
naquela painel, colocamos a classe nele:
<ul id="menu_horizontal">
    <li><a href=#>Dados</a></li>
    <li><a href=#>Grid</a></li>
    <li><a href=# class="especial">Extras</a></li>
    <li><a href=#>Contato</a></li>
    <li><a href=#>Exemplo</a></li>
</ul>

E pronto!! Agora, é só adaptar a sua necessidade e gosto!
Seria bom utilizar ajax pra somente recarregar o div, dando um efeito legal, mas fica a criterio de vocês (e num oooutro
artigo é claro!)

veja o código final:

-----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
/* <![CDATA[ */
#tudo{
width: 770px;
margin: 15px auto;
/*border: 1px solid silver;*/
}
#menu_horizontal{
background: #ccc;
margin: 0;
padding: 0;
list-style: none;
}

#menu_horizontal li{
float: left;
}
#menu_horizontal li a{
display: block;
background: #f0f0f0;
padding: 2px 15px 5px;
margin-right: 7px;
text-decoration: none;
color: #000;
font: 11px verdana;
border-top: 1px solid #8cacbb;
border-right: 1px solid #8cacbb;
border-left: 1px solid #8cacbb;

}
#menu_horizontal li a:hover{
border-top: 1px solid black;
}
#menu_horizontal li a.especial{
background: #f7f7f7;
margin-bottom: -1px;
border-bottom: 1px solid #f7f7f7;
}/**/
#conteudo_painel{
background: #f7f7f7;
min-height: 300px;
width: 700px;
clear: both;
border: 1px solid #8cacbb;
}
/* ]]> */
</style>
</head>
<body>
<div id="tudo">
<ul id="menu_horizontal">
<li><a href=#>Dados</a></li>
<li><a href=#>Grid</a></li>
<li><a href=#>Extras</a></li>
<li><a href=# class="especial">Contato</a></li>
<li><a href=#>Exemplo</a></li>
</ul>
<div id="conteudo_painel">
</div>
</div>
</body>
</html>
----------------------

Grande abraço!!!

Leonardo L Procópio
msn: leonardomerce@hotmail.com
Rio de Luz