Help with CSS for Course assingment : Nav section background color not showing up

Community Off Topic
1

Hello

I am a student at a local Technical College taking an intro course on HTML & CSS.
Our book is the 3rd edition of Terry Felke Morris’s " Basics of Web Design: HTML5 & CSS3 ".

**Chaper 7 homework. Page 243 . **

  • Problem: Can’t get the Navigation column background color the same as shown in the book. It is a dark beige color.

Thanks

Here is my CSS , in notepad++

body     {  background-color: #F5F5DC;
               color: #2E0000;
	       font-family: Verdana, Arial, sans-serif; 
              background-image: url(javabackground.gif);                }
		   
		   
#wrapper {  width: 80%;
                margin-left: auto;
		margin-right: auto;
		background-color: #E2D2BO;
		min-width: 960px;
		max-width: 2048px;
               box-shadow: 5px 5px 5px #2E0000;                          }
		   
                                                                                           
header   { background-color: #D2B48C;                                }


h1        {  font-family: Georgia, "Times New Roman", serif;
              height: 100px;
              background-image: url(javalogo.gif);
	      background-position: center;
	      background-repeat: no-repeat;
	      text-indent: -9999px;
	      margin: 0;                                                 }
		   
		   
nav      { float: left;
             width: 160px;
	     font-weight: bold; 
             text-align: center;
	     padding: 10px;
             padding-left: 0;
             font-size: 1.2em;	                                      }
		   
		   
		   
nav a    { text-decoration: none;                                     }

nav a:link     { color: #795240;                                     }
nav a:visited  { color: #A58366;                                     } 
nav a:hover    { color: #F5F5DC;                                     }


main     { background-color: #F5F5DC;
              margin-left: 175px;
	      padding: 20px; 
              display: block;                                            }
		   
		   
		   
main ul   {  list-style-image: url(marker.gif);
                list-style-position: inside;                              }

main div   {  overflow: auto;
                  font-size: 90%;
		 padding-left: 5%;
                 padding-right: 5%;                                       }
		   
		   
h2       { font-family: Georgia, "Times New Roman", serif;            }


h3       { background-color: #E6D6A9;
           text-transform: uppercase;                                 }

	 
dt       { font-weight: bold;                                         }





#hero    { background-image: url(heroroad.jpg);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   color: #F5F5DC;                                            }
		   

.news    { margin-left: 20%;
           margin-right: 20%;                                         }
		   
		   
footer   { background-color: #D2B48C;
           color: #000000;
	       font-size: .60em;
	       font-style: italic;
	       text-align: center;
	       padding: 10px;      

		                                                              }	
footer a:link     { color: #2E0000;                                   }
footer a:visited  { color: #000000;                                   } 
footer a:hover    { color: #F5F5DC; 	                              }

Here is my HTML for the Index/Home page.

<!DOCTYPE html>
<html lang="en">


<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link href="javajam.css" rel="stylesheet">
</head>

<body>

<div id="wrapper">


<header>
<h1>JavaJam Coffee House</h1>
</header>

<nav>
<ul>
<a href="index.html">Home</a> &nbsp; 
<a href="menu.html">Menu</a>  &nbsp; 
<a href="music.html">Music</a>  &nbsp; 
<a href="jobs.html">Jobs</a> &nbsp; 
</ul>
</nav>


<main id="hero">

<h2>Follow the Winding Road to JavaJam</h2>

<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday</li>
</ul>


<div>
54321 Route 42<br>
Ellison Bay, WI 54210<br>
888-555-5555<br><br>
</div>

  
</main>



<footer>
Copyright &copy; 2016 JavaJam Coffeee House<br>
<a href="mailto:[email protected]">[email protected]</a>
</footer>


</div>


</body>


</html>
2

Hey, I suggest you take a look at this link: https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/51139?source_topic_id=78832
to help you format your code. It will benefit both parties.

3

Ok, I think the color is #e7debf since that’s the colour I picked up from the picture. To get your nav to look like that, I suggest adding background-color and set height to 320px to your nav selector:

nav {
    ...
    background-color: #e7debf;
    height: 320px;
}
4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.