Background color

hello, im just learning how to make a web site with css, through the book “build your own web site…” and it tells me how to put in the code for my menu to switch between pages; it told me to put in a background for that menu, and when i did, it only put the background color on 2 pages out of the 3 that i have, its the “about us” page that doesnt have the background for the menu, and i cant figure out why. ive included the html and css . thankyou for any help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999.xhtml">



  <head>
    <title>About BubbleUnder.com: who we are; what this site is for."</title>
    <meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>

  </head>



  <body>
<div id="header">
<div id="sitebranding">
   	 <h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
	
	<p>Diving club for the south-west UK-Lets make a splash!</p>
</div><!--end of header div -->
<div id=" menu">
	<ul>
	<li><a href="index.html"> Home</a></li>
	<li><a href="about.html">About Us</a></li>
	<li><a href="contact.html">Contact Us</a></li>
	</ul>
</div><!-- end of menu div -->

<div id="body content">
	
	
	<h2>About us</h2>
	<p >Bubble Under is a group of diving enthusiasts based in the south

-west UK who mmet up for diving trips in the summer months when the weather 

is good and the bacon rools are flowing. We arrange weekends away as small 

groupls to cut the costs of accommadation and travel, and to ensure that 

everyone gets a trustworthy dive buddy. 
	<p> Althoug we're based in the south-west, we dont stay on our own 

turf: past diving weekends have included trips up to Scapa flow in Scotland and 

Malta's numerous wreck sites. </p>
	<p>And  when we're not diving, we often meet up in a local pub to 

talk about our recent adventures( <em>any</em> excuse, eh?) </p>
<p>Or as our man Jimmy would put it:</p>


<blockqoute>
<p >"Happiness is a dip in the ocean followed by a pint or two of Old Speckled 

Hen. You can qoute me on that!"</p></blockquote>


	








  </body>









</html>




/*
CSS for Bubble Under Site
*/





p {	font-size: large;
	
	font-weight: normal;
	color: navy;
}	

	


#tagline p {
	background-color #bed8f3;
	border-top: 3px solid #7da5d8;
	border-bottom: 3px solid #7da5d8;
	font-style: italic;
	font-family: Georgia, Times, serif;
	
	
}

#menu {	
	width: 180px;
	border: 1px dotted navy;
	background-color: #7da5a8;
}
	


body {
	font-family:  Verdana, Helvetica, Arial, sans-serif;
	background-color:#e2edff;
	line-height: 120%;
	padding: 15px;
	border: 4px solid navy;
	
}
/* beginning of header changes*/

h1, h2, h3 {
	font-family: "Trebuchet MS", Arial,Helvetica, sans-serif;
	color: white;
}
h1{
	background-color: navy;
	color: white;
	font family:  "Trebuchet MS", Arial,Helvetica, sans-serif;
	font-size: x-large;	
}



h2  {	
	
	font-family: "Trebuchet MS", Arial,Helvetica, sans-serif;
	color: navy;
	font-weight:normal;
	font-size:130%;
}
/* ending of header changes*/
li {
	font-size:small;
}


em   {
	 font-style: normal;
	text-transform: uppercase;
}


a   {
	font-weight: bold;
	
	
}

a: link {
	color: black;
}

a: visited  {
	color: navy;
}

a: hover  {
	text-decoration: none;
	color: white;
	background-color: navy;
}

a: active  {
	color: aqua;
	backgrond-color: navy;
}

Hi pwf269, I don’t see a background color on the actual menu in the code you posted. What page is this on in the book? What background color is meant to be on the menu?

hi thankyou for responding. this is what is says in my css page

#menu {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8;

2 pages will show the background color but 1 page wont, and i dont understand why.

Just thought I should mention you have a typo in background-color here

a: active {
color: aqua;
backgrond-color: navy;
}

Also, is the background not loading on the about us page when that’s the active page or is it not loading on the about us page’s link in the menu? Are you trying to duplicate the functionality already on the site?

As well as the typo mentioned above (missing u in background) these are all invalid:


a: link {
	color: black;
}

a: visited  {
	color: navy;
}

a: hover  {
	text-decoration: none;
	color: white;
	background-color: navy;
}

a: active  {
	color: aqua;
	background-color: navy;
}

There should be no space between a and the colon. ( i.e. a:link not a: link)

hello, the menu part in the "about us " page in not showing the background. The background for the menu on the other 2 pages show up no problem.

thankyou very much for that info. that was going to be my next question.

Run your html and css through the w3c validator and you should pick up your mistakes.

The menu styles are not being applied because you have a space at the start of the id.


<div id=" menu">

It should be:


<div id="menu">

You also have missing closing divs for #header and for #body.

You cannot have 2 ids on an element either:


<div id="body content">

That should probably be body-content or if you need two then use classes instead.

class=“body content”

When you are learning have the w3c css validator and the w3c html validator open in another tab and check your code at every turn to catch the typos we all make when starting.:slight_smile: