title: issues placing text over an image (CSS, relative positioning)
body: <p>So my issue is thus; I have a image menu (block of 4 photos), I want over the top of each of these photos to display some text. I have done it before, but for some reason this time its all going pear shaped. I don't want to set the images as backgrounds within the css, as I consider them content and want them in the markup.</p>
  
  <p>here is the css i have done:</p>
  
  <pre><code>#club_menu{
  position:relative;
  padding:1px;
  width:99.5%;
  height:400px;
  /*border: 1px solid #A424A9;*/
  }
  #club_menu a{
  position:relative;
  width:295px;    
  }
  #club_menu a h2{
  position:absolute;
  top:100px;
  left:0;
  width:100%;
  }
  #club_menu h2 span{
  color:white;
  font:bold 24px/45px Helvetica, sans-serif;
  letter-spacing:-1px;
  background-color:#A424A9;
  filter:alpha(opacity=70);
  opacity:0.7;
  padding:10px;
  }
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;div id="club_menu"&gt;
              &lt;a href="#"&gt;
              &lt;h2&gt;&lt;span&gt;Aquum Tuesday&lt;/span&gt;&lt;/h2&gt;
              &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/menu_aquum.jpg" width="295" height="195" /&gt; 
              &lt;/a&gt;
              &lt;a href="#"&gt;
              &lt;h2&gt;&lt;span&gt;Movida Wednesday&lt;/span&gt;&lt;/h2&gt;
              &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/menu_movida.jpg" width="295" height="195" /&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
              &lt;h2&gt;&lt;span&gt;Whisky Thursday&lt;/span&gt;&lt;/h2&gt;
              &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/menu_whisky.jpg" width="295" height="195" /&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
              &lt;h2&gt;&lt;span&gt;Jalouse Tuesday&lt;/span&gt;&lt;/h2&gt;
              &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/menu_jalouse.jpg" width="295" height="195" /&gt;
              &lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have been playing around for over an hour now and the labels are simply all over the place. My images are in place perfectly. Can somebody with some skill with CSS, please enlighten me.</p>
  
  <p>Many thanks,</p>