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

7335Re: [NH] Position Image Using CSS

Expand Messages
  • Margaret Peloquin
    Nov 21, 2013
      You can float anything provided it is in a <div>  so something like

      <div id="imagetable" style="float:right;margin-top:20px;padding-left:30px;width:40%;">
      </div> <!-- end of imagetable -->

      would produce a table to the right of your content paragraphs that occupies 40% of your page.  You can put whatever you want in the table.

      On Thu, Nov 21, 2013 at 5:11 AM, Ray Shapp <rayshapp@...> wrote:

      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:

      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>
      <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;
      figcaption {text-align:center;
      font-family: Calibri, Candara, Corbel, "Trebuchet
      MS", "Lucida Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
      #image1 {max-width:400px;}
      <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>
      <p>More text...</p>


      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.


      Margaret Peloquin, Head Librarian, Professor - EVC
      Austin Community College
      3401 Webberville Rd, Austin, Texas 78702
      512.223.5117) || Fax: 512.223.5111
      peloquin@... || http://library.austincc.edu
    • Show all 26 messages in this topic