18 de fevereiro de 2008

Como criar menus horizontais com CSS e XHTML

Menus horizontais com CSS é uma informação que muitos novatos aos padrões Web querem saber. Para facilitar a vida desses novatos e daqueles que podem se esquecer de algum detalhe, aprenda como fazer um menu horizontal com CSS e XHTML.


HTML



<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

CSS



ul {
list-style: none; /* Tira os marcadores (as "bolinhas") da lista */
margin: 0; /* Zerando as margens */
padding: 0; /* Zerando os paddings */
}

ul li {
display: inline; /* Colocando todos os links em uma única linha */
border: 1px solid #DDD;
border-right-color: #555;
border-bottom-color: #555;
}

Depois desse CSS o menu já está quase pronto. Só precisa ficar mais bonito, certo?

CSS



ul li a {
text-decoration: none; /* Tira o sublinhado */
color: #555;
}

ul li a:hover {
color: #F00;
background: #CFF;

Quando olhamos mais atentamente para o menu, podemos perceber um espaço na parte direita dos links. Para acabar com isso use float:

CSS



ul li {
display: inline; /* Colocando todos os links em uma única linha */
border: 1px solid #DDD;
border-right-color: #555;
border-bottom-color: #555;
float: left; /* Sumindo com espaço na direita dos links*/
}

Agora os links ficaram colados uns aos outros. Nada que um padding não resolva.

CSS



ul li a {
text-decoration: none; /* Tira o sublinhado */
color: #555;
padding: 0.2em; /* Criando um espaço nos links */
}

O menu está pronto!

Saiba mais Técnicas CSS para menus.

Referencias:
Um menu inline
Tags:

13 comentários:

ADM_Leonardo disse...

Maneiro olha meu site vamos ser parceiros
Site: www.sodicasdemu.blogspot.com
Msn: leonardovnovaes@hotmail.com

Letícia Godoy disse...

Oi Guido, sou novata rssss
Só consefui fazer o menu em HTML, em CSS não consegui, não sei onde coloca-lo no código. Estou perdida rssss.
O em HTML não sei como mudar as cores, deixa-lo mais bonitinho. Se vc puder me ajudar ficari muitissimo agradecida. já dei uma pesquisada na net, mas não estou conseguindo fazer.
obrigada

Guido disse...

Olá Leticia, bem vinda ao blog. :)
Para inserir o código CSS você precisa criar um arquivo especial, com a extensão .css . É nesse arquivo que você põe aquele código. Depois disso, você tem que "chamar" esse arquivo no seu html. Use esses links para inciar os seus estudos:
http://www.pinceladasdaweb.com.br/blog/2007/10/08/css-tip-as-3-formas-de-inserir-css-em-uma-pagina-web/ (recomendo usar a forma numero 3)
http://w3css.blogspot.com/2007/03/sintaxe-css-ol-pessoal-bom-pra-comear.html
http://w3css.blogspot.com/2007/03/seletores-css.html

Volte sempre. :D

Letícia Godoy disse...

Obrigada Guido, mas ontem fiquei na frente do PC enquanto não consegui, não sosseguei rsssss. Resultado, consegui rsssss
Mas precisava de vc para me esclarecer uma dúvida, eu quero linkar o menu para outras páginas do meu blog, como uma para infomações, como devo fazer? Tenho que fazer outros blogs? EX: p/ o infomação, teria q fazer outro blog tipo: informacao.blogspot.com? É assim?
Aí cada assunto de cada link deverá ser um novo blog?
Agora só falta isso no momento, aí te deixo em paz por um tempinhos rsss. Muito obrigada

Guido disse...

Oi Leticia :)

Não precisa criar outros blogs. É só fazer um post e criar um link pra ele. Por exemplo:
http://seublog.blogspot.com/2009/04/informacoes

Coloque esse endereço aonde está o #, dentro da tag a e pronto, um link vai leva-la a outro post.

É mais ou menos isso o que eu faço aqui, naquele menu no topo ("Home", "Sobre"), se eu quiser linkar mais um post lá é só eu editar o meu HTML com a url da página.

Espero que tenha entendido, acho que ficou meio confuso.

Até mais. :D

Letícia Godoy disse...

Oi Guido, sou eu de novo rsss. Dúvidas: http://seublog.blogspot.com/2009/04/informacoes
/04 é o mês?
Fiz como vc disse, mas qdo clico no botão que criei diz página não encontrada. E ainda aparece o nome lá nos arquivos. Bom, para vc entender melhor o que estou dizendo dê uma olhada no blog teste, ainda não passei nada para o oficial pq ainda não estou conseguindo fazer direito, colocarei lá só qdo estiver tudo ok. blog teste http://afinema.blogspot.com/
Dê uma olhadinha por favor.
Desde já agradeço

Guido disse...

Olá Leticia
Sim, 04 indica o mês.
Faça como você fez no seu blog de teste. Crie um texto e poste pelo blogger, depois vá na página que ele criou e copie o endereço. Edite o HTML para incluir os endereços novos. Você fez isso certo com a página http://afinema.blogspot.com/2009/04/midia.html , tá funcionando. Agora é só fazer o mesmo com as outras páginas.

Ps: Uma dica,no seu botão "Home" você usou um a href="#", troque isso por um a href="http://afinema.blogspot.com/", isso vai te evitar problemas.

:D

Letícia disse...

obrigada Guido, vc como sempre super atencioso. Depois que postei aqui eu me dei conta q faltava o html no fim, rssss por isso não dava certo. Mas como nunca tenho uma dúvida só rsss.... e vc sempre me responde... gostaria de saber se tem como eu criar uma coluna a esquerda e aumentar o banner nesses templates do blogger ou só trocando o template mesmo.

Letícia disse...

ahhhhhhhh lembrei de mais uma dúvida rsssss, eu registrei um dominio .com, eu posso horpedar meu blog nele? Se puder, aí fica tudo como está? digo, painel de controle das funções, as postagens, ...........????
Por enquanto é isso rsss.
Obrigada abç

Guido disse...

Olá Letícia,

Também dei bobeira em dar um exemplo sem o .html no fim, foi mal.

Com relação às suas dúvidas:
- Tem como sim, mas é um pouco difícil ainda mais pra quem não é muito bom em HTML. Se quiser tentar entre no blogger, clique em "Layout" e depois em "Editar HTML". Aconselho procurar um outro template que atenda às suas necessidades, é muito mais fácil.

- Para usar o blogger em outro dominio vá em "Configurações" > "Publicação" > Alternar para: • Domínio personalizado.
> Já tem um domínio? Ir para configurações avançadas. Depois insira o seu domino lá que deve funcionar.

Até mais. :)

Letícia disse...

Oi Guido, eu de novo rsssss. Lá em configurações avançadas para colocar no dominio q registrei, diz que tenho q ter um template padrão, isso quer dizer q terei q ficar com aqueles do blogs mesmo, não posso mudar? Outra pergunta, vai ficar tudo igual, panel de controle......... como se eu ainda estivesse no blogspot ou muda alguma coisa? Isso q falo é em relação as postagens a alimentação do blogs, não sei se vc me entende.
abç

Letícia disse...

opsssss não template padrão que diz, e sim, modelo classico.

Guido disse...

Olá Leticia,

Eu nunca usei um domínio diferente no blogger, então não posso te ajudar muito. Mas achei um site que talvez te ajude:

http://blosque.com/2007/08/como-usar-um-domnio-personalizado-no.html

:)