SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Caption below image

    Hi-
    I'm fairly new to CSS and am trying to figure out how to position text beneath an image, specifically, I'd like add an image credit beneath the image.
    I'm sure this is fairly easy, but I haven't been able to find it on the forums or via a general Google Search. How do I do this? Thanks.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The easiest way i can think of is to use a paragraph tag and some simple CSS like the example below...

    Code CSS:
    .mycaption {
        clear: left;
        margin-top: 10px;
        width: inherit;
    }

    What this will basically do is clear the flow of the paragraph tag to the next white-space area after the image and inherit the width of the parent container to the clear works. Depending on how your markup is written will depend on how the CSS behaves but if you have markup like the below example it will work fine.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
    <!--
        .caption-wrap {
             width: 300px;
         }
        
        .caption-wrap p {
             margin-top: 10px;
             width: auto;
         }
    -->
    </style>
    </head>
    <body>
    
    <div class="caption-wrap">
        <img src="path-to-image/my-image.jpg" height="180" width="300" />
        <p>This is a caption</p>
    </div>
    
    </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to Sitepoint.

    You may want to try this code:
    Code:
    .imgNcap { float:left;
     padding:.25em ;
     border:1px solid #000; 
    margin: 0 1em 1em 0; 
    width:100px ; /* the width of your image ( you can put this code inline if your images vary in width*/
    padding:10px}
    .imgNcap  img {  display:block }/* this where the magic happens*/

    and in the HTML

    Code:
    <p class="imgNcap"><img src="#" height=100 width=100 alt="" >your long  caption again</p>
    I like this because it doesn't use extra tags... and inf it fits your content you can turn the P tag and insert it into any paragraph like this:

    Code:
    	<p>	<span class="imgNcap" ><img src="#" height=100 width=100 alt="" >your long caption again</span>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    Hope that helps!

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately, I couldn't get either to work. The caption floats to the right of the image rather than below it.

    Does it make a difference if I'm trying to do this within a blog post editor where I'm using an internal css rather than referring to an external style sheet (e.g., MarsEdit)?

    I've also pasted the css code below if that's helpful. Thanks again!
    ----------------------------------------------------------
    <style type="text/css">

    body {font-family: Verdana, Arial, sans-serif; }

    li {font-family: Verdana, Arial, sans-serif; }

    img {float: left; margin: 1 2px; padding: 5px;}


    </style>


    <img src="filepath.jpg" alt="River small" title="river_small.jpg" border="0" width="180" height="240" alt="river" />
    <p>
    Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Could you post a link? Both solutions above will work if implemented properly, but they involve changing the HTML as well as the CSS.

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote a JQuery script to automatically generate an image caption below an image. It's designed to create a
    HTML Code:
    <figure>
    and
    HTML Code:
    <figcaption>
    for an image based on the ALT tag. These are HTML5 elements so it will only work in HTML5.

    I designed the script to work with content management systems (which often stick an image inside of a paragraph). See my tutorial on it here.

    Not sure if this is what you're looking for...but just in case.

    -NorthK

  7. #7
    SitePoint Enthusiast rmorrow's Avatar
    Join Date
    Apr 2002
    Location
    Tacoma, WA.
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just use a DIV. If I wanted the image floated to the right, I would use:

    Code:
    <div style="float:right;margin:0 0 6px 18px;padding:4px;text-align:center;border:1px solid #000000;">
    <img style="width:100px;height:100px;border:0;" src="#" alt="Grand Canyon" /><br />Photo by Yours Truely &amp; Company<br />
    </div>
    Make sure you adjust width, height, src, etc.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    @northk: nice article. I look forward to reading that in detail.


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
  •