title: HTML 5- adding a navigation bar to a page
body: <p>I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.</p>
  
  <p>I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?</p>
  
  <p>The HTML that I have for this is: (code updated 25/09/2013 @ 17:40)</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cosy Hearts- Home&lt;/title&gt;
  &lt;style type = "text/css"&gt;
  #navbar ul{
      list-style-type: none;
  }
  #navbar ul li{
      list-style-type: none;
      display: inline-block;
  }
  ul{
      list-style-type:none;
      margin:0;
      padding:0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" /&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;a href = "index.html"&gt;Home&lt;/a&gt; | &lt;/li&gt;
      &lt;li&gt;&lt;a href = "products.html"&gt;Products&lt;/a&gt; | &lt;/li&gt;
      &lt;li&gt;&lt;a href = "aboutUs.html"&gt;About Us&lt;/a&gt; | &lt;/li&gt;
      &lt;li&gt;&lt;a href = "contactUs.html"&gt;Contact Us&lt;/a&gt; | &lt;/li&gt;
      &lt;li&gt;&lt;a href = "termsAndConditions.html"&gt;Terms and Conditions&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  &lt;/body&gt;
  
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...</p>
  
  <p>I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?</p>
  
  <p>Cheers!</p>
  
  <p><strong>Edit 25/09/2013</strong></p>
  
  <p>I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):</p>
  
  <p><img src="https://i.stack.imgur.com/1Ky4A.png" alt="screenshot"></p>
  
  <p>As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?</p>