SitePoint Sponsor

User Tag List

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

    Text Caption for Images

    Hi there,

    I've been using CSS for about a year now but I have a problem I can't seem to fix and was hoping someone on this forum might have a possible solution.

    I have a div tag which holds an image and within that div there is another which holds a comment which sits under the image.

    Both Divs are classes that I want to use throughout a website.

    The problem I have is that I want the div to re-size to fit any image that goes in but I need the comment text to be 80% of the width of the picture, no matter what size it is.

    How do I acheive this when the width of the images can be different from one page to the next?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only reliable way cross-browser is to use a table for this.

    e.g.
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
        float:left;
        padding:5px;
        margin:10px;
        border:1px solid #000;
    }
    p{
        width:80&#37;;
        background:red;
        margin:0 auto;
        text-align:center;
    }
    table{
        width:1px;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <div class="test">
        <table>
            <tr>
                <td><img src="images/small.jpg" alt="" width="100" height="90" />
                    <p>Testing this caption to see what happens</p></td>
            </tr>
        </table>
    </div>
    </body>
    </html>
    You can do it for most browser except IE by using some advanced techniques.

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

    However IE won't wrap the captions.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude,

    That is such a simple and effective idea!!!!

    I've been totally blinkered about never using tables again (except for tabulated data of course, "the art & science of CSS", page 181).

    I'm very grateful for the tip Paul.

    Cheers,

    Jamie


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
  •