Can anyone direct me to a place that shows how to set up a site where the content order in the HTML is Content "top" Navigation but the displayed order (in the browser) is Top Navigation Content ...using CSS. The other issue is that if the top nav wraps, I'd like it to push the content down to accommodate the wrapping top nav. My interest is having the Content first in the HTML for SEO. Thanks!
Ugh, not this again. I hate "SEO'd" layouts. They're a pain in the ass to create, they break whenever the browsers are updated, and when it comes down to it, they're more trouble (and expense) than they're worth, especially when it comes to lost man-hours, productivity and money. But if you're really set in your ways on using this, look for the Holy Grail layout on www.alistapart.com - but beware, I've heard it doesn't work on IE 7. If you don't mind having the menu first (as long as it's a small menu - like the main menu) then try this out. I have the HTML set up so that it can be rendered just about any way you want it without having to use absolute positioning. It uses some pretty advanced CSS, so it's not for the faint of heart (or the inexperienced). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" /> <style type="text/css" media="screen"> /* Stylesheet written by Dan Schulz on 28 January 2007. Stylesheet last modified by Dan Schulz on 30 May 2007. Stylesheet embedded into the HTML file for educational purposes only. */ * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { margin-bottom: -3em; min-height: 100%; } * html #container { height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */ } html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ min-height: 100%; /* squashes an IE 7 bug */ } h1 { background: #FCF; color: inherit; padding: 0.25em 0; } #menu { float: left; list-style: none; position: relative; /* this is needed to set the z-index */ width: 8em; z-index: 1; /* this is needed to fix a depth-sorting error */ } #menu li { float: left; /* IE 5.x bug fix */ width: 8em; /* this is needed since the LI is being floated */ } #menu a { background: #F66; color: #FFF; display: block; height: 1%; /* IE 5.01 bug fix */ text-decoration: none; text-indent: 0.25em; width: 100%; } #menu a:hover { background: #FF5; color: #000; } #content { float: left; margin: 0 -13em 0 -8em; width: 100%; } #content .section { background: #CCF; color: inherit; margin: 0 13em 0 8em; padding: 0 1em; } #content p { text-indent: 1.5em; } #sidebar { background: #FFC; display: inline; /* IE 5 and 6 bug fix */ float: right; padding: 0 1em; /* this is what causes the box model problem in IE 5.x */ width: 11em; } * html #sidebar { /* IE 5.x Box Model Hack */ width:13em; w\idth: 11em; } #sidebar p { padding: 0.25em 0; } #clear-footer { /* needed to make room for the footer */ clear: both; height: 3em; } #footer { background: #6CF; clear: both; color: inherit; height: 3em; } #footer p { padding-top: 1em; text-align: center; } </style> </head> <body> <div id="container"> <h1><span></span>Main Heading</h1> <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> <div id="content"> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. </p> </div> <div id="clear-footer"></div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):
Ha! So I'm not the first person to ask, eh? Yikes - yours is some pretty hairy (read: formidable) CSS. I guess what inspired me was seeing how Wikipedia handles their pages. Disable the CSS and you see nice, juicy, relevant content at the very top. That's what I'd like to do. Just to de-Ugh the situation, SEO is only one of my concerns. I intend to create accessible, valid XHTML/CSS with proper content formatting, etc. but SEO is definitely a concern. I'm not interested in miles of hacks to accomplish it either. Is suspect Wikipedia's CSS far exceeds my humble abilities to comprehend it, but was hoping for a stripped-down solution to this. Seems like having the most relevant content at the top of the HTML is a real benefit. SEO is not the end-all-be-all, but not to be ignored either. Thoughts?
I prefer following a logical source order, myself. Not only does it benefit screen-reader users, but also people who are using mobile devices like PDAs and Web-enabled cell phones. Which means the header, main menu (short, of course), content, (the next two can be switched depending on the order of importance to your particular needs at the time), secondary menu (like a left/right menu if your main menu sits underneath the header in a horizontal manner), sidebar, footer. I do agree that the content needs to be as accessible as possible, but people need to be able to find their way around the site as well. If they can do that, then you have served their needs better than you would otherwise. With regard to my layout, the main thing that will cause problems for people trying to modify it will be the use of EMs for layout (followed by the use of negative margins and floats to cause the right sidebar to "ride up" alongside the content).