CSS Linkng Problems in fashionhut

Hello,
I am having trouble getting the 3 gallery images linkable. As is its set to link back to this sit, but it's not working. Here is how its coded.

CSS

Code:

#gallery .gwomen {
  background: url(images/pic_1.jpg) no-repeat;
  width: 127px;
}
#gallery .gkids {
  background: url(images/pic_2.jpg) no-repeat;
  width: 130px;
}
#gallery .gmen {
  background: url(images/pic_3.jpg) no-repeat;
  width: 128px;
}

index.html

Code:

 <div id="gallery">
        <ul>
          <li class="gwomen"><a href="http://www.freewebsitetemplates.com">Women</a></li>
          <li class="gkids"><a href="http://www.freewebsitetemplates.com">Kids</a></li>
          <li class="gmen"><a href="http://www.freewebsitetemplates.com">Men</a></li>
        </ul>
      </div>

I see there are spaces between the dots, I removed the space and the images didn't show. gallery .gwomen

Any help would be appreciated.

 

These images with the fashionhut template appear on the background. Change the code so they are foreground images. Put them in the index.html. So comment out the CSS part you posted:

Code:

/*
#gallery .gwomen {
  background: url(images/pic_1.jpg) no-repeat;
  width: 127px;
}
#gallery .gkids {
  background: url(images/pic_2.jpg) no-repeat;
  width: 130px;
}
#gallery .gmen {
  background: url(images/pic_3.jpg) no-repeat;
  width: 128px;
}
*/

Then replace the HTML you posted with:

Code:

<div id="gallery">
        <ul>
          <li class="gwomen"><a href="http://www.freewebsitetemplates.com"><img src="images/pic_1.jpg" width="127" height="111" alt="Women" /></a></li>
          <li class="gkids"><a href="http://www.freewebsitetemplates.com"><img src="images/pic_2.jpg" width="130" height="111" alt="Kids" /></a></li>
          <li class="gmen"><a href="http://www.freewebsitetemplates.com"><img src="images/pic_2.jpg" width="128" height="111" alt="Men" /></a></li>
        </ul>
      </div>

And comment out the li text indent which hides the text inside the CSS.

Code:

#gallery li {
  list-style: none;
  /*text-indent: -999px;*/
  float: left;
  overflow: hidden;
  height: 111px;
}

 

Thank you! That worked perfectly.

 

I made an attempt but couldn't get it work. Such as simple solution you came up with, I'm impressed; got to learn CSS. I added the template into my list of themes.