title: Click on a div Tag and Make it open another page/html file
body: <p>I am having trouble getting a div tag to open another page/local html file when it is clicked.</p>
  
  <p>I have a menu which consists of 5 buttons (div's) These buttons have a background image instead of a color because dream weaver doesn't have the font. Each button also has a hover over feature which changes the div to display an inverted image.</p>
  
  <p>After googling how to make a whole div clickable and then for it to open the next page (local file) none of the methods has worked for me. </p>
  
  <p>What i want to do for example is for when the "productsbutton" div is clicked the local html file called "Products.html" to open and display the content on that page.</p>
  
  <p>My Source code is:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="CSS/design.css" rel="stylesheet" type="text/css"&gt;
  
  
  &lt;div id="wrapper"&gt;
  
    &lt;div id="header"&gt;&lt;/div&gt;
  
    &lt;div id="menu"&gt;
  
      &lt;div id="homebutton"&gt;&lt;/div&gt;
      &lt;div id="Productsbutton"&gt;&lt;/div&gt;    
      &lt;div id="Gallerybutton"&gt;&lt;/div&gt;
      &lt;div id="Menubutton"&gt;&lt;/div&gt;
     &lt;div id="Aboutbutton"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS is </p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  body{
      background-image:url(/Images/background.jpg);
      background-repeat: no-repeat;  
      Width:1400px;
      height:1400px;
  }
  
  #wrapper{
      Width:1000px;
      Height:1400px;
      margin-left:auto;
      margin-right:auto;
      padding:5px;
  }
  
  
   #header{
       width:1000px;
       height:250px;
      background-image:url(/Images/banner.png);
  }
  
  #menu{
      width:1000px;
      height:35px;
      background-color:#1790e1;
      border-radius:5px;
  }
  
     #homebutton{
      width:200px;
       height:35px;
        background-image:url(/Images/Menu_Buttons/Home%20Button.png);
       float:left;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease; 
       -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border-bottom-left-radius:5px;
  }
  
    #homebutton:hover{
  background-image:url(/Images/Menu_Buttons/Home%20Button%20Hover.png);
  filter: alpha(opacity=200);
  opacity:2;
  }
  
  #Aboutbutton{
  width:200px;
  height:35px;
  float:left;
  background-image:url(/Images/Menu_Buttons/About.png);
  border-bottom-right-radius:5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
  }
  
  #Aboutbutton:hover{
  background-image:url(/Images/Menu_Buttons/About%20Hover.png);
  filter: alpha(opacity=200);
  opacity:2;
  border-bottom-right-radius:5px;
  }
  
   #Gallerybutton{
  width:200px;
  height:35px;
  float:left;
  background-image:url(/Images/Menu_Buttons/Gallery.png);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   }
  
   #Gallerybutton:hover{
  background-image:url(/Images/Menu_Buttons/Gallery%20Hover.png);
  filter: alpha(opacity=200);
  opacity:2;
  }
  
   #Menubutton{
  width:200px;
  height:35px;
  float:left;
  background-image:url(/Images/Menu_Buttons/Services.png);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
  }
  
  #Menubutton:hover{
  background-image:url(/Images/Menu_Buttons/Services%20Hover.png);
  filter: alpha(opacity=200);
  opacity:2;
  }
  
  #Productsbutton{
  width:200px;
  height:35px;
  float:left;
  background-image:url(/Images/Menu_Buttons/Products.png);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   color:#000000;
  
  }
  
  #Productsbutton:hover{
  background-image:url(/Images/Menu_Buttons/Products%20Hover.png);
  filter: alpha(opacity=200);
  opacity:2;
   }
  </code></pre>