SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Image Borders

  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Borders

    I want to have borders for images exactly like Wikipedia

    Eg: http://en.wikipedia.org/wiki/Bouchardon

    I need to annotate the pictures just like wikipedia does, with info at the bottom, and I have to annotate images of many different sizes

    What would be a good way of doing this?

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div class="captioned-image">
      <img src="/path/to/image.jpg" alt="text equivalent">
      Caption text
    </div>
    Code CSS:
    .captioned-image {
      border:1px solid #999;
      padding:0.25em;
    }
     
    .captioned-image img {
      display:block;
      margin-bottom:0.5em;
    }
    Something to get you started. You'll probably want to float the div containers to one side or the other as well.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Building on Autistic Cuckoo's code, you'll want to make sure the img tag is closed and text is enclosed in an HTML tag (unfortunately there's not a specific tag for image captions). Eg.

    Code HTML4Strict:
    <div class="captioned-image">
      <img src="/path/to/image.jpg" alt="text equivalent" />
      <small>Caption text</small>
    </div>

    Wikipedia uses the 'small' tag but a definition list (dl) tag is probably more semantic.

    Code HTML4Strict:
    <div class="captioned-image">
      <dl>
      <dt><img src="/path/to/image.jpg" alt="text equivalent" /></dt>
      <dd>Caption text</dd>
      <dl>
    </div>

    Daniel

    P.S. Sorry for nit-picking, AutisicCuckoo.
    Shore Dutton Internet Consultancy
    Coventry & Warwickshire Website Design

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShoreDutton View Post
    you'll want to make sure the img tag is closed
    Only if you're using XHTML. And since at least 70% of the surfing population uses a browser with zero support for XHTML (viz., IE) there's not much point in that.

    Quote Originally Posted by ShoreDutton View Post
    and text is enclosed in an HTML tag
    Why? In that case, something like this might be more appropriate:

    Code HTML4Strict:
    <div class="captioned-image">
      <div><img src="/path/to/image.jpg" alt="text equivalent"></div>
      <p>Caption text.</p>
    </div>
    If the text equivalent of the image constitutes a paragraph, then you can use a <p> to enclose the image, too, instead of a <div>.

    Quote Originally Posted by ShoreDutton View Post
    Wikipedia uses the 'small' tag but a definition list (dl) tag is probably more semantic.
    <small> is mainly presentational, although it may, arguably, be seen as 'less important'; the opposite of <em>, as it were. I don't think it's appropriate for image captions, since it's then used purely for presentational purposes.

    I doubt that a definition list is correct for most captioned images, unless you accept a very relaxed notion of the semantics of definition lists.
    Birnam wood is come to Dunsinane


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
  •