SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  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)

    HTML Element Grouping

    1. Group related content - <div> - Use a describing class design pattern as if you were commenting to the user the current section of the page they are viewing.
    2. Once you're finished doing this, you more than likely will have to use absolute positioning for certain portions of your document. With most designs you won't have to worry about positioning the footer/article/related sections. No extra markup will be needed to float these compound elements.
    3. Absolute position embedded portions to achieve 'presentational free' markup.
    4. Look at the example I provided that contains the navigation's of the page. You could have the primary navigation at the top of your page while the tertiary navigation is placed at the bottom of your page.

    My point being is that you don't have to look at developing mock-ups with the top-bottom/left-right approach.

    Code HTML4Strict:
    <div id="header">
    	<h1>...</h1>
    	<p>...</p>
    </div>
    Code HTML4Strict:
    <div id="article">
    	<h2>Making people believers</h2>
    	<p>....</p>
     
    	<h3>Personal witnesses</h3>
    	<ul>
    		<li>....</li>
    		<li>....</li>
    	</ul>
     
    	<p>....</p>
    </div>
    Code HTML4Strict:
    <div id="related">
    	<h2>....</h2>
    	<p>....</p>
    </div>
    Code HTML4Strict:
    <div id="navigation">
    	<ul id="primary-navigation">
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    	</ul>
     
    	<ul id="secondary-navigation">
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    	</ul>
     
    	<ul id="tertiary-navigation">
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    	</ul>
    </div>
    Code HTML4Strict:
    <div id="footer">
    	<address class="vcard">
    		....
    	</address>
    </div>
    Once you really feel comfortable with css, absolute positioning will become a very close friend of yours.

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I am not sure if I am missing something but is this thread basically about wrapping structure in absolute positioned div's for the purpose of shuffling content around the page? If so I done it already

  3. #3
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand the point of this topic :/

  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)
    It is about 'html element grouping'

    The web has so much 'pointless' presentational markup to achieve effects, that I feel this topic needs to be brought to peoples attention.

    Absolute positioning can make this approach a reality.

    Alex, you are one of the developers that practice this technique

    @Karpie
    What's not to understand?

    It is important that developers use html as it was intended to be used.

  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)
    If anyone has any questions or doesn't understand what's going on please ask...

    I have looked through professional coders sites and still don't see html used correctly. HTML needs to be used for describing content and not as some presentational hook.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I think what you are saying in essence cooper is K.I.S.S, If it isn't needed, keep it outta the document.

  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)
    @Alex
    Partially what i'm saying, but it goes deeper than that...

    Most authors organize their style sheets into different sections using comments to dictate leadership?

    /*** Navigation ***/
    navs of page here

    /*** Footer ***/
    footer styles here

    etc..

    Well I am using the same approach in a HTML document, but instead of comments I am using a division to wrap each section.

    This is more of the content-out approach. It is crucial that content is grouped together in it's relation to each section.

    Floating elements is a huge reason that we have so much presentational html clutter. It bulks up markup and authors start marking up html as extra presentational hooks.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I just think this is common sense so I guess the meaning of the post is more subtle.

  9. #9
    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 AlexDawson View Post
    I just think this is common sense so I guess the meaning of the post is more subtle.
    Yeah if only authors would put this into practice though

    I mean you can have every navigation on a page in one container(<div class="navigation">)... Even if you happened to have 30 different embedded navigations (most likely not)... Each could live on different sections of the page....

    I can't wrap my head around why authors still look at marking up pages from top to bottom/left to right...

    Oh well, what can I say

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    I thought this was common sense as well.

    However, I don't agree with placing all the navigation in one place. many times the navigation belongs to a specific section. In that case I believe that navigation for that section should go inside the section not outside it.

  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)
    Quote Originally Posted by oddz View Post
    I thought this was common sense as well.

    However, I don't agree with placing all the navigation in one place. many times the navigation belongs to a specific section. In that case I believe that navigation for that section should go inside the section not outside it.
    Common sense for authors that know this

    Beginners or authors that are migrating away from table layouts don't know this...

    I would think 80% of the authors out there don't know this from looking at their sites

    You have a good argument about placing navigations in one place. To make this simplified you could place all 'major' page navigations relating to the document and not a specific section in the navigation section and other sections that have 'sub' nav's would of course belong to the specific section.

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I had half of a penny for how many times I have seen code similar to this, I would be billionaire
    Code HTML4Strict:
    <div class="wrapper">
    	<div class="outer">
    		<div class="header">
    			<div class="clearfix">
    				<ul>
    					<li>...</li>
    					<li>...</li>
    					<li>...</li>
    				</ul>
     
    				<form action="">
    					<fieldset>
    						<legend>...</legend>
    						......
    					</fieldset>
    				</form>
    			</div>
     
    			<ul class="clearfix">
    				<li>...</li>
    				<li>...</li>
    				<li>...</li>
    			</ul>
    		</div>
    		....
    	</div>
    </div>

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    We also came to an understanding in another thread that global navigation should be in the footer after the content for accessibility reasons (After much debate between the usefulness of it) and therefore it requires some positioning to replace the navigation say for a header for it to follow conventions.

  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)
    Quote Originally Posted by AlexDawson View Post
    We also came to an understanding in another thread that global navigation should be in the footer after the content for accessibility reasons (After much debate between the usefulness of it) and therefore it requires some positioning to replace the navigation say for a header for it to follow conventions.
    Yep, how I set it up in my code sample at the top

    Now thinking about it maybe the other navigation's embedded inside the compound(div class="navigation"): secondary, tertiary could be more specific to a section, thus not embedding these inside the navigation division is a better bet

    Anything could be debated in html(why it's so interesting)


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
  •