Ir para conteúdo
Fórum Script Brasil
  • 0

Problema com menu horizontal


Igor Veronesi

Pergunta

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:

<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>

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;

}

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

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! :)

Link para o comentário
Compartilhar em outros sites

  • 0

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! :)

Link para o comentário
Compartilhar em outros sites

  • 0

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!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...