SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Code:
    <!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>
    -----------------------------------------------------------
    Code:
    /*
    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;
    }
    Last edited by Paul O'B; Feb 12, 2012 at 05:27. Reason: please use code tags for code snippets

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just thought I should mention you have a typo in background-color here
    Code:
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As well as the typo mentioned above (missing u in background) these are all invalid:

    Code:
    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)

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thankyou very much for that info. that was going to be my next question.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <div id=" menu">
    It should be:
    Code:
    <div id="menu">
    You also have missing closing divs for #header and for #body.

    You cannot have 2 ids on an element either:

    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •