SitePoint Sponsor

User Tag List

Page 1 of 6 12345 ... LastLast
Results 1 to 25 of 136
  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Are styles polluting our minds?

    I think styles are polluting our minds in the sense of 'forgetting' the whole concept of separation. What happened to the new era of css(presentation) and html(data)???

    I know sometimes an extra span must be used to achieve a certain effect but, with an example such as <div class="tr>... there is no need for such a fiasco!

    Would an example as such be worse than building a website with a table-layout?

    I feel like this is a slap on the mouth of mother semantics

    This is an example approach I have seen for rounded corners.

    Common Approach:
    Code HTML4Strict:
    <div class="tr">
    	<div class="br">
    		<div class="tl">
    			<div class="bl">
    				<p>This is a paragraph that is...</p>
    			</div>
    		</div>
    	</div>
    </div>

    Correct Approach:
    Code HTML4Strict:
    <div id="news"><!-- br -->
    	<h2><span>News</span></h2><!-- tr/tl -->
    	<p>...</p> <!-- bl -->
    </div>
    Last edited by cooper.semantics; Sep 16, 2008 at 20:10.

  2. #2
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your correct approach falls down flat when you want the div to contain variable content, such as multiple H2s, or multiple paragraphs.

    This is why something similar to the common approach is generally used (though I generally wouldn't do it that way, I'd have four empty elements and hook the styles there, positioning them absolutely).

  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)
    Quote Originally Posted by Karpie View Post
    Your correct approach falls down flat when you want the div to contain variable content, such as multiple H2s, or multiple paragraphs.

    This is why something similar to the common approach is generally used (though I generally wouldn't do it that way, I'd have four empty elements and hook the styles there, positioning them absolutely).
    Code:
    <div id="news">
        <div class="content">
            <h2><span>News</span></h2>
            <p>...</p>
            <ul>
                <li>...</li>
                <li>...</li>
            </ul>
         </div>
    </div>

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Karpie - Examples vary in different situations. The 'new' example I just posted fits your given situation

  5. #5
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it doesnt. If you're still hooking the top right and top left images to the H2, how can you have multiple H2s inside the div?

  6. #6
    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 Karpie View Post
    No it doesnt. If you're still hooking the top right and top left images to the H2, how can you have multiple H2s inside the div?
    You can add a class or id to the styling h2 to separate it from the rest.

    Code:
    <div id="news">
    	<div class="content">
    		<h2 id="gas-prices"><span>Gas Prices</span></h2>
    		<p>...</p>
    		
    		<h3>Prices Raise</h3>
    		<p>....</p>
    				
    		<h2>Stock Market Drops</h2>
    		<p>...</p>
    	</div>
    </div>

  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)
    Code CSS:
    #news h2 {
    	font-size: 2em;
    	line-height: 1.5;
    }
     
    #news #gas-prices {
    	/* Styles Here */
    }

  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)
    http://screencast.com/t/gdmXhnMm

    Tested in newest opera/pc safari, ie6, ie7, ff, chrome.

    This box is actually one '1000 x 1000' image.

    Also, it will scale to fit any content within 1000px vertically/horizontally.

    Code CSS:
    body { font: normal 75&#37;/1.5 arial, sans-serif; }
     
    * { 
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    }
     
    #news {
    	float: left;
    	margin: 2em 0 0 2em;
    	padding-right: 0.2em;
    	background: url(module.gif) no-repeat scroll 100% 100%;
    }
     
    	#news h2 { font-size: 1.33em; }
    	#news p { padding: 0.5em 0; }
     
    	#news .content {
    		padding: 0 0 1em 1em;
    		background: url(module.gif) no-repeat scroll 0 100%;
    	}
     
    		#news #gas-prices {
    			margin: 0 -0.2em 0 -0.755em;
    			padding-right: 0.2em;
    			background: url(module.gif) no-repeat scroll 100% 0;
    		}
     
    			#news #gas-prices span {
    				display: block;
    				padding: 0.7em 0 0 0.7em;
    				background: url(module.gif) no-repeat scroll 0 0;
    			}

    Code HTML4Strict:
    <div id="news">
    	<div class="content">
    		<h2 id="gas-prices"><span>Gas Prices</span></h2>
    		<p>A long descriptive paragraph that will continue for a long time.</p>
     
    		<h3>Prices Raise</h3>
    		<p>A long descriptive paragraph...</p>
     
    		<h2>Stock Market Drops</h2>
    		<p>A long descriptive paragraph...</p>
    	</div>
    </div>
    Attached Images Attached Images

  9. #9
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again... you're still not responding to my point. My first point was what if you want the div to contain variable content? Maybe the first element of the div isn't even a H2? What do you do then?

    Most code that looks like your first example gets pumped out by CMS systems, where the content is completely variable, and as such there is really no other way to do it.

  10. #10
    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 Karpie View Post
    Again... you're still not responding to my point. My first point was what if you want the div to contain variable content? Maybe the first element of the div isn't even a H2? What do you do then?
    You can assign a class to the first child element. If even that's not feasible, then use the power of CSS:
    Code CSS:
    #news *:first-child {
      ...
    }
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy is correct.

  12. #12
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And that's not compatible with IE6.

    (Geez I'm sounding like a downer here... sorry bout that.)

  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 Karpie View Post
    And that's not compatible with IE6.

    (Geez I'm sounding like a downer here... sorry bout that.)
    ie css expression for first-child

  14. #14
    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 Karpie View Post
    And that's not compatible with IE6.
    Sorry. I thought we were discussing semantic markup here, not support for broken browsers. My mistake.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    and then what if it doesn't contain an H2 at all? You have lost your styling hook.

    I think separation of content and presentation is a good idea, and should be encouraged and practised as much as possible, but in some cases you just have to be practical.

    Multiple divs is still better than a table, and CSS3 has a lot of nice things which can fix a lot of problems with this kind of stuff (I think, but I'm no expert).

    Since a div has no semantic information associated with it at all, it can be used for styling hooks without harming the meaning of the page. Yes, it might make the page have a larger filesize and make it a bit harder to maintain, but those are the limitations of HTML and CSS in their current forms.

    Tommy: While what you say is true, support for 'broken' browsers is still relevant in practice. Ignoring them isn't the way forward. It's unfortunately something to deal with until its usage drops low enough to ignore.

  16. #16
    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 do not have to use a h2. You can have some sort of 'caption' for the entire code block. I use a strong tag because I want to strongly emphasize the entire division.

    Code:
    <div id="news">
        <div id="headline"><strong>Caption here</strong></div>
        <div class="content">
            <p>A long descriptive paragraph that will continue for a long time.</p>
           
            <h3>Prices Raise</h3>
            <p>A long descriptive paragraph...</p>
                   
            <h2>Stock Market Drops</h2>
            <p>A long descriptive paragraph...</p>
        </div>
    </div>
    Also, this is part of the structure of the block. You will CMS everything inside the 'content' division.

    I stand by my way. 'You' can change the 'headline' naming convention to fit your own needs.

    This is the best way to markup 'rounded' corners

  17. #17
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What if the box has no heading? You just want a box with rounded corners and some content, but no heading?

    There are too many variations on a theme to rely on purely semantic elements (and your example includes some extra markup already) for this kind of thing. The point of the extra semantically neutral elements is to ensure that the styling hooks are always available, no matter what variation of box you have.

  18. #18
    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 Stormrider View Post
    What if the box has no heading? You just want a box with rounded corners and some content, but no heading?

    There are too many variations on a theme to rely on purely semantic elements (and your example includes some extra markup already) for this kind of thing. The point of the extra semantically neutral elements is to ensure that the styling hooks are always available, no matter what variation of box you have.
    I do have extra markup. It is 'meaningful extra markup though'. Unlike the examples you see on the web

    You have to have some 'sort of caption' if you are naming your class/id something specific correct?

    If you had no clue what your parent div would be describing how could you name it?

    'box'? not semantic... Do you see what I am saying?

  19. #19
    PHP/Rails Developer Czaries's Avatar
    Join Date
    May 2004
    Location
    Central USA
    Posts
    806
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the primary problem which leads to a bunch of nested/wrapped DIV elements is that once you hand over the website to the client and they edit your perfectly fragile h2-span-p dependencies, they lose the styling completely, and then call you to have it fixed and get mad at you because it broke in the first place.

    The problem is especially compounded when the website uses a CMS of any type, because the content edits can happen even easier. This is a problem that needs to be solved at the CSS-level (and has been in CSS3 with border-radius) to eliminate the nested elements instead of creating dependencies on multiple other element types. So until CSS3 becomes standard and safe to use in 90&#37;+ browsers, I will continue to nest/wrap multiple DIVs, because above all else, I'm a pragmatist and a realist, and I know it's the only way I can guarantee it will always work for the client so I won't get those angry and unnecessary support calls.

  20. #20
    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 Czaries View Post
    I think the primary problem which leads to a bunch of nested/wrapped DIV elements is that once you hand over the website to the client and they edit your perfectly fragile h2-span-p dependencies, they lose the styling completely, and then call you to have it fixed and get mad at you because it broke in the first place.

    The problem is especially compounded when the website uses a CMS of any type, because the content edits can happen even easier. This is a problem that needs to be solved at the CSS-level (and has been in CSS3 with border-radius) to eliminate the nested elements instead of creating dependencies on multiple other element types. So until CSS3 becomes standard and safe to use in 90%+ browsers, I will continue to nest/wrap multiple DIVs, because above all else, I'm a pragmatist and a realist, and I know it's the only way I can guarantee it will always work for the client so I won't get those angry and unnecessary support calls.
    I see your point but, the 'newest' example I posted will be sustainable by the client. The client can only touch what is CMS'd!

    Everything within the 'content' division will be CMS'd, meaning the <div id="headline">... will be excluded for them to edit. If they are using a CMS that somehow lets them edit 'headline', the developer could comment where to start editing. In this case it would be nested inside the 'content' division.


    Also, what makes the nastily nested 'div's' any better

  21. #21
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="news">
        <div id="headline"><strong>Description of content</strong></div>
    	
    	<div class="content">
    	<!-- EDIT UNDERNEATH THIS LINE -->
            <p>A long descriptive paragraph that will continue for a long time.</p>
           
            <h3>Prices Raise</h3>
            <p>A long descriptive paragraph...</p>
                   
            <h2>Stock Market Drops</h2>
            <p>A long descriptive paragraph...</p>
    	<!-- DO NOT EDIT PAST THIS LINE -->
        </div>
    </div>

  22. #22
    PHP/Rails Developer Czaries's Avatar
    Join Date
    May 2004
    Location
    Central USA
    Posts
    806
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I see your point but, the 'newest' example I posted will be sustainable by the client. The client can only touch what is CMS'd!

    Everything within the 'content' division will be CMS'd, meaning the <div id="headline">... will be excluded for them to edit. If they are using a CMS that somehow lets them edit 'headline', the developer could comment where to start editing. In this case it would be nested inside the 'content' division.
    That may seem to work initially, but then you're boxing your client in, controlling which content they can and can't edit. What if that box is initially "Headlines", but then the client wants to change it to "Recipe of the Month" after a few weeks of actually using their website? They can change the content, but then the heading won't match anymore. If you don't let them change the title, you have to do it for them when they ask you to. So again, the point of nesting the DIVs is for ultimate flexibility so that the display of the box does not depend on the content inside.

    Quote Originally Posted by cooper.semantics View Post
    Also, what makes the nastily nested 'div's' any better
    I never said they were semantically better, just that they seem to be more practical in the real world when content starts getting shifted around. I choose something that works over something that has more perfect code 100% of the time. As long as the code is valid to whatever DTD I am using and adheres to certain other standards, it doesn't have to be perfect.

  23. #23
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    <div id="headline"><strong>...
    Ummm...That is not semantic...
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  24. #24
    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 logic_earth View Post
    <div id="headline"><strong>...
    Ummm...That is not semantic...
    You can change to match to your liking as I stated earlier

    Whatever you feel is most semantic.

    In my example - headline is being strongly emphasized

    There are a million different naming-conventions to convey your meanings.

  25. #25
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not too sure why everyone is being so argumentative. cooper.semantics has put forward a good way of reducing clutter of div tags when creating a four cornered content box.

    Why would you still continue to add clutter with excessive div tags when instead you could use something that makes more semantic sense?

    If you are going to have CMS driven content then what is the problem with making it so that this does work with your system. By making sure there is a title at the top of the content box to describe what is in it. Such as:

    Code HTML4Strict:
    <div id="news">
        <div id="headline"><strong>News article</strong></div>
        <div class="content">
            <p>A long descriptive paragraph that will continue for a long time.</p>
     
            <h3>Prices Raise</h3>
            <p>A long descriptive paragraph...</p>
     
            <h2>Stock Market Drops</h2>
            <p>A long descriptive paragraph...</p>
        </div>
    </div>

    Surely most posts/articles will have a title, so you say what if its for a page section which would not have a title, well then you describe what is contained within the box:

    Code HTML4Strict:
    <div id="main-content">
        <div class="content-description"><span>Information on runner beans</span></div>
        <div class="content">
            <p>A long descriptive paragraph that will continue for a long time.</p>
     
            <h3>Beans taste nice!</h3>
            <p>A long descriptive paragraph...</p>
    </div>
    </div>

    And then simply hide the span in the content-description.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk


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
  •