Question

I am trying to list images on my webpage with text underneath each image. The images have css opactiy when the user hovers over the image. I have just listed the images in a div like so:

<div id="FirsRowImg">                   
<a class="linkopacity" href="services_backdrops.html" >
<img src="images/backDropSrv.png" border="0" ></a>  


<a class="linkopacity" href="services_balloons.html" >
<img src="images/balloonsSrv.png" border="0" ></a>  

<a class="linkopacity" href="services_centerpieces.html" >
<img src="images/CtrPieceSrv.png" border="0"  ></a> 

<a class="linkopacity" href="services_flowers.html" >
<img src="images/flowersSrv.png" border="0"   ></a> 

<a class="linkopacity" href="services_chaircovers.html" >
<img src="images/chairCvrsSrv.png" border="0"  ></a>
</div> 

I have put the text that goes under each image into a list but cannot get the right spacing between them as some text is longer. I have listed this like so:

<div id="navSrv">
<ul>
<li>Backdrops &amp; Drapes</li><li>Balloons</li><li>Centre Pieces</li><li>Flowers</li><li>Chair Covers</li>
</ul>
</div>

The CSS used for the images is just spacing, the CSS used for the text is:

#navSrv ul li{

   list-style-type:none;
   float: left;
   position: relative;
   top: -9px;
   left: 41px;
 }

#navSrv ul{
margin-left:-110px;
 } 

#navSrv li{
margin-left:90px;
 }

I have tried to add a class into each li but that didn’t work. I would appreciate any help with this. Thanks

Answer 1

Edit: Ive adjusted the code so the text should appear under the images.
You could try nesting Divs like this:

<div id="FirsRowImg">
  <div class="ImgCell">
    <a class="linkopacity" href="services_backdrops.html" >
      <img src="images/backDropSrv.png" border="0" >
      <p>Backdrops &amp; Drapes</p>
    </a>
  </div>
  <div class="ImgCell">
    <a class="linkopacity" href="services_balloons.html" >
      <img src="images/balloonsSrv.png" border="0" >
      <p>Balloons</p>
    </a>
  </div>
...etc etc...
</div>

and use CSS to style the ImgCell (I would imagine you can use most of the CSS you have for the images themselves and use them for the ImgCell instead).

.ImgCell{
display:block;
float:left;
margin-right:20px;//or whatever space you want between the images
width:100px;//same or similar width as your image
}
.ImgCell p{
float:left;
clear:both;
}

I hope this helps!