Help: Properly Positioning Text on top of Images

I have a gallery product page, in which there are three pictures in one row. Works perfectly fine. But now, I'd like to add a text, basically headline over top of each image.

The code I have is

<div id="products">
					
					<ul>
					
					<li><a href="blinds_roman_shades.php"><span class="product_span">Blinds &amp; Roman Shade Galleries</span><img src="assets/images/products/2 in Basswood blinds by Comfortex 11.jpg" width="180" height="140" alt="" /></a></li>
					<li><a href="coverings.php"><span class="product_span">Speciality Window Coverings</span><img src="assets/images/products/Arched Top Window in HC 9.jpg"  width="180" height="140" alt="" /></a></li>
					<li><a href="honeycomb_pleated_shades.php"><span class="product_span">Honeycombs &amp; Pleated Shades</span><img src="assets/images/products/HD Duette 22.jpg" width="180" height="140" alt="" /></a></li>
					
					<li><a href="insulated_blinds.php"><span class="product_span">Insulated Blinds &amp; Shades</span><img src="assets/images/products/Fusion detail 7.jpg"  width="180" height="140" alt="" /></a></li>
					<li><a href="roller_shades.php"><span class="product_span">Roller Shades</span><img src="assets/images/products/Designer Screen Roman Shade by Hunter Douglas 5.jpg" width="180" height="140" alt="" /></a></li>
					<li><a href="window_shadings.php"><span class="product_span">Window Shadings</span><img src="assets/images/products/HD Silhouette with Easyrise 7.jpg"  width="180" height="140" alt="" /></a></li>
					
					<li><a href="shutters.php"><span class="product_span">CB &amp; S Shutters </span><img src="assets/images/products/Norman 2.5 in louvers surrond tub 6.jpg" width="180" height="140" alt="" /></a></li>
					<li><a href="verticals.php"><span class="product_span">Verticals</span><img src="assets/images/products/KI PVC Vertical 21.jpg"  width="180" height="140" alt="" /></a></li>
					<li><a href="verticals.php"><span class="product_span">Verticals</span><img src="assets/images/products/KI PVC Vertical 21.jpg"  width="180" height="140" alt="" /></a></li>

					</ul>

Code (markup):

and the css for positioning the images are

#products ul {width:600px;}
#products ul li { display:inline;}
#products ul  li a img { margin:5px; margin-top:40px; border: black 1px solid; padding:1px;}

Code (markup):

now what should I do, to get the respect span text over the head of each image. Still, they should appear three in a row.

hope someone can help...

 

Not very sure about your idea for the design, made 2 different versions here - http://markupdude.com/tmp/Help_GAdsense/

PS : Adding width/height onto the images is not a good idea & don't forget to use CSS resets.