A Paz galera!
Depois de muito ver as pessoas sofrendo com XHTML e CSS para montar um menu na horizontal, resolvi fazer um tutorial sobre o assunto pra tentar ajudar.

O código do XHTML é o seguinte:
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Empresa</a></li>
<li><a href=”#”>Produtos</a></li>
<li><a href=”#”>Serviços</a></li>
<li><a href=”#”>Contato</a></li>
</ul>

Código do CSS comentado:
ul {
/*POR PADRÃO A TAG UL VEM COM MARGIN E PADDING, E AQUI RETIRAMOS ESSA MARGEM E DEFINIMOS TAMBÉM O TAMANHO E TIPO DA FONTE*/
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: Verdana, Geneva, sans-serif;
}

ul li {
/*FLOAT LEFT SERVE PARA CADA LINK FICAR UM DO LADO DO OUTRO*/

float: left;
margin-right: 10px;
list-style: none;
}

ul li a {
/*COLOCAMOS DISPLAY BLOCK PARA A TAG “A” VIRAR UM BLOCO. O PADDING SERVE COMO UMA MARGEM INTERNA ENTRE O BLOCO E O LINK*/
display: block;
padding: 10px;
color: #666;
text-decoration: none;
background-color: #E6E6E6;
}

/*A PSEUDO-CLASSE “HOVER” DÁ AS CARACTERÍSTICAS DO LINK QUANDO O USUÁRIO ESTIVER COM O MOUSE SOBRE ELE */
ul li a:hover {
color: #E6E6E6;
background-color: #666;
}

Bom galera é isso, qualquer dúvida postem aí . Abraços.


terça-feira, 26 janeiro - 2010
por


  1. Deixe aqui o seu comentário.



0

Spam protection by WP Captcha-Free


Tweetar