title: Trying to make a horizontal navigation bar, but it's being tricky
body: <p>I am trying to create a horizontal navbar for my site, right under the banner. I want my navbar made from of an image I made in photoshop. No matter what I do, I can't get it to work. I'm tried to make it with rollover links as well.</p>
  
  <p>Can somebody tell me what I am doing wrong? This code is part of my master.dwt file. It's located in a folder called "templates" in my root directory.</p>
  
  <p>Thanks!</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#navigation {
      width: 800px;
      height: 36px;
      background-color: transparent;
      margin-left:auto;
      margin-right:auto;
  }
  #navbar {
      list-style: none;
      height: 36px;
  }
  #navbar li {
      float: left; }
  #navbar a {
  display:block;
  background:url(../nav bar2.png);
  width:200px;
  text-indent:-9000px;
  }
  #navbar a.link1:hover {background-position:0px -36px;}
  #navbar a.link2 {background-position:-200px 0px;}
  #navbar a.link2:hover {background-position:-200px -36px;}
  #navbar a.link3 {background-position:-400px 0px;}
  #navbar a.link3:hover{background-position:-400px -36px;}
  #navbar a.link4 {background-position:-600px 0px;}
  #navber a.link4:hover {background-position:-600px -36px;}
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="navigation"&gt;
  &lt;ul id="navbar"&gt;
  &lt;li&gt;&lt;a href="default.html" class="link1"&gt;home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.html" class="link2"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="portfolio.html" class="link3"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html" class="link4"&gt;contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Heres the photo:
  <a href="http://i.stack.imgur.com/uEdO8.png" rel="nofollow">http://i.stack.imgur.com/uEdO8.png</a></p>