Loading ...
Sorry, an error occurred while loading the content.

7333Re: [NH] Position Image Using CSS

Expand Messages
  • Ray Shapp
    Nov 21, 2013
    • 0 Attachment
      Hi Marcelo and Axel,

      I like the idea of using <figcaption>, but the following site http://www.w3schools.com/tags/tag_figcaption.asp says:

      Browser Support

      Internet Explorer Firefox Opera Google Chrome Safari

      The <figcaption> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

      Note: Internet Explorer 8 and earlier versions, do not support the <figcaption> tag.

      Is this comment incorrect?

      I like the use of <table> for just the image and caption because that's something familiar, but is there a way to float the table?

      Thank you.

      Ray Shapp
      ---


      On Wed, Nov 20, 2013 at 7:49 PM, Marcelo Bastos <bytext@...> wrote:

      <snip>
       
      Axel suggested using a table, and it works, but there's an element in
      HTML5 which was specifically created for that: the figure element. It
      allows an optional sub-element called figcaption, which is therefore
      semantically attached to it.

      For instance, my preferred way to do a floated image (let's assume an
      image called "image1.jpg" measuring, oh, 400 x 300 pixels):
      <!DOCTYPE html>
      <html>
      <head>
      <title>*** Your Title Here ***</title>
      <style type="text/css">
      <!--
      .left {float:left;
      margin: 0.5em 1em 1em 0;}
      .right {float:right;
      margin: 0.5em 0 1em 1em;}
      figure>img {margin:0 auto;
      text-align:center;
      display:block;}
      figcaption {text-align:center;
      font-family: Calibri, Candara, Corbel, "Trebuchet
      MS", "Lucida Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
      font-size:90%;
      font-weight:bold;}
      #image1 {max-width:400px;}
      -->
      </style>
      </head>
      <body lang="en-US" dir="ltr">
      <p>Wall of text....</p>
      <figure class="right" id="figure1">
      <a href="image1.jpg"><img src="image1.jpg" width="100%" alt="sample
      image" title="click for full-size image"></a>
      <figcaption>Sample image caption</figcaption>
      </figure>
      <p>More text...</p>
      </body>
      </html>

      <snip>

      Some will object that HTML5 is still "experimental." To that I say:
      balderdash. It used to be so, but nowadays browsers with a reasonable
      support for even the most common HTML5 features are a small minority and
      are disappearing fast. The single largest holdout, IE6, is estimated to
      be around 5% of the market. Unless you have to cater to some
      stuck-in-the-nineties corporate environment where people are forbidden
      from using anything but IE6, or your main public is a bunch of old
      codgers who insist on using the likes of Netscape 4, HTML5 support is no
      longer an issue.

      --
      MCBastos


    • Show all 26 messages in this topic