SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question align="right" or class="alignright" ?

    Is it better to code like so:

    Code:
    <img src="file.jpg" alt="blah" title="blah" class="alignright" />
    ...and have a class in the css file that aligns it right, and pads it, styles it etc accordingly.

    or:

    Code:
    <img src="file.jpg" alt="blah" title="blah" align="right" hspace="10" vspace="10" />
    They both validate, and the latter option displays better when your content is syndicated as it's likely not connected to the stylesheet in your reader (well, $100 says it's not ).

    What do you reckon, oh wise and worldly SP gurus?
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I go with option #1, that way the .aright (or .aleft) class can be used over and over on any element.

  3. #3
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But then viewing that element in a feed reader for instance, the image will be inline like a character of text... looks poorly formatted.

    Am I wrong in stating that this is a little presentational faux pas/oversight in the web standards move from presentational markup to standards compliant code?
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. Content and presentation should be kept separate.

    If it's important to you that the image is floated to the right in a feed reader, you can use inline CSS (style="float:right"). It's no better than the presentational attribute, which is deprecated, from a best practice point of view, but at least it's valid. The align attribute is deprecated and won't validate with a Strict doctype, which is what you should use for all new pages.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It passes a transitional one though. But I guess that name explains it all.

    You're right though, I'll use the inline CSS equivalent then.

    I think in this situation it makes more sense to use inline styling than an external stylesheet since IMO, it is poorly formatted in a feed reader if the context reads "in the image on the right..." and then it's sitting above or below the text.
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  6. #6
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    External CSS is also much easier to maintain than inline CSS and presentational HTML. If you need to change the presentation of all your images in the future, you can do so by editing only one line in a CSS file rather than every individual img element.

    Depending on how you create your feed, you may want to use external CSS in your web page and inline CSS in your feed.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The second version will only validate with a transitional doctype since all the positional attributes are deprecated and should no longer be used.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adesignrsa View Post
    IMO, it is poorly formatted in a feed reader if the context reads "in the image on the right..." and then it's sitting above or below the text.
    That's why you shouldn't write things like 'the image on the right' if it's not really to the right of that text.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Regarding the original question, both are equally bad, in their own way. Using align="right" is deprecated, and therefore shouldn't be used, but using class="alignright" or style="align:right" is also a poor solution. By doing this, you are still not separating contents from layout, you're just using a different technology to do the same as you would have done in the past.

    CSS classes and ids should always be named according to their use, never according to how you want it to look right now. If you at some point want to change the image to be left-aligned, you will either have to change the class in the document, or change a class called alignright to aling things left, which will only confuse upon future updates.

    The solution would be to name the class e.g. articleimage, or something else which describes what the image actually is. If you need some variation, you can apply a secondary class.


    Regarding references to images, making absolute references in the text to an image's location on the screen is a bad idea. There are a number of different factors which can change the appearence, including user-defined style sheets, text-based browsers and (perhaps most importantly) screen readers. If a user can't see the image, referencing a location only obvious to users who can see the image will make it a lot more difficult to get the context.

    Why not use the method used in scientific articles, and reference figure numbers?

    Code html4strict:
    <p>
      A recent poll showed that the number of polls has seen
      a significant increase during the last five years. As seen
      in <a href="#polltrend" id="polltrendback">figure 1</a>,
      the number of polls in 2010 is expected to double from
      the 2008 estimate.</p>
     
    <dl class="articleimage">
      <dt>
        <img src="images/polltrend.png" width="300" height="200"
          alt="Number of polls from 2003 to 2008, with projection
          for 2010. 2003: 100. 2004: 120. 2005: 150. 2006: 190.
          2007: 220. 2008: 280 (estimated). 2010: 560
          (projected)." id="polltrend">
        <a href="#polltrendback" class="documentreturn">Back</a>
      </dt>
        <dd>
          Figure 1: Polls are estimated to double from 2008 to
          2010.
        </dd>
    </dl>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  10. #10
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty curious is there any problems with external css in feeds that impose using inline styling ? And if feeds than make one rule for them all ? Float them all to the right.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just can use "style" tag on HTML codes form. It doesn't make any different actually

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    antitoxic:
    I dunno bout no feedz, but in general an external stylesheet is always overridden by internal ones, who are always overridden by inline ones. Inline is the safest when you have to toss your HTML into the wild blue yonder, in an email, or onto someone else's page.

    Using figures to name images is nice, but usually even journalistically you can still get away with "above" (or "above referenced") and "below" since that still works linearly. It's almost become a language phrase so that, if I'm reading a two-column article and they say "the graph below" and it's really next to that text because it's in the next column is still fine, as readers have learned over the century that "below" means "later in the text" regardless of where it's phycially sitting.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •