Problema com menu horizontal

Igor Veronesi · Junho 4, 2009

Bem, estou precisando de uma ajuda de vocês para saber onde estou errando na programação de um menu horizontal onde o hover é uma outra imagem. (não possui bordas)

O menu tem largura de 450px e altura de 57px. O li a tem largura de 90px e altura de 57px.

O problema é o seguinte: O título de cada link está lá em cima e não estou conseguindo posicioná-los mais à baixo.

vou colocar a CSS e o HTML pra vocês darem uma olhada e tentar me ajudar.

Desde já agradeço a atenção. igor_veronesi@hotmail.com

HTML:

<ul>

<li><a href="#">SERVIÇOS</a></li>

<li><a href="#">EQUIPE</a></li>

<li><a href="#">DESTAQUE</a></li>

<li><a href="#">CONTATOS</a></li>

</ul>

</div>

CSS:

#menu ul {

width: 450px;

height: 57px;

padding:0px;

margin:0px;

float: left;

background-color:#1480a7;

list-style:none;

}

#menu ul li {

float:left;

}

#menu ul li a {

width: 90px;

height: 57px;

padding-left: 0;

float:left;

/* visual do link */

background-color:#1480a7;

color: #fff;

font: 11px Arial, Helvetica, sans-serif; font-weight: bold;

text-align:center;

text-decoration: none;

}

#menu ul li a:hover {

width: 90px;

height: 57px;

background: url(btn_verde.gif) no-repeat left bottom;

color: #1480a7;

}

Willian Antunes · Junho 4, 2009

Segue o código arrumado:

<html>
<head>
<title>Script Brasil</title>
<style type="text/css" media="screen"><!--

*        {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

#menu ul {
    width: 450px;
    height: 57px;
    background-color:#1480a7;
    list-style:none;
}

#menu ul li {
    float: left;
    disyplay: inline;
}

#menu ul li a {
    padding-top: 22px; /* Perceba que esse valor de px mais o height da o valor da altura do ul */
    display: block;
    width: 90px;
    height: 45px; /* Esse é o valor que soma com o padding */
    background-color:#1480a7;
    color: #fff;
    font: 11px Arial, Helvetica, sans-serif; font-weight: bold;
    text-align:center;
}
#menu ul li a:hover {
    background-color: gray;
    color: black;
}

--></style></head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">EQUIPE</a></li>
<li><a href="#">DESTAQUE</a></li>
<li><a href="#">CONTATOS</a></li>
</ul>
</div>
</body>
</html>

Abraços! :)

Igor Veronesi · Junho 4, 2009

Obrigado Willian. Sabia que era resolvido com padding mas não estava conseguindo achar a solução. Passei ontem a noite inteira tentando resolver isso. Já estava com a cabeça cansada e não estava conseguindo raciocinar.

Valeu meu camarada.

Segue o código arrumado:

<html>
<head>
<title>Script Brasil</title>
<style type="text/css" media="screen"><!--

*        {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

#menu ul {
    width: 450px;
    height: 57px;
    background-color:#1480a7;
    list-style:none;
}

#menu ul li {
    float: left;
    disyplay: inline;
}

#menu ul li a {
    padding-top: 22px; /* Perceba que esse valor de px mais o height da o valor da altura do ul */
    display: block;
    width: 90px;
    height: 45px; /* Esse é o valor que soma com o padding */
    background-color:#1480a7;
    color: #fff;
    font: 11px Arial, Helvetica, sans-serif; font-weight: bold;
    text-align:center;
}
#menu ul li a:hover {
    background-color: gray;
    color: black;
}

--></style></head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">EQUIPE</a></li>
<li><a href="#">DESTAQUE</a></li>
<li><a href="#">CONTATOS</a></li>
</ul>
</div>
</body>
</html>

Abraços! :)

Willian Antunes · Junho 4, 2009

De nada cara ...

Mas olha, o código está com problemas no IE6 e IE7, já arrumei e segue o correto sem bugs no ie e validado :P

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Script Brasil</title>
<style type="text/css" media="screen"><!--

*        {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

#menu     {
    width: 450px;
    height: 57px;
    background-color: green;    
}

ul.barnav {
    background-color:yellow;
    list-style:none;
}

ul.barnav li {
    width: 90px;
    float: left;
    disyplay: inline;
}

ul.barnav li a {
    padding-top: 18px;
    display: block;
    width: 90px;
    height: 39px;
    background-color:#1480a7;
    color: #fff;
    font: 11px Arial, Helvetica, sans-serif; font-weight: bold;
    text-align:center;
}

ul.barnav li a:hover {
    background-color: gray;
    color: black;
}

--></style></head>
<body>

<div id="menu">
        <ul class="barnav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">SERVIÇOS</a></li>
            <li><a href="#">EQUIPE</a></li>
            <li><a href="#">DESTAQUE</a></li>
            <li><a href="#">CONTATOS</a></li>
        </ul>
</div>

</body>
</html>

Hugs!

Entrar

Problema com menu horizontal

Pergunta

Igor Veronesi

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Willian Antunes

Link para o comentário

Compartilhar em outros sites

Igor Veronesi

Link para o comentário

Compartilhar em outros sites

Willian Antunes

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades