Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Trouble Displaying Background Color on Navigation Bar

    I'm new to html and css, and I'm trying to dive into my first site.

    I am unable to get the background color to display for my nav bar. I'm using the 960.gs framework.

    Any help is appreciated!

    HTML:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Bob's Budget Batteries</title>
        <link rel="stylesheet" type="text/css" href="/960fw/css/960_12_col.css" />
        <link rel="stylesheet" type="text/ces" href="/css/home.css" />
     </head>
      <body>
        <div class="container_12 clearfix">
          <div id="header"
               class="grid_2">
    	<img  src="img/boblogo.svg" alt="Bob's Budget Batteries" width ="120" height="120"/>
            <div id="nav" class="grid_10">
    	  <ul>
    	    <li><a href="">Services</a></li>
    	    <li><a href="">Products</a></li>
    	    <li><a href="">About Us</a></li>
    	    <li><a href="">Contact Us</a></li>
    	  </ul>
          </div>
        </div>
      </body>
    </html>
    CSS:

    Code:
    * {
        font-family: Arial, Verdana, sans-serif;
        color: #665544;
        text-align: center;}
        }
    #nav {
        background-color: #33CC33;
        margin-top: 20px;
        padding: 10px 0px 5px 0px;
        z-index: 50;
             }
    li {
        display: inline;
        padding: 5px;
       }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    In the HTML your missing the final close tag </div> . Suggest you get an editor that allows you to indent
    In the CSS you have two } in the * selector:
    Code:
    * {
        font-family: Arial, Verdana, sans-serif;
        color: #665544;
        text-align: center;}
        }
    Also , though it didn't cause a problem, the z-index only works on positioned elements. Here it does nothing.
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Bob's Budget Batteries</title>
        <link rel="stylesheet" type="text/css" href="/960fw/css/960_12_col.css" />
        <link rel="stylesheet" type="text/ces" href="/css/home.css" />
    <style type="text/css">
    * {
        font-family: Arial, Verdana, sans-serif;
        color: #665544;
        text-align: center;
    }
    #nav {
        background-color: #33CC33;
        margin-top: 20px;
        padding: 10px 0px 5px 0px;
    }
    li {
        display: inline;
        padding: 5px;
    }
    </style>
     </head>
    
    <body>
    	<div class="container_12 clearfix">
    		<div id="header" class="grid_2">
    			<img  src="img/boblogo.svg" alt="Bob's Budget Batteries" width ="120" height="120"/>
    			<div id="nav" class="grid_10">
    				<ul>
    					<li><a href="">Services</a></li>
    					<li><a href="">Products</a></li>
    					<li><a href="">About Us</a></li>
    					<li><a href="">Contact Us</a></li>
    				</ul>
    			</div>
    		</div>
    	</div><!--    MISSING THIS   -->
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Petchonator (06-11-2014)

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ridiculous mistakes haha, thanks a lot though. That fixed it!


  •  

    Tags for this Thread

    Posting Permissions

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