SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you handle an image and caption with HTML/CSS?

    The routine task of adding a caption to an image seems ridiculously simple, but I feel that I still haven't found the optimal way to do it. I'm going to share what I've come up with (for lack of a better solution) - please post with your own practices!

    For purposes of this example, we need to float the whole box - image and caption - left, and give it a margin.

    HTML:
    Code:
    <div class="imgcaption left" style="width:200px"><!--200px is the width of our image.  This restricts the box to the image width so that the caption can't stretch it horizontally.-->
    <img src="image.jpg" alt="Image alt text">
    <span>Caption of this image</span>
    </div>
    CSS:
    Code:
    .imgcaption {
      border:gray 1px solid;
      margin:6px 12px;
    }
    .imgcaption img {
      margin:0; /*my caption-less images have default margins which must be overriden*/
      }
    .imgcaption span {
      display:block;
      text-align:center;
      font-size:75%;
    }
    .imgcaption.left {
      float:left;
    }
    I'm particularly unhappy with having to specify a container width inline, but I can't think of any way to avoid it.

    Now it's your turn

  2. #2


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
  •