Dúvida na criação do CSS de um menu.

[Matheus Matos]

Salve galera... estou me batendo aqui para criar um menu. No meu psd, projetei ele assim:

Pois é, o que fiz, criei uma div para o menu, e fui manipulado a lista não-ordenada(ul) e a lista ordenada(li), meu css tá assim:

/* Menu */

#menu {position:absolute; top:255px; left:0px; width:960px; height:44px; background:url(img/menu_bg.gif) repeat-x; font-family:Tahoma, Arial; color:#213e90;}

#menu ul {list-style:none; margin-top:8px;}

#menu ul li {display:inline; padding:12px;}

#menu ul li a {text-decoration:none;}

#menu ul li .ativo {background:url(img/menu_ativo_bg.gif) no-repeat;}

#menu ul li a:hover {text-decoration:underline;}

Mas, com essas configurações, o menu fica assim:

Já tentei padding e margin, entre outras propriedades, mas não consegui.

Realmente tentei bastante coisa antes de postar, e gostaria da ajuda de vocês!

Vlw

Matheus Matos

[Jonathan Queiroz]

Se possível poste o código HTML dessa parte do site.

Quanto ao margin e padding, você está colocando em que elemento ?

Tente colocar isso no ul.

[Matheus Matos]

Grande Jonathan! Efim, o HTML da pagina:

<div id="menu">
    <ul>
        <li><a class="ativo" href="http://meusite.com.br/">Home</a></li>
        <li><a class="ativo" href="http://meusite.com.br/sobre/">Sobre</a></li>
        <li><a class="ativo" href="http://meusite.com.br/contato/">Contato</a></li>
    </ul>
<div>

o padding coloquei no ul mas não deu certo!

Vlw

Matheus Matos

[Jonathan Queiroz]

Troque essa linha:

#menu ul li {display:inline; padding:12px;}

Por:

#menu ul li {display:inline; padding-right:12px;}

E acrescente essa:

#menu ul
{
  margin-left:0;
   padding-left:0;
}