Monday, November 19, 2012

Floating Images with Inline Styles

There is a wide range of webmasters in AYSO and I want to get a feel for what we have out there. I know we have quite a few of our websites on the Clubspaces platform. Do you prefer to use the design view or the HTML view when editing pages? Sometimes it’s easier to edit the page in HTML mode to get things to look exactly the way you want - the design view can be a little tricky to format things specifically. 

Styles are one way you can format your text and images. Most styles should go in the header of the HTML page. However, if you have a Clubspaces site, you don't have access to the page headers, so we use what are called inline styles. Inline means that the style is applied directly to the element instead of in a separate location. Here's one way to format your page with styles (CSS) to get a nice format:

FLOATING IMAGES

Say you have an image and you want your text to wrap around the image; similar to a magazine or newspaper style. You could use a table to format it, but it's not always precise and can get messy. Styles can make this work very easily with just a few simple words.


Here is a basic image tag:  <img src="myimage.jpg">

To float this image, you would add the BOLDED RED text to the tag above:
<img src="myimage.jpg" style="float: right;">

This would put your image on the right side of the page with your text wrapped around it. You can also tell it to float left or float center. Floating it to the left will align it on the left side of the page and float center will align it to the center of the page. The text will wrap around the image. 

If you have a paragraph of text you want to wrap around the image, it is best to put the image BEFORE the text to make sure it aligns correctly. If you put the image in the middle of the text block, it will show up in the middle of the text block.

Have a question? Please leave a comment!

2 comments:

  1. Please note that the double quotes in the example above are "curly quotes" instead of ambidextrous quotes. After copying the example above into your editor, you will have to replace them with normal double quotes.
    So instead of:
    <img src=”myimage.jpg” style=”float: right;”>
    you should be using:
    <img src="myimage.jpg" style="float: right;">

    To wrap text around pictures, you can get the same result with:
    <img src="myimage.jpg" align="right">


    ReplyDelete
    Replies
    1. While this may work, the ALIGN attribute has been deprecated and it is a coding best practice to use the inline CSS method. The problem with using deprecated tags is that they could become obsolete, and the browser won't support them anymore. At that point, you have broken code and will have to go in and correct it.

      I will take your note on the quotes :) Thanks!

      The W3C defines DEPRECATED as:

      A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

      User agents should continue to support deprecated elements for reasons of backward compatibility.

      Definitions of elements and attributes clearly indicate which are deprecated.

      This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist (see, for example, [CSS1]).


      Delete