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

Position Image Using CSS

Expand Messages
  • Ray Shapp
    Hi Group, Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the
    Message 1 of 26 , Nov 19, 2013
      Hi Group,

      Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the image either totally above or totally below the text.

      The page has six brief paragraphs which are each enclosed in <p> </p>  tags. The photo is about 1/3 of the page width, and I would like it to sit flush with the right margin and let the text wrap above, below, and along the left side of the photo. In subsequent revisions, the amount of text might grow a little. Ideally, I'd like to specify that the top of the image appear about 1/4 of the way down from the top of the text. This is easy to do in a Word document, but I haven't been able to mark up a web page successfully.

      Many thanks for your help.

      Ray Shapp
      ---
    • Wayne VanWeerthuizen
      I think what is to put the img tag in the middle of the group of paragraphs. Then style it with float: right
      Message 2 of 26 , Nov 20, 2013
        I think what is to put the img tag in the middle of the group of paragraphs. Then style it with "float: right"


        On 11/19/2013 11:27 PM, Ray Shapp wrote:
        >
        >
        > Hi Group,
        >
        > Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the image either totally above or totally below the text.
        >
        > The page has six brief paragraphs which are each enclosed in <p> </p> tags. The photo is about 1/3 of the page width, and I would like it to sit flush with the right margin and let the text wrap above, below, and along the left side of the photo. In subsequent revisions, the amount of text might grow a little. Ideally, I'd like to specify that the top of the image appear about 1/4 of the way down from the top of the text. This is easy to do in a Word document, but I haven't been able to mark up a web page successfully.
        >
        > Many thanks for your help.
        >
        > Ray Shapp
      • Ray Shapp
        Hi Wayne, Thanks for the reply. I took your advice and looked up float , and found a good example at http://www.w3schools.com/css/css_float.asp The code below
        Message 3 of 26 , Nov 20, 2013
          Hi Wayne,

          Thanks for the reply.

          I took your advice and looked up "float", and found a good example at http://www.w3schools.com/css/css_float.asp

          The code below works on that website, and, although I haven't tried it on my site, it looks like it will work for me. 


          <!DOCTYPE html>
          <html>
          <head>
          <style>
          img
          {
          float:right;
          }
          </style>
          </head>

          <body>
          <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
          <p>
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          <img src="logocss.gif" width="95" height="84" />
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text.
          </p>
          </body>

          </html>

          Thank you for your help.

          Ray Shapp
          ---


          On Wed, Nov 20, 2013 at 3:48 AM, Wayne VanWeerthuizen <waynemv@...> wrote:
           

          I think what is to put the img tag in the middle of the group of paragraphs. Then style it with "float: right"



          On 11/19/2013 11:27 PM, Ray Shapp wrote:
          >
          >
          > Hi Group,
          >
          > Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the image either totally above or totally below the text.
          >
          > The page has six brief paragraphs which are each enclosed in <p> </p> tags. The photo is about 1/3 of the page width, and I would like it to sit flush with the right margin and let the text wrap above, below, and along the left side of the photo. In subsequent revisions, the amount of text might grow a little. Ideally, I'd like to specify that the top of the image appear about 1/4 of the way down from the top of the text. This is easy to do in a Word document, but I haven't been able to mark up a web page successfully.
          >
          > Many thanks for your help.
          >
          > Ray Shapp

          _


        • M Peloquin
          I use the float right style often on the library web site. You can use this easily and inline just in case you don t want all images to float right as you
          Message 4 of 26 , Nov 20, 2013
            I use the float right style often on the library web site.  You can use this easily and inline just in case you don't want all images to float right as you would if you use the instance you have below.  Here is an example page (http://library.austincc.edu/gen-info/ACC-ID-about.php) and here is some partial code that places the image.


            <img src="wordle-white-SVC2-185.png" border="0" alt="Services and Programs" style="float:right;margin-top:40px;border: 1px solid silver; margin-left: 30px;"/>

            <h2>Why Do I Need an ACC ID Card? </h2>
            <p>&nbsp;</p>
            <div class="innertube" id="oneColContent">
            <div>
              <h3 class="style4">It's Required </h3>
              <ul><li>A current <strong>ACC ID</strong> proves that you are an enrolled  student or faculty/staff member and are therefore eligible to check out  material and use the Computer Center.</li>
                </ul>
              <h3><span class="style4">It's Fast</span></h3>
              <ul>
                <li>Over 700,000 people visit the ACC Libraries and over 330,000 items are checked  out each year. The best means of making this process fast, safe, and efficient is through the use of the ACC ID card. </li>
              </ul>


            On 11/20/2013 4:35 AM, Ray Shapp wrote:
             
            Hi Wayne,

            Thanks for the reply.

            I took your advice and looked up "float", and found a good example at http://www.w3schools.com/css/css_float.asp

            The code below works on that website, and, although I haven't tried it on my site, it looks like it will work for me. 


            <!DOCTYPE html>
            <html>
            <head>
            <style>
            img
            {
            float:right;
            }
            </style>
            </head>

            <body>
            <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
            <p>
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            <img src="logocss.gif" width="95" height="84" />
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            </p>
            </body>

            </html>

            Thank you for your help.

            Ray Shapp
            ---


            On Wed, Nov 20, 2013 at 3:48 AM, Wayne VanWeerthuizen <waynemv@...> wrote:
             

            I think what is to put the img tag in the middle of the group of paragraphs. Then style it with "float: right"



            On 11/19/2013 11:27 PM, Ray Shapp wrote:
            >
            >
            > Hi Group,
            >
            > Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the image either totally above or totally below the text.
            >
            > The page has six brief paragraphs which are each enclosed in <p> </p> tags. The photo is about 1/3 of the page width, and I would like it to sit flush with the right margin and let the text wrap above, below, and along the left side of the photo. In subsequent revisions, the amount of text might grow a little. Ideally, I'd like to specify that the top of the image appear about 1/4 of the way down from the top of the text. This is easy to do in a Word document, but I haven't been able to mark up a web page successfully.
            >
            > Many thanks for your help.
            >
            > Ray Shapp

            _



            -- 
            
            ++++++++++++++++++++++++++++++++++++++++++++++++++++
            The shortest distance between two points in always
            under construction.
            ++++++++++++++++++++++++++++++++++++++++++++++++++++
            Margaret Peloquin, Head Librarian, Professor - EVC
            Austin Community College - Austin, Texas
            512.223.5117 || Fax: 512.223.5111
            peloquin@... || http://library.austincc.edu
            
          • McGarey, John
            W3 schools has some awesome tutorials. This is one on image positioning. http://www.w3schools.com/css/css_float.asp - John
            Message 5 of 26 , Nov 20, 2013

              W3 schools has some awesome tutorials. This is one on image positioning.

              http://www.w3schools.com/css/css_float.asp


              - John

            • Mick Housel
              If you are using this on only one specific page with a single photo then you can use the id attribute to make sure it only applies to one specific item. Code
              Message 6 of 26 , Nov 20, 2013
                If you are using this on only one specific page with a single photo then
                you can use the id attribute to make sure it only applies to one
                specific item. Code would be similar to this :
                <!DOCTYPE html>
                <html>
                <head>
                <style>
                #imgname
                {
                float:right;
                }
                </style>
                </head>

                <body>
                <p>In the paragraph below, we have added an image with style
                <b>float:right</b>. The result is that the image will float to the right
                in the paragraph.</p>
                <p>
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                <img id="imgname" src="logocss.gif" width="95" height="84" />
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                This is some text. This is some text. This is some text.
                </p>
                </body>

                </html>

                Hope this helps a bit. A simple way to view an id as opposed to using a
                class is id is for a single item in a page/site while classes cover
                multiple items with the same traits.

                Mick

                On 11.20.13 02:35 AM, Ray Shapp wrote:
                >
                >
                > Hi Wayne,
                >
                > Thanks for the reply.
                >
                > I took your advice and looked up "float", and found a good example at
                > http://www.w3schools.com/css/css_float.asp
                >
                > The code below works on that website, and, although I haven't tried it
                > on my site, it looks like it will work for me.
                >
                >
                > <!DOCTYPE html>
                > <html>
                > <head>
                > <style>
                > img
                > {
                > float:right;
                > }
                > </style>
                > </head>
                >
                > <body>
                > <p>In the paragraph below, we have added an image with style
                > <b>float:right</b>. The result is that the image will float to the right
                > in the paragraph.</p>
                > <p>
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > <img src="logocss.gif" width="95" height="84" />
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > This is some text. This is some text. This is some text.
                > </p>
                > </body>
                >
                > </html>
                >
                > Thank you for your help.
                >
                > Ray Shapp
                > ---
                >
                >
                > On Wed, Nov 20, 2013 at 3:48 AM, Wayne VanWeerthuizen <waynemv@...
                > <mailto:waynemv@...>> wrote:
                >
                > __
                >
                > I think what is to put the img tag in the middle of the group of
                > paragraphs. Then style it with "float: right"
                >
                >
                >
                > On 11/19/2013 11:27 PM, Ray Shapp wrote:
                > >
                > >
                > > Hi Group,
                > >
                > > Please tell me how to write an in-line CSS style that will allow
                > me to specify where an image will appear on a page of text. All my
                > attempts put the image either totally above or totally below the text.
                > >
                > > The page has six brief paragraphs which are each enclosed in <p>
                > </p> tags. The photo is about 1/3 of the page width, and I would
                > like it to sit flush with the right margin and let the text wrap
                > above, below, and along the left side of the photo. In subsequent
                > revisions, the amount of text might grow a little. Ideally, I'd like
                > to specify that the top of the image appear about 1/4 of the way
                > down from the top of the text. This is easy to do in a Word
                > document, but I haven't been able to mark up a web page successfully.
                > >
                > > Many thanks for your help.
                > >
                > > Ray Shapp
                >
                > _
                >
                >
                >
                >
                >
              • Ray Shapp
                Hi Margaret, John, and Mick, Very helpful replies! @Margaret: I like the the inline style because I may have multiple images in some future application. Your
                Message 7 of 26 , Nov 20, 2013
                  Hi Margaret, John, and Mick,

                  Very helpful replies!

                  @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.

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

                  @Mick: Thanks for info about id attribute versus class. I probably would have missed that.


                  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?

                  Many thanks for your help.

                  Ray Shapp
                  ---

                • Axel Berger
                  ... An image with a caption underneath constitute a valid table, so that s how I always do it. This is NOT the disparaged use of tables for layout but is a
                  Message 8 of 26 , Nov 20, 2013
                    Ray Shapp wrote:
                    > I want to tie a caption to the image so that the caption is
                    > displayed centered below the image.

                    An image with a caption underneath constitute a valid table, so that's
                    how I always do it. This is NOT the disparaged use of tables for layout
                    but is a genuine tabular arrangement of elements belonging together.

                    Axel
                  • Marcelo Bastos
                    ... 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
                    Message 9 of 26 , Nov 20, 2013
                      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
                    • Axel Berger
                      ... With my main public including myself, that s the case, so ... Some parts of HTML5 are really good, like your , but others are plain bloated
                      Message 10 of 26 , Nov 20, 2013
                        Marcelo Bastos wrote:
                        > or your main public is a bunch of old codgers

                        With my main public including myself, that's the case, so

                        > Some will object that HTML5 is still "experimental."

                        Some parts of HTML5 are really good, like your <figure>, but others are
                        plain bloated nonsense and the oppsite of what lean and clean HTML was
                        once created to be.

                        > Making the image width be "100%" means that the image will stretch
                        > and shrink with the box (the <figure> element, in this case).

                        I still all too often encounter thumbnails that take ages to load. Also
                        the scaling algorithmy in browsers are optimized for speed not quality
                        and it shows. So I always scale my images exterally and do not ever
                        rescale them. Blogging software usually has mechanisms for serving
                        different images to different views or machines, that's something to
                        look into, perhaps.

                        Axel
                      • Ray Shapp
                        Hi Marcelo and Axel, I like the idea of using , but the following site http://www.w3schools.com/tags/tag_figcaption.asp says: Browser Support
                        Message 11 of 26 , Nov 21, 2013
                          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


                        • Marcelo Bastos
                          ... No, this is right, I missed that. So, yeah, XP users who are still using IE are going to have problems. That s a lot more than the 5% I quoted before --
                          Message 12 of 26 , Nov 21, 2013
                            Interviewed by CNN on 21/11/2013 09:11, Ray Shapp told the world:
                            >
                            >
                            > 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?
                            >

                            No, this is right, I missed that. So, yeah, XP users who are still using
                            IE are going to have problems. That's a lot more than the 5% I quoted
                            before -- IE7 is just a drop in the bucket, but IE8 actually is
                            estimated to be more than 20% of the public. So, yeah, 1/4 of visitors
                            might have problems. Too many to disregard, I guess. So, I reverse my
                            previous comment -- unless you are pretty sure that your public mostly
                            uses modern browsers (that's my market, so it didn't cause problems for
                            me), it's a bit early to push <figure> and <figcaption> to general usage.

                            > 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?
                            >
                            >
                            Sure -- just apply "float:right" to the entire table. Any block element
                            can be floated, this is not a new thing, has been a part of CSS since...
                            I don't know, CSS 1.0 I guess, a long time ago.


                            --
                            MCBastos

                            This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
                            -=-=-
                            ... Sent from my Odyssey2.
                            * Added by TagZilla 0.7a1 running on Seamonkey 2.22 *
                            Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
                          • Margaret Peloquin
                            You can float anything provided it is in a so something like
                            Message 13 of 26 , 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%;">
                              <table>etc.
                              </table>
                              </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:

                              <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





                              --
                              ++++++++++++++++++++++++++++++++++++++++++++++++++++
                              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
                            • Adrien Verlee
                              ... I didn t test it if it works and provide W3C-standards ! But just discovered this generator: http://www.tagindex.net/generator/index.html -- adrien -
                              Message 14 of 26 , Nov 21, 2013
                                Ray Shapp schreef op 21/11/2013 12:11:
                                > 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?

                                I didn't test it if it works and provide W3C-standards ! But just
                                discovered this generator:
                                http://www.tagindex.net/generator/index.html
                                --
                                adrien
                                - Ongedeelde informatie = verloren informatie -
                              • loro
                                ... Actually, you can float anything, period. You can just as well float the table directly. Without tables on the other hand, you would need to put the image
                                Message 15 of 26 , Nov 21, 2013
                                  At 13:24 2013-11-21, Margaret Peloquin wrote:
                                  >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%;">
                                  ><table>etc.
                                  ></table>
                                  ></div> <!-- end of imagetable -->

                                  Actually, you can float anything, period. You can just as well float
                                  the table directly.

                                  Without tables on the other hand, you would need to put the image and
                                  its caption in a DIV and float it.

                                  Lotta
                                • Rudolf Horbas
                                  ... There s a remedy for that: http://en.wikipedia.org/wiki/HTML5_Shiv It s a JavaScript that enables HTML5 elements in MSIE
                                  Message 16 of 26 , Nov 21, 2013
                                    Marcelo Bastos wrote:
                                    > Interviewed by CNN on 21/11/2013 09:11, Ray Shapp told the world:
                                    >>
                                    >>
                                    >> 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?
                                    >>
                                    >
                                    > No, this is right, I missed that. So, yeah, XP users who are still using
                                    > IE are going to have problems. That's a lot more than the 5% I quoted
                                    > before -- IE7 is just a drop in the bucket, but IE8 actually is
                                    > estimated to be more than 20% of the public. So, yeah, 1/4 of visitors
                                    > might have problems. Too many to disregard, I guess. So, I reverse my
                                    > previous comment -- unless you are pretty sure that your public mostly
                                    > uses modern browsers (that's my market, so it didn't cause problems for
                                    > me), it's a bit early to push <figure> and <figcaption> to general usage.

                                    There's a remedy for that:
                                    http://en.wikipedia.org/wiki/HTML5_Shiv

                                    It's a JavaScript that enables HTML5 elements in MSIE < 9.

                                    Regards
                                    Rudi
                                  • John Shotsky
                                    Thanks for that. I knew about it, and have been using:
                                    Message 17 of 26 , Nov 21, 2013

                                      Thanks for that. I knew about it, and have been using:

                                      <!--[if lt IE 9]>

                                      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

                                      <![endif]-->

                                      Same result, but it fetches it if/when needed.

                                      Regards,
                                      John
                                      RecipeTools Web Site: http://recipetools.gotdns.com/
                                      John's Mags Yahoo Group:  http://groups.yahoo.com/group/johnsmags/

                                       

                                      From: ntb-html@yahoogroups.com [mailto:ntb-html@yahoogroups.com] On Behalf Of Rudolf Horbas
                                      Sent: Thursday, November 21, 2013 06:01
                                      To: ntb-html@yahoogroups.com
                                      Subject: Re: [NH] Position Image Using CSS

                                       

                                       

                                      Marcelo Bastos wrote:

                                      > Interviewed by CNN on 21/11/2013 09:11, Ray Shapp told the world:
                                      >>
                                      >>
                                      >> 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?
                                      >>
                                      >
                                      > No, this is right, I missed that. So, yeah, XP users who are still using
                                      > IE are going to have problems. That's a lot more than the 5% I quoted
                                      > before -- IE7 is just a drop in the bucket, but IE8 actually is
                                      > estimated to be more than 20% of the public. So, yeah, 1/4 of visitors
                                      > might have problems. Too many to disregard, I guess. So, I reverse my
                                      > previous comment -- unless you are pretty sure that your public mostly
                                      > uses modern browsers (that's my market, so it didn't cause problems for
                                      > me), it's a bit early to push <figure> and <figcaption> to general usage.

                                      There's a remedy for that:
                                      http://en.wikipedia.org/wiki/HTML5_Shiv

                                      It's a JavaScript that enables HTML5 elements in MSIE < 9.

                                      Regards
                                      Rudi

                                    • Greg Chapman
                                      Hi Margaret, ... provided it is in a ? Not so! You can float any element. A is not required! Greg
                                      Message 18 of 26 , Nov 21, 2013
                                        Hi Margaret,

                                        On 21 Nov 13 12:24 Margaret Peloquin <peloquin@...> said:
                                        > You can float anything provided it is in a <div>

                                        "provided it is in a <div>"?

                                        Not so!

                                        You can float any element.

                                        A <div> is not required!

                                        Greg
                                      • wizcrafts
                                        I sometimes float an image with a caption either above or below it and centered. Here s how I would do it with an image that is 300px wide:
                                        Message 19 of 26 , Nov 21, 2013

                                          I sometimes float an image with a caption either above or below it and centered. Here's how I would do it with an image that is 300px wide:


                                          <div style="float: right; margin-left: 1em; width: 300px; padding: 0; text-align: center">

                                             <strong>TOP CAPTION</strong><br />

                                             <img src="..." width="300" height="300" alt="description" border="0" /><br />

                                             Bottom description

                                          </div>


                                          The style code (really should be in document head or external stylesheet) defines the width of the floated DIV, which contains the same size image and some text. The command "text-align: center" forces the contents of that DIV to be centered horizontally. Since the image fills the width, it is automatically centered. The text, whether above or below the image, will be centered within the DIV and the image.


                                          I added forward slashes at the end of the IMG and BR elements, in case you are composing in HTML Strict. If not, ignore them.



                                          ---In ntb-html@yahoogroups.com, <rayshapp@...> wrote:

                                          Hi Margaret, John, and Mick,

                                          Very helpful replies!

                                          @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.

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

                                          @Mick: Thanks for info about id attribute versus class. I probably would have missed that.


                                          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?

                                          Many thanks for your help.

                                          Ray Shapp
                                          ---

                                        • Axel Berger
                                          ... I don t ususally allow scripts in my browsers and I prefer old, small, lean and fast browsers (I have the newest ones installed on another machine with
                                          Message 20 of 26 , Nov 21, 2013
                                            John Shotsky wrote:
                                            > <script src="//html5shim.googlecode.com/svn/trunk/html5.js">

                                            I don't ususally allow scripts in my browsers and I prefer old, small,
                                            lean and fast browsers (I have the newest ones installed on another
                                            machine with nearly identical hardware and the speed difference is
                                            stunning!). I expect clean and valid code. When telling your visitors
                                            what hard and software they have to use just to be allowed to view your
                                            pages never forget how many other sites there are and easy it is to
                                            leave and move on to a decent one.

                                            Axel
                                          • Axel Berger
                                            ... DON T! NEVER even contemplate it. HTML is designed to be sematic language from the ground up. HTML tags tell *what something is*, not how it looks. The
                                            Message 21 of 26 , Nov 21, 2013
                                              Margaret Peloquin wrote:
                                              > You can float anything provided it is in a <div>

                                              DON'T! NEVER even contemplate it. HTML is designed to be sematic
                                              language from the ground up. HTML tags tell *what something is*, not how
                                              it looks. The look is determined by the reader and his browser. You and
                                              your CSS can make suggestions and the reader may take you up on them if
                                              he wants. <DIV> is a fallback for rare cases where nothing else fits the
                                              bill, using it for visual design is misuse. HTML was designed by a
                                              physicist not by an advertisement agency and how long it has more or
                                              less survived thei concerted onslaught is proof how valubale that was.

                                              Axel
                                            • Marcelo Bastos
                                              ... I wouldn t say it in so strong terms. Sure, you shouldn t wrap something in a just for the hell of it; if there s a single block-level element inside
                                              Message 22 of 26 , Nov 21, 2013
                                                Interviewed by CNN on 21/11/2013 16:40, Axel Berger told the world:
                                                > Margaret Peloquin wrote:
                                                >> You can float anything provided it is in a <div>
                                                > DON'T! NEVER even contemplate it. HTML is designed to be sematic
                                                > language from the ground up. HTML tags tell *what something is*, not how
                                                > it looks. The look is determined by the reader and his browser. You and
                                                > your CSS can make suggestions and the reader may take you up on them if
                                                > he wants. <DIV> is a fallback for rare cases where nothing else fits the
                                                > bill, using it for visual design is misuse. HTML was designed by a
                                                > physicist not by an advertisement agency and how long it has more or
                                                > less survived thei concerted onslaught is proof how valubale that was.
                                                >
                                                >
                                                I wouldn't say it in so strong terms. Sure, you shouldn't wrap something
                                                in a <div> just for the hell of it; if there's a single block-level
                                                element inside it, why not applying the style directly to the object?
                                                And sure, if there's a semantically more appropriate element for that
                                                role, you should use it instead of <div>. But lots of times, <div> is a
                                                good option. It defines a distinctive block of the document (like, say,
                                                an image and its caption) so styles can be applied to it. Sure, I prefer
                                                using <figure> for images, because it's semantically loaded; but as it
                                                has been pointed out to me, <figure> is not compatible with IE<=8 and
                                                some other older browsers. So, if one is aiming for legacy
                                                compatibility, one has to make do with whatever HTML 4 offers. That
                                                means either using <div>, or using a table (which also has its share of
                                                pitfalls), or abusing some other element, like <blockquote>. Myself, I
                                                prefer using <div> in these cases.

                                                Yeah, <div> is semantically null... but I think it's still better saying
                                                nothing about the content than using the *wrong* semantically-loaded
                                                element. An illustration with attending caption is neither a table as
                                                generally understood in the physical world, nor a quoted block, nor a
                                                list of anything. The <div> says only that "this is a distinctive
                                                sub-unit of the document." And that's actually more accurate for a
                                                captioned image than saying "this is a table" or "this is a quoted insert."

                                                Back when HTML5 was pretty new, I used to define classes for <div> and
                                                <span> based on the names of the new elements... partly so I got used to
                                                the concepts, and partly to make it easy to eventually overhaul it to
                                                HTML5, if and when there was a good reason to do it. So, for instance,
                                                an image with caption would be contained in a <div class="figure">. The
                                                caption itself would be a <p class="figcaption">

                                                --
                                                MCBastos

                                                This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
                                                -=-=-
                                                ... Sent from my legal pad.
                                                * Added by TagZilla 0.7a1 running on Seamonkey 2.22 *
                                                Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
                                              • Rudolf Horbas
                                                ... That s beside the point IMO. This script is only loaded in MSIE
                                                Message 23 of 26 , Nov 25, 2013
                                                  Axel Berger wrote:
                                                  > John Shotsky wrote:
                                                  >> <script src="//html5shim.googlecode.com/svn/trunk/html5.js">
                                                  >
                                                  > I don't ususally allow scripts in my browsers and I prefer old, small,
                                                  > lean and fast browsers (I have the newest ones installed on another
                                                  > machine with nearly identical hardware and the speed difference is
                                                  > stunning!). I expect clean and valid code. When telling your visitors
                                                  > what hard and software they have to use just to be allowed to view your
                                                  > pages never forget how many other sites there are and easy it is to
                                                  > leave and move on to a decent one.

                                                  That's beside the point IMO. This script is only loaded in MSIE < 9. The
                                                  HTML code is valid, and anybody still using MSIE < 9 (or MSIE at all,
                                                  for that matter) is probably not a HTML purist or web buff ...
                                                • Axel Berger
                                                  ... How can it be, when there is as yet no accepted and published standard? HTML5 is experimental and Beta. ... I tend to consider myself as both. The point of
                                                  Message 24 of 26 , Nov 25, 2013
                                                    Rudolf Horbas wrote:
                                                    > The HTML code is valid,

                                                    How can it be, when there is as yet no accepted and published standard?
                                                    HTML5 is experimental and Beta.

                                                    > is probably not a HTML purist or web buff

                                                    I tend to consider myself as both. The point of using old specifications
                                                    like table and even deprecated attributes like align (overridden by CSS
                                                    in any case) is that old and primitive viewers and readers and those
                                                    with CSS turned off for one reason or another fall back to something
                                                    intelligible and sensible instead of just ignoring unknown tags as per
                                                    the standard. I still test all my sites in Netscape 4.8 with CSS off. I
                                                    do not expect them to look particularly nice, but they have to be
                                                    legible, intelligible and fully functional. This is far more important
                                                    to me than all kinds of glitter and eye candy.
                                                    I have been told they "look boring" but nobody ever visits them to be
                                                    entertained. People come to get specific answers and specific
                                                    information efficiently and quickly, something I failed to achieve on
                                                    the very site that criticism came from.

                                                    Axel
                                                  • George W. Durman
                                                    How do I configure Note Tab Pro to automatically check spelling as I enter data? I ve searched the Help file and the FAQs at Note Tab s website, but can find
                                                    Message 25 of 26 , Dec 22, 2013
                                                      How do I configure Note Tab Pro to automatically check spelling
                                                      as I enter data? I've searched the Help file and the FAQs at Note
                                                      Tab's website, but can find no help.

                                                      Thanks,
                                                      George W. Durman
                                                    • Al Guevara
                                                      View menu. AL On Sun, Dec 22, 2013 at 10:42 PM, George W. Durman
                                                      Message 26 of 26 , Dec 26, 2013
                                                        View menu.

                                                        AL


                                                        On Sun, Dec 22, 2013 at 10:42 PM, George W. Durman <georgewdurman@...> wrote:
                                                        How do I configure Note Tab Pro to automatically check spelling
                                                        as I enter data?  I've searched the Help file and the FAQs at Note
                                                        Tab's website, but can find no help.

                                                        Thanks,
                                                        George W. Durman

                                                      Your message has been successfully submitted and would be delivered to recipients shortly.