Se você precisa colocar dados organizados em uma grade, vc usa uma tabela, ou seja, linhas e colunas. Mas um menu ou o layout de um site não são dados organizados por linhas e colunas, por isso, deve-se usar as tags específicas para cada situação. Para fazer o layout de um site, você pode usar a tag <div>, que funciona como divisor de conteúdo, aliada ao CSS para montar um design mais leve e semânticamente correto. E no caso dos menus? O q usar? O menu não é uma lista de opção, com links para as áreas do site ou algo assim? Então deve-se usar a tag <ul>. Mas vou parar de enrolar e explicar de uma vez como criar o menu usando listas!
MENU VERTICAL
Esse é o código que você vai colocar no lugar onde você quer o menu:
<div id="menu"> <ul> <li><a href="home.htm">01 - Home</a></li> <li><a href="sobre.htm">02 - Sobre</a></li> <li><a href="portfolio.htm">03 - Portfólio</a></li> <li><a href="servicos.htm">04 - Serviços</a></li> <li><a href="contato.htm">05 - Contato</a></li> </ul> </div>
Então na sua folha de estilo ou entre as tags <style type="text/css"> e </style> insira o seguinte código:
/* Base do menu */ #menu { width:260px; padding:0px; margin:0px; } /* Margens da lista */ #menu ul { margin:0px; padding:0px; } /* Nesse caso, sem essa parte ficará um espaço entre os itens do menu */ #menu ul li { display:inline; } /* Itens do menu */ #menu ul li a { display:block; } /* Itens do menu quando o mouse estiver em cima */ #menu ul li a:hover { }
Com excessão da largura da base do menu, não mude nenhum valor. Fique a vontade para colocar a formatação que vc quiser dentro de "#menu ul li a" e "#menu ul li a:hover". Um exemplo que ficou legal foi esse:
#menu ul li a { margin:0px 0px 0px 2px; padding:10px 8px 10px 8px; background-color:#000000; letter-spacing:1px; display:block; } #menu ul li a:hover { background-color:#060606; border-bottom:1px solid #1C1C1C; border-top:1px solid #1C1C1C; padding:9px 8px 9px 10px; }
Agora só um CTRL+C e um CTRL+V e editar do seu jeito e está pronto seu menu vertical!
MENU HORIZONTAL
O código da lista é o mesmo do menu vertical, o que muda é o estilo:
/* Base do menu */ #menu { width:760px; padding:0px; margin:0px; } /* Base da lista e margens */ #menu ul { margin:0px; padding:0px; width:760px; float:left; } /* Nesse caso, isso é necessário para que a lista fique horizontal */ #menu ul li { display:inline; } /* Itens do menu */ #menu ul li a { float:left; } /* Itens do menu quando o mouse estiver em cima */ #menu ul li a:hover { }
Assim como no menu vertical você pode alterar a formatação dos itens do menu.
Para quem não manja muito CSS e quer fazer uns efeitos legais, tipow, mudar as bordas, fundo, fontes e outras formatações, essa é a página da W3Schools que tem a referência do CSS2: http://www.w3schools...s_reference.asp
É isso ae galera... qq dúvida estamos aew!!!
THINK TABLELESS!!!!