SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a question about accessibility.

    its good to have all presentational code in a css file, and an external one, i hear.

    So that means that if an old browser or a pda or something that does not support css accesses ur site, everything will be out of its space? On the left side, when you want it to be centre, etc, and may make the site unreadable? While if you used the html tags for aligh etc, this may not be a problem.

    Someone please point out the mistake in what im saying

    thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, the whole point of separating content from presentation is that the content will be usable without styling. It will just render the way the browser renders HTML elements by default. The external style sheet, which will be applied by CSS-capable browsers, will just make it look prettier and (probably) increase usability.

    Download the Opera browser if you don't have it (it's bearable even on a dial-up connection, but only just). Open any web site and press Shift+G to disable the author style sheet. (Press Shift+G again to re-enable.)
    (It's probably possible to do this with some extension or other in Firefox as well.)

    Many sites will be more or less unusable, because they are built from a presentation point of view. But a site built by someone who cares about accessibility will be perfectly usable even without CSS.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so the way to make a site then is to first make it clean content without any presentation, and once its done like that, then you add presentation with css?

  4. #4
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To begin with, yes, although the two processes will overlap as you get more experienced.
    Olly Hodgson
    thinkdrastic.net

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's one way to do it, and it happens to be how I do it.

    I start with the content and mark it up semantically. That way I get a logical source order and I know that the document will be usable without styling.

    Then I add CSS to style it. This usually involves adding a DIV or two to the content, due to the limitations of contemporary CSS.

    Last, if necessary, I'll add the behavioural layer – JavaScript.

    This approach is known as Progressive Enhancement. You start with something that works in a bare-bones user agent and add features for those who support them to improve aesthetics and usability.
    Birnam wood is come to Dunsinane

  6. #6
    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)
    Tommy's approach is probably the best way to learn how to code semantically.

    I usually use some markup templates, with DIVs set up for menu, header, contents, etc., which means that I can begin setting up the CSS fairly quickly.

    Which method you use is really a matter of taste, and probably to some extent the type of project.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing I like to do (to expand upon what Tommy said) is to use the bare minimum amount of HTML necessary to do the job. For example, if I have a list of links (many people may recognize this as a menu), I'll apply an ID to the UL (as a hook for the stylesheet to grab on to) rather than wrap a DIV around the UL and apply the ID to it.

    For example:
    HTML Code:
    <div id="menu">
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </div>
    would simply become:
    HTML Code:
    <ul id="menu">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
    </ul>

  8. #8
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Open any web site and press Shift+G to disable the author style sheet. (Press Shift+G again to re-enable.)
    (It's probably possible to do this with some extension or other in Firefox as well.)
    Ctrl+Shift+S in the Web Developer Toolbar extension.

  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)
    Dan
    You are, of course, correct that adding the DIV will be slightly verbose, but it does ensure forward compatibility.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  10. #10
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    You are, of course, correct that adding the DIV will be slightly verbose, but it does ensure forward compatibility.
    Sorry, you've lost me there. Can you explain what you mean please?
    Olly Hodgson
    thinkdrastic.net

  11. #11
    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)
    That the DIV isn't strictly needed, but that I still prefer to leave it in, in case I have to expand the menu later.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm working on a CSS technique that could end up leaving "layout DIVs" obsolete. I'll keep you all posted.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You'll 'ave great fun trying since the div is a generic container obviously you can just match anyway but it could complicate matters for a whole site.

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not saying that it would render the DIV element obsolete, just "layout" DIVs, like those wrapped around floated elements to keep them in place.

    And for the record, I have it working on three rendering engines right now. Take a wild guess as to which one isn't cooperating.

  15. #15
    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)
    Lynx?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  16. #16
    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 C. Ankerstjerne View Post
    Lynx?
    Birnam wood is come to Dunsinane

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I said major rendering engines (which assumes fairly decent CSS support). Which in this case means that my black sheep is Trident (Internet Explorer).

  18. #18
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Internet Explorer...
    You do not realise just how bad it is until you start learning CSS... Im using the CSS: The definative Guide, 3rd Edition, good book btw.
    Anyway, it showed me two ways to make paragraphs in another language italic. Eg:

    HTML Code:
    <body lang="en">
    <h1>English Heading</h1>
    <p>English Paragraph</p>
    <p lang="fr">French Paragraph</p>
    <p>English Paragraph</p>
    <p lang="fr">French Paragraph</p>
    </body>
    Now in the css style I could either use an attribute selector, to make anything were lang="fr" to be italic or i could use a pseudo-selector thing. Both worked in Firefox (2). Neither worked in IE (7).
    So then I would have to have <p lang="fr" class="fr">French</p>

    Anyway...So your developing another method for layout, not using divs? But currently using divs for layout is the best way, correct?
    Last edited by znebojsa; Jun 16, 2007 at 18:25.

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the proper markup for the job is the correct way. My master template will have DIVs, but not as many as most people think.

    (By the way, you need to remove the > from <p> lang="fr"> in your code so it reads as <p lang="fr">.)

  20. #20
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    typo fixed

  21. #21
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    You still have one in there.

  22. #22
    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)
    Quote Originally Posted by znebojsa View Post
    Now in the css style I could either use an attribute selector, to make anything were lang="fr" to be italic or i could use a pseudo-selector thing. Both worked in Firefox (2). Neither worked in IE (7).
    So then I would have to have <p lang="fr" class="fr">French</p>
    This works just fine in IE7:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    <html>
     <head> 
      <title></title>
     
      <style type="text/css">
       p[lang="fr"] {
        font-style: italic;
       }
      </style>
     </head>
     
     <body lang="en">
      <h1>English Heading</h1>
      <p>English Paragraph</p>
      <p lang="fr">French Paragraph</p>
      <p>English Paragraph</p>
      <p lang="fr">French Paragraph</p>
     </body>
    </html>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  23. #23
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not for me... I copied yoru exact thing and it didnt work! in IE7

  24. #24
    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)
    Did you remember the DOCTYPE?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  25. #25
    SitePoint Addict GonzaloGM's Avatar
    Join Date
    May 2007
    Location
    Rosario, Argentina
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked for me on IE7


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
  •