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

7331Re: [NH] Position Image Using CSS

Expand Messages
  • Marcelo Bastos
    Nov 20, 2013
    • 0 Attachment
      Interviewed by CNN on 20/11/2013 18:26, Ray Shapp told the world:
      >
      >
      > @Margaret: I like the the inline style because I may have multiple
      > images in some future application. Your example addresses one of my
      > other concerns, i.e., how to provide a margin between the image and
      > surrounding text. Thank you.
      Actually, one of the reasons I prefer _not_ using inline styles is
      exactly when I have several similar usages. That way, I ensure a
      consistent formatting in all images.

      >
      > @John: Thanks for citing the tutorial. I know I'll spend some hours
      > with that.

      Not to put a damper on it, but I have recently seen several sites
      criticizing w3schools. Basically, the critics claim that the site
      teaches bad and/or outdated practices. Check for instance:

      http://www.w3fools.com/
      >
      >
      > A problem remains when I tried to apply the floating class to the
      > image. I want to tie a caption to the image so that the caption is
      > displayed centered below the image. I could Photoshop the caption into
      > the image, but that's not satisfactory for several reasons. How can I
      > specify a "container" into which the image and a properly formatted
      > caption can be inserted and then float the whole container?
      >

      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>


      The above approach has a few interesting properties.
      Making the image width be "100%" means that the image will stretch and
      shrink with the box (the <figure> element, in this case). If the page is
      viewed in a screen narrower than 400 pixels (I know, pretty rare
      nowadays, but this is a demo, right?), it will still fit in the screen.
      The caption is reflowed with the image, keeping to the same width as the
      image.
      The "max-width" property on the container, on the other hand, limits the
      image growing to the maximum desired size. Note that, although it's not
      shown, you can also make your image to be proportional to the viewport
      width, by adding a "width=60%" or similar to the styling for the #image1.
      The link is there so visitors can get the full image even from a shrunk
      thumbnail on a small screen, if they so desire.

      I liked the construct above so much that I have been using it even for
      images without captions.

      Now, there are some apparent limitations to this scheme. At first
      glance, for instance, there is no way to make captions anyplace else
      than below the image. Well, above is pretty easy -- just move
      <figcaption> above <img>. But side captions are not as obvious as with
      tables. It's possible, but it demands some extra CSS tweaking. I don't
      think it's any worse than tables, though, and the code is generally cleaner.

      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

      This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
      -=-=-
      ... Sent from my Cranberry.
      * Added by TagZilla 0.7a1 running on Seamonkey 2.22 *
      Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
    • Show all 26 messages in this topic