Linkng Problems in fashionhut

Discussion in 'HTML - XHTML - CSS' started by Creeper, Aug 27, 2010.

  1. Creeper New Member

    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.
  2. enigma1 Guest

    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;
    }
    
  3. Creeper New Member

    Thank you! That worked perfectly.
  4. tomw New Member

    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.