In my articles on Designing a WordPress Theme from Scratch and Designing a WordPress Theme – Building a Sandbox, as well as Choosing a WordPress Theme, I show you how you can choose a structure for your WordPress Theme and then change the look to create a totally new style for your blog or website.
Understanding how the core structure is critical to a web page design, almost no matter what you put on top of it, is very important to understanding web page design in general. I think of the core structure, called the HTML, as the frame of a house. The CSS styles add the walls, paint, roof, windows, and even the furniture that makes the house a home.
The first web pages were designed using the convenient, but cumbersome table structures. This created a grid from which designers could work. It was familiar but filled with limitations. In 1999, web standards based on tableless designs became the rule and table-based designs slowly started to fade out of fashion.
For us, the move from a table-based design to a totally CSS, table-free layout and design for our 10 year old website, Taking Your Camera on the Road, was a slow process. As one of the early web page designers and developers on the web, I pushed these new standards to their limits as they matured. And as I brought about the transformation from table to tableless design, I documented the process.
You can see the final results of the web page structure I developed on my site, Taking Your Camera on the Road. Peak under the hood of this web page design, you will see a similar structure. I want to help you understand more about this simple but powerful layout structure so you have a better understanding of the importance of the HTML structure and how to use CSS to influence layout and design.
Throughout this article, I’ve included examples of various uses of the same core web page layout structure. Remember, the foundation and walls are the same, only the furnishings have been changed. 😉
The Core HTML Structure
The core HTML structure for our innovative web page layout looks like this, featuring header, one sidebar, content and footer containers:
<html>
<body>
<div class="holyhack">
<div id="container">
<div id="header">Header Here</div>
<div id="content">Content Here</div>
<div id="sidebar">Sidebar Here</div>
<div id="footer">Footer Content and Links Here
</div> /* footer ends */
</div> /* container ends */
</div> /* holyhack ends */
</body>
</html>
That’s it. Very simple. Everything else is furnishing, paint, carpet, and accents.
The body of the structure holds the core information about the layout of the page. The holyhack is a hack for fixing a problem with Internet Explorer that is wrapped around the entire page’s structure. I’ll explain that in a moment. Then a second container, conveniently called container is another wrapper around everything. Into this goes the styles for the controlling the background and page width.
Then comes the header which holds the masthead or main heading of the page, followed by everything within the content area which includes the posts and/or articles. The sidebar then loads with the navigation menu, followed by the footer with more navigational aids.
Personally, I hate working with browser hacks. Unfortunately, Internet Explorer and a few other browsers put web designers in a quandary when web standards that should work, don’t. The holyhack fixes a major problem with Microsoft Internet Explorer, unfortunately still the most popular Internet browser. Remember, you are designing your web page for an audience, and the majority of your audience uses Microsoft Internet Explorer. Internet Explorer also comes with a few bugs – problems – that need special attention in order for a page to look right when viewed. According to Microsoft, these hacks will be obsolete in the newest version of Internet Explorer, but you still need to consider being backwards compatible with those who do not upgrade immediately.
One of those “little problems” causes containers, lists, and links to jump around or appear and disappear. There are different ways to fix this browser bug, but none are as simple as the Holyhack. The Holyhack adds a height to everything overall, which helps Internet Explorer set everything in its place. It isn’t the “real” height of the container but Internet Explorer recognizes it and it works. Thee main thing: It works, and is ignored by the other browsers.
This is the structure, now we need to add the furnishings.
Dressing Up the HTML: Adding CSS
To style the layout of the HTML structure, we use CSS and the style.css style sheet commonly used by WordPress Themes.
html, body { margin:0; padding:0; direction:ltr}
body { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:1em; color:black; background:white}
/* Hides hack from IE-mac \*/
* html .holyhack { height: 1%;}
/* End hack hide from IE-mac */
#container { display:block; margin:0; margin-left: auto; margin-right: auto; padding:3px;}
#header { display:block; padding:0 3px; width:100%; height:100px}
#content { display:block; padding:5px; margin-left:170px}
#sidebar { display:block; position:absolute; top:105px; left:0; width:155px; height:100%; padding:0; margin:0em .5em 1em .5em;}
#footer { display:block; clear:both; float:right; width:75%; padding:10px; color:#6633FF; border-top:1px solid blue}
Again, very simple.
The header sits at the top and stretches across page. You can easily change the height to match whatever header image or masthead look you want. The sidebar sits on the left in an absolute position, 105px below the top of the page, tucking just under the height of the header. CSS works like dominos. If you change the height of the header, then you must also change the top position of the sidebar accordingly.
The content sits to the right of the sidebar with a margin that shoves it into place. You can also use absolute positioning to guarantee the upper left corner position of the content, but why bother. Keep it simple. Again, if you stretch or narrow the sidebar, then you will have to change the margin-left position of the content to accommodate the new width of the sidebar.
The footer sits below everything with a clear:both declaration, which means it will sit below everything above. I added a little trick, though. There are times when the sidebar will be longer than the content and I like having a solid border line above my footer. If the content in the sidebar stretches longer than the content, the footer will lay across the entire width of the page, including overlapping the sidebar. By making the width of the footer much narrower than the full width of the page, it won’t overlap. You can easily change this to make the footer stay where you want it, overlapping the entire width of the page. It’s up to you.
While our web page layout was innovative several years ago, it’s actually very common today. Seems like a lot of web page designers figured out the same benefits of such a design as we did. When we moved from static html web pages to interactive PHP generated WordPress, we used this same layout and totally graphically revamped it. The layout is so good that little tweaking has gone into it after all these years.
To help you understand more about our simple one sidebar layout, you can read about how I designed it in Revealed – Our Innovative Design for Taking Your Camera on the Road, and see test examples I created showing examples of how to use such a layout for the most simple to complex layouts. Each example is based on the same layout, only the CSS styles have been changed.
- Plain Layout with No Graphic Elements
- Test Layout With Borders Around The Blocks
- Layout with Background Colors for the Different Blocks
- Highly Graphic Test Version of Our Layout – Exploring the Possible
- Taking Your Camera on the Road
- More CSS Tips and Tricks from Taking Your Camera on the Road
Technorati Tags: css, hacks, tips, wordpress, themes, tricks, html, structure, layout, design, web, webdev, styles, style+sheet, bugs, hacks, browser
Site Search Tags: css, hacks, tips, wordpress, themes, tricks, html, structure, layout, design, web, webdev, styles, style+sheet, bugs, hacks, browser
Lorelle on WordPress 
5 Comments
There are quite a few themes for WordPress.
However, as far as I could see, only the one called Neuron has collapsable boxes.
Question: Why nobody ever did a theme with *everything* collapsable?
Yes, everything. Most notably, whole columns.
But also, all boxes, of course, posts, comments, threads, header, footer, you-name-it.
Even in the wide world of CMS’s, only a single one that I know of does this little trick:
http://www.cpgnuke.com/
Do you have a massive monitor/resolution? Never mind, sometimes is simply clearer to read the main content without annoying navigation side-bars, ads-columns, etc etc.
Do you have a small monitor/resolution? Then, like me, you are praying that some caritative soul would do what should be obvious in any CMS’s, Forum, and Blogging Tool out there, but does not exist as of today.
Particularly, I’m up to my ears of seeing blog pages with a very, very very long main content column of…20 or 30 characters, while both sides are empty and laughing at me.
If one could collapse whole columns, this would not happen.
Three decazillion pages advising about web standards, css, styling, etc…and nothing.
Up to give it a shot?
Thanks,
Fernando
I’m not really a them magician (at all) and the thing I’m looking for is how to have *two* sidebars; left and right. I did find a few themes with two sidebars; but they seem to have 1 sidebar template. Could you give me a pointer on this?
The WordPress Codex, the online manual for WordPress users, lists Themes by how many “columns” they have, which relates to sidebars. I’d start my search there to narrow it down. A better Theme searching program is underway so stay tuned for a better way to make your Theme decisions.
Also, you can create your own WordPress Theme by starting off with a template layout that matches what you want and then tweak it to what you want. Max Design’s Page Layout Templates will help you find a core layout to begin with.
i want to change my header image. but i don’t know how.
i’am a newbie here. i save my image at another image hosting ..i want to use it as my header image.
how to change it
css ? or header ?
please help me and give me step by step
There is plenty of help available to help you with your header. Start with Problem Solving The WordPress Header and then hit the WordPress Codex, the online manual for WordPress users, to read Designing Headers, and then I recommend you go through the fabulous articles in the Codex section called WordPress Lessons for more how tos.
2 Trackbacks/Pingbacks
[…] Every six to ten months, I’d hear about another hackless perfect web page layout and go worship at their feet, only to find a hack involved to make the web page structure work consistently across all browsers. My one-hack innovative layout continued to hold true, even when I switched to WordPress. It was easy to incorporate the WordPress PHP codes and structure into a new version of my website, which you can see in my post on Innovative and Simple Web Page Structure – Just Change the CSS. […]
[…] Innovative and Simple Web Page Structure – Just Change the CSS […]