CODEWITHSUNDEEP
htmlcsslayout
STN
STN

Reputation: 605

navigation bar even spacing

I'm doing some practice with layout using css, and I've come across a weird thing that I don't know how to explain. Where does the space highlighted in red in the following image come from, and how do I eliminate it?

enter image description here

HTML:

<body>
<div class="menu-bar">
    <ul>
      <li>
        <a href="#home">Home</a>
        <ul>
            <li><a href="#beachouse">Beach House</a></li>
            <li><a href="#skicabin">Ski Cabin</a></li>
            <li><a href="#countrycottage">Country Cottage</a></li> 
        </ul>
      </li>
      <li>
        <a href="#news">News</a>
        <ul>
            <li><a href="#worldnews">World News</a></li>
            <li><a href="#nationalnews">National News</a></li>
            <li><a href="#localnews">Local News</a></li> 
        </ul>
      </li>
      <li>
        <a href="#contact">Contact</a>
        <ul>
            <li><a href="#emailaddress">Email Address</a></li>
            <li><a href="#phonenumber">Phone Number</a></li>
            <li><a href="#postaladdress">Postal Address</a></li> 
        </ul>
      </li>
      <li>
        <a href="#about">About</a>
        <ul>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#aboutyou">About You</a></li>
            <li><a href="#aboutus">About Us</a></li> 
        </ul>
      </li>
    </ul>
</div>

</body>

CSS:

body {background: #77c4d3; padding:1%; }

div.menu-bar{position: relative; max-width: 700px;}

/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;} 
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}

/*Menu-specific styles: */
div.menu-bar > ul {width: 100%;}
div.menu-bar > ul > li {width:20%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px;}

/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}

/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul { 
  display: none;
}

/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
  display: block;
  position: absolute;
}

Upvotes: 0

Views: 246

Answers (3)

cdwyer
cdwyer

Reputation: 697

There are a couple of things going on here to be aware of.

1.) You have space in your code, between your top-most <li>'s. This is a funky issue with whitespace. CSS-Tricks has a great summary of the issue. Essentially, you have to put your closing </li> tag back-to-back with the next opening <li> tag, to get rid of those tiny gaps.

2.) Secondly, your width is set to 20%. You can bump this up to even quarters, at 25%...although you'll notice that this pushes the last of your <li>s down a line. This is because...

3.) There is a 10px padding on div.menu-bar li which applies 10px of padding to the left, right, top and bottom. Your div.menu-bar > ul > li rules specify a top and bottom padding, but the left and right are left the same. My personal approach for this?

4.) Use box-sizing. By setting this CSS property to border-box, your padding is included in the width of your elements. In other words, you can set the following CSS:

div.menu-bar > ul > li {
width: 25%;
margin: 0;
padding: 12px;
box-sizing: border-box;
}

...and you'll end up with a set of list items that have a) no funky, tiny space between them and b) are all on the same line.

Hope that helps!

Upvotes: 0

Ava
Ava

Reputation: 2429

That comes from the wrapping <ul> below <div class="menu-bar">. It's width is set to 100% in your css where you say:

div.menu-bar > ul {
     width: 100%;
}

Since the buttons don't fully take up the space in that <ul> there is some extra grey space. If you add a text-align: center; to that style, it will nicely center your buttons, as so:

div.menu-bar > ul {
     width: 100%;
     text-align: center;
}

Or check out my JSFiddle for this.

Upvotes: 1

JakeParis
JakeParis

Reputation: 11210

Each nav item's width is dependent on it's text content. It has no knowledge of how wide it's parent is. Each nav item is just shoved as far left as it can go next to it's neighbor.

If you are looking to have the nav items fill the bar evenly, you will need to use a flex solution. See here for a complete explanation.

Upvotes: 0

Related Questions