SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery block display headache

    I'm trying to create a catalog section for my website, so I want to display a series of product images with information and links below them.

    I've read a book (Rachel Andrew's CSS Anthology) that suggest you can use CSS rather than tables to achieve this. I've tried following the book's instructions, but still it doesn't seem to work. Here's an example of my mark-up and style sheet:

    skillshop.html

    <ul id = "shoplist">
    <li><img src = "sweetypink.gif" width = "100" height = "80" />Sweetypink</li>
    <li><img src = "sweetypink.gif" width = "100" height = "80"/>Sweetypink</li>
    <li><img src = "sweetypink.gif" width = "100" height = "80"/>Sweetypink</li>
    </ul>

    skillshop.css

    #shoplist: {list-style-type: none;
    }
    #shoplist img: {display: block;
    border: 1px solid purple;
    }
    #shoplist li: {float: left;
    width: 80px;
    }

    Any suggestions what I'm doing wrong?

    Also, any suggestions for a better way to achieve this task? ie display product images in a block with descriptions and links below

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    #shoplist: {list-style-type: none;
    }
    #shoplist img: {display: block;
    border: 1px solid purple;
    }
    #shoplist li: {float: left;
    width: 80px;
    }
    Remove the ":" from the end of the selector.

    Code:
    #shoplist {list-style-type: none;
    }
    #shoplist img {display: block;
                    border: 1px solid purple;
    }
    #shoplist li {float: left;
                   width: 80px;
    }
    You will need to ensure that your blocks are all the same height or they will snag when they wrap. If you have varying image heights and varying caption lengths and you only want a set number of images per row then a table is still probably the best idea.

    There are some more complicated methods that allow for some fluidity but are quite advanaced techniques.

    http://www.pmob.co.uk/search-this/stcaption4.htm

    This is explained here by me.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Don't know why I didn't spot the rogue ":" -- I knew it must be something simple. A second pair of eyes always helps!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •