SitePoint Sponsor

User Tag List

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

    How to display images in blocks with captions

    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 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 the mark-up and style sheet:

    skillshop.html

    <ul id = "shoplist">
    <li><img src = "sweetypink.gif" />Sweetypink</li>
    <li><img src = "sweetypink.gif" />Sweetypink</li>
    <li><img src = "sweetypink.gif" />Sweetypink</li>
    </ul>

    skillshop.css

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

    Any suggestions what I'm doing wrong?

    Also, any suggestions for a better way to achieve this task?

  2. #2
    SitePoint Zealot Rexibit's Avatar
    Join Date
    Jul 2008
    Location
    United States
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are going to need to specify a height and width for the images in your content (code). Without that, there are no dimensions to apply the block too.

    Just some info, display:block takes elements which generally appear on the same line (like <span>, <img>, <b>, etc.) and make them block level elements, like <div>'s.

    Lists are block level elements, so, you might also try telling them to be displayed "inline" in your CSS when you are telling them to float. However, try adding a height and width to the images and see if that fixes it first.
    Rexibit Web Services
    Don't just build it - CSS it

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks -- I've tried all that, and it still doesn't work! This is very frustrating, as I am following an example set out in Rachel Andrew's CSS anthology. I have checked everything against the example -- has she made a mistake, do you think?

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dream template really does work. way to review this!
    IF You Don't Rank, You Don't Pay. www.rankpay.com


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
  •