5

Estou trabalhando em um projeto da faculdade em que preciso fazer um site para uma pizzaria. Estou fazendo um embrião do site, mas quando eu adiciono o menu de navegação, aparece uma barra em cima do div correspondente que não deveria existir:

Aquela barra cinza em cima não deveria existir

Porém, quando eu removo todo o menu, a barra some:

Agora deu certo

Por que isso acontece? Esse é o meu CSS:

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #DDDDDD;
    font-family: 'Roboto Condensed', sans-serif;
}
#header {
    background-color: #33b5e5;
    height: 59px;
}
#content {
    height: 600px;
    width: 100%;
}
#footer {
    height: 120px;
    background-color: #33b5e5;
}
.menu ul {
    list-style: none;
    padding: 0px 5px;
}
.menu ul li {
    display: inline;
}
.menu ul li a {
    display: inline-block;
    font-size: 14pt;
    font-weight: 300;
    padding: 17px 5px;
    color: white;
    text-decoration: none;
}
.menu ul li a:hover {
    background-color: #0099cc;
    color: #ddd;
}

E o HTML onde estão o div do topo e o menu:

<div id="header">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Pizzas Tradicionais</a></li>
      <li><a href="#">Pizzas Especiais</a></li>
      <li><a href="#">Pizzas Premium</a></li>
      <li><a href="#">Pizzas Integrais</a></li>
      <li><a href="#">Pizzas Doces</a></li>
      <li><a href="#">Bebidas</a></li>
    </ul>
  </nav>
</div>

Não estou conseguindo achar nenhum erro aparente nesse código. O que pode ser?

1
  • 1
    Não relacionado ao problema (que já foi resolvido pelo @abfurlan), mas quando você tiver 0 como medida, não ponha unidades: margin: 0px; => margin: 0;
    – Largato
    8/05/2014 às 21:08

2 Respostas 2

6

Seu ul esta com margin, veja:

.menu ul {
    list-style: none;
    padding: 0 5px;
    margin:0;
}

Exemplo

4
  • Não tenho como testar agora (estou indo pra aula), assim que puder testo e digo o que aconteceu. 8/05/2014 às 21:20
  • resolveu meu problema, obrigado! 8/05/2014 às 22:20
  • 1
    uma questão importante é que quando o valor de uma propriedade é zero não se usa unidade de medida, uma ação quando se cria o site é setar o margin e o padding em zero para todos os elementos 6/08/2014 às 16:25
  • 1
    @leandro17br editei a resposta conforme sua obs...
    – abfurlan
    6/08/2014 às 19:25
4

Este é um problema muito comum no CSS, onde a margin do elemento filho acaba empurrando o elemento pai junto para baixo.

Para resolver o problema, um simples overflow:hidden ou auto no elemento com a margin ja é suficiente:

.menu ul {
    overflow:hidden; /* ou auto */
    /* resto do código... */
}

Para ver um exemplo: FIDDLE

1
  • 2
    É isso mesmo, mas neste caso o colapso não importa tanto (a menos que a intenção seja ter uma barra mais acima, com a cor do #header).
    – bfavaretto
    8/05/2014 às 21:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .