Archive for the 'Semântica' Tag

Isso sim é semântica

Posted 8 Março 2008
Filed under: Cotidiano, XHTML | Tags: , ,
* Comments(0)

Você já viu semântica de verdade?

semantica

Tem mais aqui.

E pra quem não achou graça nenhuma, web semântica segundo o Wikipédia.

Vi no fechaTag.

Menu horizontal com listas e CSS

Posted 15 Outubro 2007
Filed under: Aprender, CSS, XHTML | Tags: , , ,
* Comments(4)

Uma das coisa que sempre me tirava do sério, eram as listas, principalmente se fosse para fazer menus horizontais. Bom, sempre que você tem um menu de navegação, ou uma barra de navegação, querendo ou não (como diz Diego Eis), você vai ter que coloca-los em uma lista de links.

A minha dúvida era para fazer com que uma lista, onde os itens normalmente estão um embaixo do outro, ficar na horizontal, mas sem retirar as tags <li>, o que prejudicaria a semântica do código.
Então vamos la! Primeiro vamos criar uma página com uma lista de links:


<html>
<head>
<title>Menu horizontal com listas</title>
</head>
<body>
<div id="menuhorizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Notícias</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos ao CSS. As propriedades que serão usadas são Display e Padding. O display:inline; servirá para fazer com que os itens da lista, que normalmente são elementos em “bloco”, se comportem como elementos “inline”, e o padding:10px; servirá para separar os elementos uns dos outros.

Veja como fica:


<style type="text/css">
#menuhorizontal li{
display:inline;
padding:10px;
border:#000 1px dotted;
}
</style>

Prontinho, agora é só ir adicionando mais estilos e deixar o menu do jeito que você quiser.

Lembrando que o CSS vai dentro das tags <head>.
Pra todos um abraço e até a próxima!