SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Photo Captions

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photo Captions

    Hi - I have several pages on my site with photos (and want to add some more). I have them floated either right or left with a border just as I want, but I cannot for the life of me get a caption to stick to the bottom. The site is http://www.thanetdf.org.uk

    Thanks if anyone can help

    Ann

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

    At the simplest level you would just 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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p.caption{
        float:right;
        text-align:center;
    }
    
    </style>
    </head>
    <body>
    <p class="caption"><img src="logo.gif" width="273" height="53" alt="test" /><br />
        Small Caption Here</p>
    <p>This is the content : This is the content : This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :</p>
    </body>
    </html>
    Just float the wrapper and not the image and then use a break to put the caption underneath. You can add borders and padding to the image if you want by targeting the image.

    You can't however have the text auto wrap within the image width inless you specify an exact width.

    http://www.pmob.co.uk/temp/caption3.htm

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thanks for that - I have tried to apply this but I loose the border and the image refused to float right - although I do have the caption. Any other suggestions?

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want the caption inside the border, in the white area outside the photo, or under the border?

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

    I have given the correct answer above so you will need to show me the exact page where you have tried this and where it didn't work.

    Here is another example that shows the code I gave you clearly works.

    http://www.pmob.co.uk/temp/caption25.htm

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I have given the correct answer above so you will need to show me the exact page where you have tried this and where it didn't work.

    Here is another example that shows the code I gave you clearly works.

    http://www.pmob.co.uk/temp/caption25.htm
    Hi - yes I saw that and I am sure it does work - what I wondered is something else is preventing the image and caption floating. I am trying to put a caption inside the border underneath the photograph. http://www.thanetdf.org.uk/news.html

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    In this page you would do this:

    Code:
    p.caption{
        float:right;
        text-align:center!important;    
        padding:10px!important;
        border:2px solid red;
        margin:6px;
    }
    p.caption img{
        padding:8px;/* ie5.+ doesn't do padding here */
        border: 1px solid #999999;
        margin:0;
    }

    Code:
            <p>One  of the first issues that Thanet Disability Forum has tackled is that of inconsiderate  drivers who park their cars in bus stop clearways.</p>
            <p class="caption"><img src="http://www.thanetdf.org.uk/images/timjay.jpg" alt="car parked in bus stop clearway" width="200" height="150" /><br />Caption</p>
            <p>< Thanet District Council has had the kerbs of  many bus stops raised to enable not only people in wheelchairs to access the  bus, but other passengers including elderly persons and those with children in  pushchairs. If a driver parks their vehicle in the bus clear way the bus is  unable to stop adjacent to the raised kerb. This leaves disabled passengers  stranded unable to disembark or get onto the bus. </p>
    You just have to make sure that you over-ride any existing styling on the p tag otherwise it cascades through.

    Hope that helps

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Remember to remove the class from the image as we are floating the p tag now

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    Do you want the caption inside the border, in the white area outside the photo, or under the border?
    Hi - inside the border would be great!!!!

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Remember to remove the class from the image as we are floating the p tag now
    Ah - that could be where I was going wrong then. Will try it again after I have fed the ravenous mob in this house

    Thanks

    Ann

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Yay!!! It works great - thanks so much

    Ann


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
  •