title: how to fix background image and display nav bar horizontally outside of dreamweaver?
body: <p>I want to have the nav bar and logo overlayed on the same banner image.</p>
  
  <p>However, I can't display my banner image. Also, when I preview my page in chrome or explorer rather then the design view of Dreamweaver, my Nav Bar is vertical rather then horizontal.</p>
  
  <p><a href="https://jsfiddle.net/7gd5xod6/" rel="nofollow">Jsfiddle</a></p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  &lt;title&gt;Banner and Navigation menu&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="banner-container"&gt;
          &lt;div id="banner"&gt;
              &lt;div id="logo-and-nav"&gt;
                &lt;a href="#"&gt;&lt;img src="../Website pictures/Logo.PNG" width="173" height="87" /&gt;&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../Website pictures/Nav menu Comic.jpg" alt="Nav menu Comic" width="142" height="108" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../Website pictures/nav menu mashups.jpg" alt="Nav menu mashups" width="88" height="84" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../Website pictures/nav menu store.jpg" alt="Nav menu store" style="width:75px;height:75px" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../Website pictures/search bar.png" alt="search bar" style="width:75px;height:75px" /&gt;&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../Website pictures/nav menu archive.jpg" alt="nav menu archive" style="width:75px;height:75px" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
        &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     &lt;div id="new-products-and-sales"&gt;
     &lt;/div&gt;
     &lt;div id="most-popular-products"&gt;
     &lt;/div&gt;
     &lt;div id="mugs"&gt;
     &lt;/div&gt;
     &lt;div id="hats"&gt;
     &lt;/div&gt;
     &lt;div id="shirts"&gt;
     &lt;/div&gt;
     &lt;div id="accessories"&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my css:</p>
  
  <pre><code>@charset "utf-8";
  @charset "utf-8";
  /* CSS Document */ 
  body {
      margin: 0px;
      padding: 0px;
  }
  
  #banner-container {
      width: 100%;
      height: 204px;
      background-color: #0071b2;
  }
  
  #banner {
      background-image: url('../css/homepage-banner.jpg');
      background-repeat: no-repeat;
      background-position: 100% 0;
      width: 1024px;
      height: 204px;
      margin: auto;
  }
  
  #logo-and-nav {
      width: 60%;
      height:200px;
      margin: 0 auto;
      text-align: center;
  
  }
  
  img {
      border: none;
  }
  
  #logo-and-nav ul
  {
      text-align: left;
      margin: auto;
      width: 1024px;
  }
  
  #logo-and-nav ul li
  {
      display: inline;
      padding: 0px;
      margin: 0px;
  }
  
  #new-products-and-sales
  {
  width: 500px;
      height: 100px;
      margin: auto;   
  }
  #most-popular-products
  {
      width: 500px;
      height: 100px;
      margin: auto;
  }
  #mugs
  {
      width: 500px;
      height: 100px;
      margin: auto;
  }
  #hats
  {
      width: 500px;
      height: 100px;
      margin: auto;
  }
  #shirts
  {
      width: 500px;
      height: 100px;
      margin: auto;
  }
  #accessories
  {
      width: 500px;
      height: 100px;
      margin: auto;
  }
  /* CSS Document */
  </code></pre>