Chapter 12: the selected area goes beyond the navigation bar

[Dexter1996777]

Hello everyone!
I finished Chapter 12 of HeadFirst HTML/CSS. Everything is clear except one minor thing.

The selected area goes beyond the navigation bar. How to make the selected area fit exactly the navigation bar? Please, could you help me?

Have a nice day! Many thanks in advance!

Here’s the screenshot:

Here's the CSS code for the selected area:
nav ul li.selected {
background-color: #c8b99c;
}

[bethrobson]

Hi, I'd have to see the rest of the css. It could be you've got too much padding on the li? E.g. the rule below specifies the padding:

nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}

And all of it is dependent on the sizes (width, height, padding, margin) on all the rest of the elements in the header as well. So double check all of those measurements in your CSS.

[Dexter1996777]

@bethrobson May I ask you to take a look at the final codes (HTML&CSS), please:
HTML:

<title>Starbuzz Coffee</title>

<nav>
<ul>
	<li class="selected"><a href="index.html">HOME</a></li>
	<li><a href="blog.html">BLOG</a></li>
	<li><a href="">INVENTIONS</a></li>
	<li><a href="">RECIPES</a></li>
	<li><a href="">LOCATIONS</a></li>
</ul>
</nav>

<div id="tableContainer">
<div id="tableRow">
<section id="drinks">
	<h1>BEVERAGES</h1>
		<p>House Blend, $1.49</p>
		<p>Mocha Cafe Latte, $2.35</p>
		<p>Cappuccino, $1.89</p>
		<p>Chai Tea, $1.85</p>
	<h1>ELIXIRS</h1>
		<p>
			We proudly serve elixirs brewed by our friends
			at the Head First Lounge.
		</p>
		<p>Green Tea Cooler, $2.99</p>
		<p>Raspberry Ice Concentration, $2.99</p>
		<p>Blueberry Bliss Elixir, $2.99</p>
		<p>Cranberry Antioxidant Blast, $2.99</p>
		<p>Chai Chiller, $2.99</p>
		<p>Black Brain Brew, $2.99</p>
</section>
<section id="main">
  <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
  <p>
    At Starbuzz Coffee, we are dedicated to filling all your  caffeine needs through our 
    quality coffees and teas. Sure, we want you to have a great cup of coffee and a great 
    coffee experience as well, but we're the only company that actively monitors and 
    optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean 
    Machine online order form, and get that quality Starbuzz coffee that you know will meet 
    your caffeine standards.
  </p>
  <p>
    And, did we mention <em>caffeine</em>? We've just started funding the guys doing all 
    the wonderful research at the <a href="http://buzz.headfirstlabs.com"
    title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
    If you want the latest on coffee and other caffeine products, 
    stop by and pay them a visit.
  </p>
  <h1>OUR STORY</h1>
  <p>
    "A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted
    in a damn good cup of coffee.  Starbuzz's CEO is that man, and you already know his 
    plan: a Starbuzz on every corner.
  </p> 
  <p>In only a few years he's executed that plan and today 
    you can enjoy Starbuzz just about anywhere.  And, of course, the big news this year 
    is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence,  
    which is growing rapidly and helping to meet the caffeine needs of a whole new set of 
    customers.  
  </p>
  <h1>STARBUZZ COFFEE BEVERAGES</h1>
  <p>
    We've got a variety of caffeinated beverages to choose
    from at Starbuzz, including our 
    <a href="beverages.html#house" title="House Blend">House Blend</a>,
    <a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>, 
    <a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>,
    and a favorite of our customers, 
    <a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
  </p>
  <p>
    We also offer a variety of coffee beans, whole or ground, for you to
    take home with you.  Order your coffee today using our online
    <a href="form.html" title="form.html">Bean Machine</a>, and take
    the Starbuzz Coffee experience home.
  </p>
</section>

<aside>
  <p class="beanheading">
    <img src="images/bag.gif" alt="Bean Machine bag">
    <br>
    ORDER ONLINE
    with the 
    <a href="form.html">BEAN MACHINE</a>
    <br>
    <span class="slogan">
        FAST <br>
        FRESH <br>
        TO YOUR DOOR <br>
    </span>
  </p>
  <p>
    Why wait?  You can order all our fine coffees right from the Internet with our new, 
    automated Bean Machine.  How does it work?  Just click on the Bean Machine link, 
    enter your order, and behind the scenes, your coffee is roasted, ground 
    (if you want), packaged, and shipped to your door.
  </p>
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->

<footer>
  &copy; 2012, Starbuzz Coffee
  <br>
  All trademarks and registered trademarks appearing on 
  this site are the property of their respective owners.
</footer>

CSS:
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}

header.top {
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}

header.top img#headerSlogan /* You could also just use #headerSlogan here as the selector if you want */{
float: right;
}

#tableContainer {
display: table;
border-spacing: 10px;
}

#tableRow {
display: table-row;
}

section#drinks {
display: table-cell;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}

section#blog, section#main{
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}

aside {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
vertical-align: top;
}

footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 0px 10px 10px 10px;
font-size: 90%;
clear: right;
}

h1 {
font-size: 120%;
color: #954b4b;
}

.slogan { color: #954b4b; }

.beanheading {
text-align: center;
line-height: 1.8em;
}

a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}

a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}

nav {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
}

nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0 px;
}

nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}

nav ul li a:link, nav ul li a:visited {
color: #954b4b;
border-bottom: none;
font-weight: bold;
}

nav ul li.selected {
background-color: #c8b99c;
}

[bethrobson]

In the rule:

nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0 px;
}

you have an extra space between 0 and px. It should look like this:

nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}

[Dexter1996777]

@bethrobson Thank you very much for your advice!

[Dexter1996777]

I set 0px for padding in nav ul li.selected and the selected fits exactly the height of the nav bar:
nav ul li.selected {
background-color: #c8b99c;
padding: 0px;
}

I got it accidentally, @bethrobson could you explain me in detail please how it works?