Error with CSS, bar appears where it should not

Asked

Viewed 586 times

5

I’m working on a college project where I need to make a website for a pizza place. I’m making an embryo of the site, but when I add the navigation menu, a bar appears on top of the div which should not exist:

Aquela barra cinza em cima não deveria existir

However, when I remove the entire menu, the bar disappears:

Agora deu certo

Why does this happen? This is my 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;
}

And the HTML where the div from the top and 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>

I’m not finding any apparent errors in this code. What?

html css
  • 1

    Not related to the problem (which has already been solved by @abfurlan), but when you have 0 as a measure, do not put units: margin: 0px; => margin: 0;

2 answers

6


Your ul this one with margin, see:

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

Example

  • 1

    @Paulomaciel ja dei upvote. The text induces the inverse ;) (I delete the comment)

  • I have no way to test now (I’m going to class), as soon as I can test and tell what happened.

  • solved my problem, thank you!

  • 1

    an important issue is that when the value of a property is zero no unit of measure is used, an action when creating the site is to set the margin and the padding zero for all elements

  • 1

    @leandro17br I edited the answer according to your Obs...

4

This is a very common problem in CSS, where the margin of the child element ends up pushing the parent element down together.

To solve the problem, a simple overflow:hidden or auto in the element with the margin is enough:

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

To see an example: FIDDLE

  • 2

    That’s right, but in this case the collapse does not matter so much (unless the intention is to have a bar higher up, with the color of the #header).

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.