Quando criamos a nossa lista com os itens do menu usando <ul>:
<ul>
<li>item do menu</li>
<li>item do menu</li>
<li>item do menu</li>
<li>item do menu</li>
<li>item do menu</li>
</ul>
o resultado fica parecido com:
Cada um de nossos <li> ocupam uma linha, isso ocorre pois esta tag é considerada de bloco, ou seja, mesmo que o conteúdo dela seja pequeno, todo o espaço da linha é reservado.
Para mudar esta característica utilizaremos o elemento FLOAT do CSS, o código ficará assim:
li
{
float: left;
/* a partir daqui meu CSS formata a aparência de cada item do menu */
width: 200px;
text-align: center;
list-style-type: none;
border: 1px solid #000;
background-color: red;
}
A função do FLOAT aqui é fazer com que cada um de nossos <li> fiquem "soltos" na tela. Como indiquei que ele irá "flutuar" para a esquerda, o conteúdo do meu <li> se moverá até encontrar algum obstáculo nesta direção. Esse efeito acontecerá em todos os itens da lista, fazendo com que ela fique na horizontal.
O resultado após terminarmos a formatação será esse:
Faça o teste modificando o FLOAT para right (direita) e compare os resultados.
Segue o código completo usado para criar o menu:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu horizontal com CSS</title>
<style type="text/css" media="all" id="test">
li
{
float: left;
width: 200px;
text-align: center;
list-style-type: none;
border: 1px solid #000;
background-color: red;
}
a
{
color: #FFF;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">item do menu</a></li>
<li><a href="#">item do menu</a></li>
<li><a href="#">item do menu</a></li>
<li><a href="#">item do menu</a></li>
<li><a href="#">item do menu</a></li>
</ul>
</div>
</body>
</html>
Um comentário:
Muito bom o tutorial professor ;)
Postar um comentário