SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Staying semantic, but specific for presentation

    If you wanted to replace the structural text with a background image, surely you need to have some kind of specifier to identify it in the CSS. I have just been thinking through the choices. What about this for an index.html and specifying image replacements for h1 and h2 tags...

    Code HTML4Strict:
    <div id="index-page" class="www-website-com">
         <div id="main-content">
             <h1 id="first-main-title"><span class="structural">We sell shoes!</span></h1>
             <p>Shoe stuff</p>
             <h2 id="second-main-title"><span class="structural">We also have boots</span></h2>
              <p>Some more info</p>
         </div>
         <div id="related-content">
              <h2 id="first-related-title"><span class="structural">We are green when making shoes</span></h2>
              <p>Greenery</p>
             <h2 id="second-related-title"><span class="structural">We do not use pork</span></h2>
               <p>What about sausages?</p>
          </div>
    </div>
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  2. #2
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    - You shouldn't put www-website-com as a class. Not only does it have no meaning, if its used on another site its completely out of context
    - Why keep adding classes to the spans? Call them #main-title span in the stylesheet
    - Also shouldn't use "first" "second" etc
    - Why even put an ID on them? #main-content h1 will do the trick
    - Why are you wrapping everything in the <span>? What image replacement technique will you use?

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    - You shouldn't put www-website-com as a class. Not only does it have no meaning, if its used on another site its completely out of context
    This can indicate what website all data is tied to. No styles will be tied to this class.

    - Why keep adding classes to the spans? Call them #main-title span in the stylesheet
    Luke are you doing some specific image replacement technique?

    - Why even put an ID on them? #main-content h1 will do the trick
    I would as well refrain from an 'id'. If you are trying to tie some sort of semantic relationship to the parent I would use a class instead.

    Classes are not just for styling, they can be used to convey relationships throughout the document.

    You can use a class and not style off of it. In this case, you could do as Rochow said, '#main-content h1' being an example of what you could style off of.

  4. #4
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This can indicate what website all data is tied to. No styles will be tied to this class.
    If no styles are attached, what is the point of adding the class? It will be obvious enough by looking at the url what site its about

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    If no styles are attached, what is the point of adding the class? It will be obvious enough by looking at the url what site its about
    Classes are not just for styling, they can be used to convey relationships throughout the document.

  6. #6
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Classes are not just for styling, they can be used to convey relationships throughout the document.
    Yes - and adding that class means that you can't use it on another website without in being out of context. That's the same as having "sidebar-left" and then it moving to the right, making it wrong

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Yes - and adding that class means that you can't use it on another website without in being out of context. That's the same as having "sidebar-left" and then it moving to the right, making it wrong
    Being that this is a 'special' relationship within the given document, it will tie only to the the given project. For instance, if my website was google.com which it is , I would use www-google-com.

    sidebar-left, sidebar-right are 'bad' practices because they can foul up in the 'same' document, as www-projectname-com can not.

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, you gotta remember that 'no' styling is being applied to this class, so it will not matter if this needs to be changed for different projects. You could even remove it from the project if you feel you do not want to use it anymore without worrying of your site going down prior to styles being attached to it.

  9. #9
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jesus, surely I am not the only person who thinks adding a class of the URL is pointless, unsemantic, and downright stupid!

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://meyerweb.com/
    http://www.stuffandnonsense.co.uk/
    http://simplebits.com/

    These guys use this approach on the body tag, except Dan who uses this on the parent division without the www- -com.

  11. #11
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which proves?

    Meyer uses HTML 4.0 Transitional, does that mean then that we should all use it?

    Stuff and Nonsense have multiple things wrong, these two in the opening table alone:
    - <tr class="two">
    - <em><a href="#" title="Contact us">&gt; 04</a></em> (URL taken out)

    Dan's logo:
    <div id="logo">
    <span><img src="/img/bitstream/mark-graphite.gif" alt="SimpleBits" /></span>
    </div>
    Couldn't have wrapped it in more things if he tried. Not to mentioned he wraps his nav in a div which does nothing AND every menu item has an ID that's not even used. If the header isn't wrong enough already, it's then cleared with a <hr />.

    Just because they're "recognized" or whatever doesn't mean whatever is on their site is right. For their sake, I'm assuming that the sites are years old (especially Meyers). Each one of those has elementary things wrong in the first couple of lines, so using them doesn't really prove anything (if anything it proves my point that it's a stupid thing to do)

  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)
    Luke, you'd be very wise to listen to rochow. He's absolutely right, and saved me about 5-10 minutes of typing up a response to this thread by writing his own.

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Luke, you'd be very wise to listen to rochow. He's absolutely right, and saved me about 5-10 minutes of typing up a response to this thread by writing his own.
    I disagree, there is no right and wrong in this case

    It is all a matter of preference.

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rochow - It is a matter of preference

    Maybe those examples I provided were not the best, but it is the idea behind using this method that counts.

    1. It does not harm anything.
    2. It is a matter of preference.

    You are just not 'used' to adding classes for other reasons other than styling

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rochow, @Dan

    I myself am not using this method but, think of it like this:

    We all might share some sort of characteristics but, what really makes us 'special', is our names, besides a million other things. In this case, I think Luke decided to use a name to set a special 'relationship' to the document itself.

  16. #16
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woah, don't shoot me down. I supposed I was asking for it by asking for opinions hehe.

    I suppose I kind of agree to the span class="structural" however what if I wanted to use a span for another purpose inside a <h1> tag for example.

    The reason I am using a span inside the <h1> and <h2> is to hide the text in the span class="structural" and use a background image for the <h1>.

    If I wanted to reference a specific background image for the index page in the main content div on the h1 sure I would not need an ID for the h1, but an id of index-page allows me to specify the page, then id main-content the container, and then h1 I suppose would not need an ID. But the h2 tag certainly would. Do you have any other naming conventions to use instead of id="first-main-title"???
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  17. #17
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We all have very strong opinions lol.

    Correct me if I'm wrong, but weren't you arguing in that other thread (the one about multiple header images) that adding ID's to the body is a waste? Those at least did something, this ID does absolutely nothing (the term "minimalisation" comes to mind here, though the amount of posts I see it seems to be the opposite of what people strive for nowadays)

    It does nothing, therefore it's a waste, therefore it shouldn't be there.

    I suppose I kind of agree to the span class="structural" however what if I wanted to use a span for another purpose inside a <h1> tag for example.
    Then you add a class to the span you want to do something out of the ordinary with.

    For example I could have:
    a {color:#000}

    because that's what most links are. Then for the few that are styled differently those can have classes on them.

    The reason I am using a span inside the <h1> and <h2> is to hide the text in the span class="structural" and use a background image for the <h1>.
    Firstly, you can just use text-indent:-1000em; and not have to use the span at all. Secondly, if you aren't use transparent images use the Gilder/Levin Method:

    http://www.mezzoblue.com/tests/revis...e-replacement/

    Much better for accessibility.

    If I wanted to reference a specific background image for the index page in the main content div on the h1 sure I would not need an ID for the h1, but an id of index-page allows me to specify the page, then id main-content the container, and then h1 I suppose would not need an ID. But the h2 tag certainly would. Do you have any other naming conventions to use instead of id="first-main-title"???
    Better IMO to use #page-index, #page-about etc. You see page and you know what it is straight away. The same how you do h1#whatever, p.whatever - you can skim down the CSS and just read what's on the left.

    I got a bit confused with that one. So the id's are there purely for the image replacement?

  18. #18
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rochow -->
    Well each h2 is going to have an image version of the text contained within it, so I reckon they must have an ID to specify them individually surely?

    As for the rest of what you said I completely agree, and have never came across text-index: -1000em; thing before. Thanks for the lesson
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  19. #19
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew I left out a site
    <body id="mezzoblue-com" class="projects tests">

    j/k...

    Yeah, I agree, the text-indent property can come in handy

  20. #20
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,184
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    rochow wrote:
    It does nothing, therefore it's a waste, therefore it shouldn't be there.
    If it describes the content it is not a waste. Separation of presentation and structure dictates that use of class and id names should not relate to whether of not you plan to style a particular object, but a description of the content within.

  21. #21
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Adding IDs to header could be beneficial if you are writing an article and you want a table of contents. The naming scheme I chose for the IDs is purely for example only!
    HTML Code:
    <body>
        <h1>Some kool Article</h1>
        
        <a href="#content-introduction">Introduction</a>
            <a href="#content-authors">Authors</a>
            <a href="#content-reviewers">Reviewers</a>
            <a href="#content-copyright">Copyright</a>
        <a href="#content-writing-articles">Writing kool Articles</a>
            <a href="#content-tools-trade">Tools of the trade</a>
                <a href="#content-mailinglist">Mailing List</a>
            <a href="#content-trade-tools">Trade of the tools</a></li>
        
        <h2 id="#content-introduction">Introduction</h2>
            <h3 id="#content-authors">Authors</h3>
            <h3 id="#content-reviewers">Reviewers</h3>
            <h3 id="#content-copyright">Copyright</h3>
        <h2 id="#content-writing-articles">Writing kool Articles</h2>
            <h3 id="#content-tools-trade">Tools of the trade</h3>
                <h4 id="#content-mailinglist">Mailing List</h4>
            <h3 id="#content-trade-tools">Trade of the tools</h3>
    </body>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  22. #22
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree. Most people do not understand the 'relationships' classes/ids have within documents. As I have said a million times, classes/ids can be used for other purposes than just styling

    @Oddz - Good explanation
    @Logic_earth - Good example

  23. #23
    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)
    Quote Originally Posted by logic_earth View Post
    Adding IDs to header could be beneficial if you are writing an article and you want a table of contents. The naming scheme I chose for the IDs is purely for example only!
    HTML Code:
    <body>
        <h1>Some kool Article</h1>
        
        <a href="#content-introduction">Introduction</a>
            <a href="#content-authors">Authors</a>
            <a href="#content-reviewers">Reviewers</a>
            <a href="#content-copyright">Copyright</a>
        <a href="#content-writing-articles">Writing kool Articles</a>
            <a href="#content-tools-trade">Tools of the trade</a>
                <a href="#content-mailinglist">Mailing List</a>
            <a href="#content-trade-tools">Trade of the tools</a></li>
        
        <h2 id="#content-introduction">Introduction</h2>
            <h3 id="#content-authors">Authors</h3>
            <h3 id="#content-reviewers">Reviewers</h3>
            <h3 id="#content-copyright">Copyright</h3>
        <h2 id="#content-writing-articles">Writing kool Articles</h2>
            <h3 id="#content-tools-trade">Tools of the trade</h3>
                <h4 id="#content-mailinglist">Mailing List</h4>
            <h3 id="#content-trade-tools">Trade of the tools</h3>
    </body>
    I realize you said the examples are for demonstration purpose only, but I do need to state (for the benefit of others) that if this exact markup and naming scheme (matching headings to anchors) is on the same document that it will not valdiate against ANY existing HTML or XHTML parser.

  24. #24
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rochow -->
    Well each h2 is going to have an image version of the text contained within it, so I reckon they must have an ID to specify them individually surely?
    Yes, if they each have a unique image they each need their own ID.

    If it describes the content it is not a waste
    That's like making a header div just because. And making a footer div just because. Hell, let's just wrap everything in a div with some stupid ID that "describes it" just because. It is an absolute waste - it doesn't tell anybody anything that's not already extremely obvious (like wow, I'm on google.com, gee, lucky that ID is there I never would have figured that out otherwise!)

  25. #25
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The anchors need to be wrapped inside block level elements. A list would best fit your markup. Also, the # need to be removed from the the <hx> id
    attributes.

    @Logic_earth - I do see what you are trying to convey through your example though.

    Code:
    	<h1>Some kool Article</h1>
        
    	<ul>
    		<li><a href="#content-introduction">Introduction</a></li>
    		<li><a href="#content-authors">Authors</a></li>
    		<li><a href="#content-reviewers">Reviewers</a></li>
    		<li><a href="#content-copyright">Copyright</a></li>
    		<li><a href="#content-writing-articles">Writing kool Articles</a></li>
    		<li><a href="#content-tools-trade">Tools of the trade</a></li>
    		<li><a href="#content-mailinglist">Mailing List</a></li>
    		<li><a href="#content-trade-tools">Trade of the tools</a></li>
    	</ul>
       
    	<h2 id="content-introduction">Introduction</h2>
    	<h3 id="content-authors">Authors</h3>
    	<h3 id="content-reviewers">Reviewers</h3>
    	<h3 id="content-copyright">Copyright</h3>
        	
    	<h2 id="content-writing-articles">Writing kool Articles</h2>
    	<h3 id="content-tools-trade">Tools of the trade</h3>
    	<h4 id="content-mailinglist">Mailing List</h4>
    	<h3 id="content-trade-tools">Trade of the tools</h3>


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
  •