Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the usability of that web page. Likewise, the flexible box model only works in Firefox and Webkit.
What we can do is we can set up a failsafe so that the web page will work in every browser correctly, but not in the same way. For instance, I made it so that in Webkit browsers, the page uses the flexible box model. However everywhere else it just switches to the old fashioned way and floats the elements to either side to create columns.
Overall this is the best way to handle issues like this. Instead of compromising a users experience, just make it work but in a different way. The experience doesn’t have to be linear across all browsers.
A HTML5 Document
The basic HTML5 layout, or the skeleton of it if you will, is nothing that new. Your mind will not be blown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 and CSS3 Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
One of the most notable differences is the addition of the new doctype, <!DOCTYPE html>, which is way easier to use than the old ones HTML has provided us with. Then we just do all the normal stuff, such as define the charset, title and link.
New and Fancy
Traditionally web pages are designed like this.
With HTML5 we replace all those divs with specific elements, such as <header> and <aside>. This is a big step up from having to define our own elements with id’s and stuff, and makes HTML a lot more specific. When HTML4 was released, it wasn’t released with the web of 2010 in mind. HTML5 on the other hand was.
Don’t think the div is an unnecessary piece of baggage on the HTML5 specification, as it still has as many uses now as it did when HTML4 was released. Most HTML5 tags work in Webkit (well, in Chrome 5 anyway), so that’s the browser I’ve been using to make all of this flow together. However, Firefox doesn’t center the flexible box model correctly, and IE is, well, IE, so I’ve had to throw in a bunch of hacks to make this work correctly.
First off, stick this script in the head of your document.
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie67hacks.css" /> <![endif]-->
HTML5 tags wont work in IE, so the little javascript bit fixes that. The CSS files are there so we can fix some errors later on with the design. Oh, and by the way, this is the pretty basic design we’re going to be doing today. I’ve tried to keep it simple so that you can get a good idea of what HTML5 and CSS3 can do, rather than over complicating the process.
The Body
The body is probably the bit that you’re most worried about. HTML5 tags are a tad different from their HTML4 counterparts, but really only by their names with most of the new tags acting like <div> and <span> tags.
Header
Lets work on the header. We’re going to be using the <header> tag for this one. It’s new to HTML5, and is defined as the following:
The header element represents a group of introductory or navigational aids.
So basically the header tag contains some navigational elements and the logo or introductory text. For the navigation we’ll be using the <nav> tag, and we’ll just be using a <div> for the logo. So the skeleton of the <header> element is going to look a bit like this:
<header> <div id="logo"> ... </div> <nav> ... </nav> </header>
Then it’s just a case of adding the content to these elements. For the #logo div, we can stick a logo image in, or we could use headings. If you’re going to use headings, and have multiple headings (i.e. <h1> and <h2>), we can use the <hgroup> tag. The definition for the <hgroup> tag is..
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
So for example, you could have this in the logo area:
<hgroup> <h1>Webtint</h1> <h2>Web Development Blog</h2> </hgroup>
‘course, I’m just going to use an image instead, but heck, if you want to use the logo I stuck together feel free by getting it from here.
<a href="#"><img src="images/logo.gif" alt="Logo" /></a>
Inside the <nav> we’ll just use an unordered list.
<ul> <li><a href="#">home</a></li> <li><a href="#">tutorials</a></li> <li><a href="#">resources</a></li> <li><a href="#">articles</a></li> <li><a href="#">forums</a></li> <li><a href="#">contact</a></li> </ul>
The Content
For the content area, I’ve went for a structure like this:
<div id="content"> <section class="hfeed"> <article class="hentry"> <hgroup> <h2 class="entry-title"> ...</h2> <h3> ... </h3> </hgroup> <p class="entry-summary"> ... </p> <footer> ... </footer> <br /><hr /><br /> </article> </section> <aside> ... </aside> </div>
New tags that you’ve probably noticed include the <section> and <aside> tags. There’s also an <article> tag nested inside the section, and a <footer> tag as well.
First off, the section tag is defined as “The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading”. Since the <section> is going to encompass the articles titles and their summaries, <section> seems like a suitable tag to use here.
The <article> tag is defined as “self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”, for example a blog post, so it’s perfect for the usage we’re going to be using it for. The <footer> tag inside that is defined as “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like”.
Finally, the <aside> tag is defined as “The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography”. This is great, because the sidebar is related to the content, while being separate.
After all that it’s just a case of adding the content. Here’s one I made earlier.
<div id="content"> <section class="hfeed"> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> </section> <aside> <h2>Archives</h2> <ul> <li><a href="#">February 2010</a></li> <li><a href="#">January 2010</a></li> <li><a href="#">December 2009</a></li> </ul> <br /> <h2>Categories</h2> <ul> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Inspiration</a></li> </ul> <br /> </aside> </div>
Apart from the elements I mentioned, it’s all regular old HTML4, eh?
The Footer
The footer is a lot easier to make, and I think that generally I’ll leave this up to you to expand. For the time being though, I’ve decided to just go with a simple copyright. You could add more to these columns if you wanted.
<footer id="main-footer"> <section id="footer-1"> Copyright Webtint © 2010 </section> <section id="footer-2"> </section> </footer>
The final HTML code looks a bit like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 and CSS3 Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie67hacks.css" /> <![endif]--> </head> <body> <div> </div> <header> <div id="logo"> <a href="#"><img src="images/logo.gif" alt="Logo" /></a> </div> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">tutorials</a></li> <li><a href="#">resources</a></li> <li><a href="#">articles</a></li> <li><a href="#">forums</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> <div id="content"> <section class="hfeed"> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> <article class="hentry"> <hgroup> <h2 class="entry-title"><a href="#">The Title</a></h2> <h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3> </hgroup> <p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p> <footer><a href="#">Comment on this (5)</a> • <a href="#">Tweet this</a> • <a href="#">Stumble Upon</a></footer> <br /><hr /><br /> </article> </section> <aside> <h2>Archives</h2> <ul> <li><a href="#">February 2010</a></li> <li><a href="#">January 2010</a></li> <li><a href="#">December 2009</a></li> </ul> <br /> <h2>Categories</h2> <ul> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Inspiration</a></li> </ul> <br /> </aside> </div> <footer id="main-footer"> <section id="footer-1"> Copyright Webtint © 2010 </section> <section id="footer-2"> </section> </footer> </body> </html>
Cascading Stylesheets Numero 3
Now at the minute, if you go and look at your document, you’ll see that it isn’t looking like much, and that’s because we haven’t added any CSS yet. The CSS file I’ve compiled is very basic and simple, adding only the bare essentials in order to make it as compressed as possible. Here’s the full CSS file for your amusement:
body {
font-family: Arial, Helvetica, sans-serif;
background: #f1f1f1;
padding: 0;
margin: 0;
color: #222;
font-size: 62.5%;
}
header {
width: 960px;
margin: 0px auto;
display: block;
}
#logo {
padding: 35px 0px 35px 40px;
background: #fff;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
}
#logo a:active {
background: transparent !important;
}
nav {
width: 950px;
margin: 0px auto;
overflow: hidden;
font-size: 2.0em;
font-weight: bold;
padding: 0px 0px 0px 10px;
display: block;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
list-style: none;
float: left;
padding: 0px 35px 0px 10px;
}
nav a {
text-decoration: none;
color: #000 !important;
display: block;
padding: 20px;
}
nav a:hover {
color: #444;
background: #fff;
}
#content {
width: 960px;
margin: 0px auto;
display: -webkit-box;
-webkit-box-orient: horizontal;
font-size: 1.4em;
}
footer {
display: block;
}
#main-footer {
width: 960px;
margin: 0px auto;
padding: 15px;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
.hfeed, x:-moz-any-link, x:only-child {
float: left;
}
aside, x:-moz-any-link, x:only-child {
float: right;
}
article {
text-align: justify;
line-height: 1.5em;
color: #222;
display: block;
}
#main-content, .hfeed {
padding: 10px 20px 20px 40px;
width: 500px;
background: #fff;
-moz-border-radius-bottomleft: 0.8em;
-webkit-border-bottom-left-radius: 0.8em;
-moz-border-radius-topleft: 0.8em;
-webkit-border-top-left-radius: 0.8em;
display: block;
}
aside {
padding: 10px 20px 20px 40px;
width: 340px;
background: #fff;
-webkit-border-bottom-right-radius: 0.8em;
-moz-border-radius-bottomright: 0.8em;
-webkit-border-top-right-radius: 0.8em;
-moz-border-radius-topright: 0.8em;
display: block;
}
aside ul {
list-style: none;
padding: 0px 0px 0px 6px;
}
aside ul li {
line-height: 1.5em;
font-size: 1.2em;
border-bottom: 1px dotted #d9d9d9;
}
aside ul li a {
padding: 10px 0px 10px 10px;
display: block;
font-weight: bold;
}
aside ul li a:hover {
background: #f1f7f9;
}
/* Some Headings for You */
h1 { font-size: 3.0em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }
hgroup h3, hgroup h3 a { color: #9aa8ad !important; }
hgroup h1, hgroup h1 a { color: #51add3 !important; }
h3 a { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { line-height: 0.5em; }
a {
color: #2a708e;
text-decoration: none;
}
a img {
border: 0;
}
a:visited { color: #104258; }
a:active { background: #eaf7fc; }
a:hover { color: #0c1e2f; }
hr {
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 1px dotted #d9d9d9;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
You may have noticed the few lines that go like this:
.hfeed, x:-moz-any-link, x:only-child {
float: left;
}
aside, x:-moz-any-link, x:only-child {
float: right;
}
These are firefox hacks, as firefox was handling the flexible box model in a weird way, so I decided just to use the old fashioned way, and use floats. Speaking of the flexible box model, click here to learn more about it. Since the flexible box model has only been implemented in webkit browsers in my CSS, the only references you’ll see to it are these:
display: -webkit-box; -webkit-box-orient: horizontal;
Another CSS3 feature I’ve included is rounded corners, which you may see floating about the script in forms like this:
-webkit-border-bottom-right-radius: 0.8em; -moz-border-radius-bottomright: 0.8em; -webkit-border-top-right-radius: 0.8em; -moz-border-radius-topright: 0.8em;
Rounded corners are only really supported in Firefox and Webkit at the minute, so that’s the only places they’ll work. Another thing you might notice is that on all the new HTML5 tags, I’ve added display: block;. This is because firefox (again) was acting up and this seemed to remedy the problem. This leads us on to our next problem. Internet Explorer
Internet Explorer Hacks
You might remember earlier that we included some links to stylesheets for IE hacks. You’re going to want to create those files now. A lot of you may not know this, but I have a great disdain for all things Internet Explorer, mainly because of it’s awful support for web technologies. So lets try and fix that up with a little CSS magic.
In the iehacks.css file, add this:
#content {
background: url(images/spacer.gif) repeat;
}
aside {
float: right;
padding-top: 40px;
}
.hfeed {
float: left;
padding-top: 40px;
}
hr {
border-bottom: 1px solid #fff !important;
border-left: 1px solid #fff !important;
border-right: 1px solid #fff !important;
}
This is just to fix a few problems with alignment and all that. This applies to all versions of IE. The spacer.gif image is a 1x1px white square. You might want to make that or save it from here. After that, open up ie67hacks.css and add the following:
aside ul li {
position: relative;
right: 40px;
}
Again, alignment issues. After that it’s just a case of putting it all together and hoping it stays put. For all you out there who don’t want to go to the bother of picking things out from this article, I’ve stuck together a demo and a downloadable zip for you below.
twitter
subscribe to our rss feed
like us on facebook
Most Popular
