SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How the devil would you style this list of images with captions

    Hi There,

    I'm trying to figure out the best method of marking up this list of images, with captions. The images vary in height and the captions are aligned to the right of the images, sometimes with two lines of text, and as close to vertically centred with the image as possible
    See the below image for what I'm trying to achieve. I'd be tempted to use a definition list, floating the captions to the right, but getting each bit of text aligning correctly without styling each individual caption has got me stumped.

    Any thoughts on the matter are most welcome (there will be a lot more images than this, hence the desire for a one rule fits all solution...the grey boxes represent images in case you were wondering):



    Feedback greatly appreciated!

    Dan

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps this article, Vertical Centering of Inline Elements, will help you.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,490
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you use inline-block as mentioned in Gary's article above then you can do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Captions</title>
    <style type="text/css">
    h1 {
        margin:0 0 1em;
        text-align:center;
    }
    a img {
        border:none;
    }
    ul.captions {
        width:560px;
        margin:auto;
        background:#e4d9d3;
        list-style:none;
        padding:0;
    }
    ul.captions li {
        padding:20px;
        font-weight:bold;
        border-bottom:1px solid #ccc;
    }
    ul.captions li a img, ul.captions li a, ul.captions li span {
        display:-moz-inline-box;/*older  mozilla only ff2- */
        display:inline-block;
        vertical-align:middle;
    }
    ul.captions li a {
        width:200px;
        margin:0 20px 0 0;
    }
    ul.captions li span {
        color:#000;
        width:300px;
    }
    ul.captions li img {
        border:1px solid red;
    }
    </style>
    </head>
    <body>
    <h1>Captions and vertical-alignment in IE5.5. and upwards</h1>
    <ul class="captions">
        <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption<br />Here </span></li>
        <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption </span></li>
        <li><a href="#"><img src="images/zimg1.jpg" width="200" height="50" alt="Example image" /></a><span>Caption </span></li>
        <li><a href="#"><img src="images/zimg1.jpg" width="200" height="250" alt="Example image" /></a><span>Caption that is a bit longer and  can run 2 to or more lines </span></li>
        <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption </span></li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies guys - I've used something similar to this and it's worke nicely. Good stuff!


Tags for this Thread

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
  •