HTML & CSS Layout
Just a little something to show a page layout. This is based off of no design. I am using CSS3Pie here for the rounded corners and linear gradients, which makes those styles work for IE6+.
Here's the HTML used
<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html class="ie ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]> <html> <![endif]-->
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Examples :: Layout</title>
<link rel="stylesheet" type="text/css" href="/css/exampleLayout.css"/>
</head>
<body>
<div id="container">
<div id="header">
<h2 id="logo"><span></span>Logo</h2>
<ul id="nav" class="clearfix">
<li>
<a href="#">Link 1</a>
<ul>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
<li class="last">
<a href="#">Link 5</a>
<ul>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
</ul>
</div>
<div id="contentContainer" class="clearfix">
<div id="leftCol">
<h3>Section Header</h3>
<ul>
<li class="open">
<a href="#">Open Section link 1</a>
<ul>
<li class="selected"><a href="#">Selected Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li><a href="#">Child Link</a></li>
<li class="last"><a href="#">Child Link</a></li>
</ul>
</li>
<li><a href="#">Section link 2</a></li>
<li><a href="#">Section link 3</a></li>
<li class="last"><a href="#">Section link 4</a></li>
</ul>
</div>
<div id="mainContent" class="clearfix">
<div id="mainCol">
<h1>Inner Content h1 for SEO</h1>
<div class="box round white">
<div class="h">
<h4>Box Header</h4>
</div>
<div class="c">
<img src="../i/key_thumb.png" class="floatRight" height="140" width="140" alt="The Key, The Ribbon and the Tap"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis fermentum lacus, eget ultrices elit ornare a. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis fermentum lacus, eget ultrices elit ornare a. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient. </p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et nunc eu ipsum interdum venenatis vitae eu purus. In a massa sem. Suspendisse scelerisque egestas scelerisque. In hac habitasse platea dictumst. Sed est leo, euismod semper condimentum ut, fermentum in ipsum. Pellentesque placerat auctor nibh sit amet congue. Vivamus venenatis ante eget metus mattis euismod. Nullam tempor, sapien vitae viverra iaculis, justo lacus fermentum sapien, nec faucibus est elit sed neque. Sed dapibus mauris vitae tortor sollicitudin in faucibus nibh adipiscing. Quisque molestie feugiat libero, at gravida est mattis et. Suspendisse sit amet tellus diam. Fusce mauris enim, tempor id tincidunt vitae, bibendum non sem. Pellentesque et nibh vel est molestie gravida. Vestibulum quis tellus augue, fringilla condimentum ipsum. Ut turpis odio, rutrum quis mattis et, lobortis sed mi. Ut felis lacus, venenatis sed vestibulum nec, mollis at mauris. Mauris eu ipsum et arcu commodo volutpat vel in augue.</p>
<p>Duis metus metus, rutrum sed pharetra non, ultrices vel ligula. Aenean non sollicitudin lectus. Fusce vehicula nibh eu mauris adipiscing posuere. Nam mi tellus, sagittis in molestie a, tempus eu sem. Vestibulum feugiat fermentum sagittis. Fusce in auctor mi. Etiam eu dapibus ligula. Sed porta interdum est quis adipiscing. Cras eget nulla sed sapien pharetra tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a urna enim, sed posuere lorem. Aenean nec leo in nibh placerat condimentum. Mauris malesuada aliquam est at sodales. Nam aliquet commodo aliquet.</p>
</div>
<div id="rightCol">
<div class="box round blue">
<div class="h">
<h4>Promo Chip</h4>
</div>
<div class="bg">
<img src="../i/octi.jpg" height="450" width="600" alt="Octi"/>
</div>
<div class="c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis fermentum lacus, eget ultrices elit ornare a. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient. </p>
<p><a href="#" class="icon arrow">Read More</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="clearfix">
<div class="col">
<h5>Header</h5>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit</a></li>
<li><a href="#">Nunc venenatis fermentum lacus</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="col">
<h5>Header</h5>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Nunc venenatis fermentum lacus</a></li>
</ul>
</div>
<div class="col last">
<h5>Header</h5>
<ul>
<li><a href="#">Consectetur adipiscing elit</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Nunc venenatis fermentum lacus</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
var navLinks = $('ul#nav li');
navLinks.hover(function(){
var _this = $(this);
_this.addClass('hover');
},function(){
var _this = $(this);
_this.removeClass('hover');
});
})(jQuery);
</script>
</body>
</html>
And here's the CSS used
/* Site: Sugarbits.org
Author: Ash Kiel [ashleykiel {at} gmail.com]
Date: Jan 17, 2010
*/
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* Clearfix
PositionIsEverything
===========================*/
div.box div.c:after,
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
div.box div.c,
.clearfix {
display: inline-block;
}
html[xmlns] div.box div.c,
html[xmlns] .clearfix {
display: block;
}
* html div.box div.c,
* html .clearfix {
height: 1%;
}
/*Basics
===========================*/
.floatRight {
float: right;
display: inline;
}
div.box div.c .floatRight {
margin-left: 1em;
}
.floatLeft {
float: left;
display: inline;
}
div.box div.c .floatLeft {
margin-right: 1em;
}
hr {
border: solid 1px #BFB4AA;
border-width: 1px 0 0;
margin: 20px 0;
}
.hidden {
display: none !important;
}
p {
font-size: 12px;
color: #333;
margin-bottom: 1em;
}
a.icon {
padding-right: 12px;
}
a.arrow {
background: transparent url(../i/icoArrow.png) 100% 50% no-repeat;
}
h1 {
font-size: 22px;
margin-bottom: 1em;
color: #333;
}
h2 {
font-size: 20px;
margin-bottom: 1em;
color: #333;
}
h3 {
font-size: 18px;
margin-bottom: 1em;
color: #333;
}
h4 {
font-size: 16px;
margin-bottom: 1em;
color: #333;
}
h5 {
font-size: 13px;
font-weight: bold;
margin-bottom: 1em;
color: #333;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #FFFFFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#cccccc));
background: -moz-linear-gradient(#FFFFFF, #cccccc);
background: linear-gradient(#FFFFFF, #cccccc);
-pie-background: linear-gradient(#FFFFFF, #cccccc);
behavior: url(/css/PIE.htc);
}
/* Layout & Styles
******************************************************************/
div#container {
width: 1000px;
margin: 0 auto;
background-color: #fff;
border: solid 1px #ccc;
border-width: 0 1px;
padding: 0 15px;
}
/* Header
********************/
div#header {
height: 100px;
position: relative;
padding: 50px 0 25px;
border-bottom: solid 1px #ddd;
margin-bottom: 25px;
z-index: 150;
}
div#header h2#logo {
width: 200px;
height: 100px;
color: #fff;
vertical-align: middle;
text-align: center;
display: inline-block;
background: #FFAE99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFAE99), to(#990F1B));
background: -moz-linear-gradient(#FFAE99, #990F1B);
background: linear-gradient(#FFAE99, #990F1B);
-pie-background: linear-gradient(#FFAE99, #990F1B);
behavior: url(/css/PIE.htc);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
div#header h2#logo span {
height: 100%;
width: 1px;
vertical-align: middle;
display: inline-block;
}
div#header ul#nav {
width: 760px;
padding-left: 10px;
position: absolute;
left: 225px;
bottom: 25px;
background: #fcfcfc;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#cccccc));
background: -moz-linear-gradient(#fcfcfc, #cccccc);
background: linear-gradient(#fcfcfc, #cccccc);
-pie-background: linear-gradient(#fcfcfc, #cccccc);
vertical-align: baseline;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(/css/PIE.htc);
}
div#header ul#nav li {
float: left;
display: inline;
position: relative;
height: 40px;
border-right: solid 1px #aaa;
}
div#header ul#nav li.last {
border-right: 0 none;
}
div#header ul#nav li a {
line-height: 40px;
display: block;
color: #333;
text-align: center;
padding: 0 40px;
text-decoration: none;
}
div#header ul#nav li ul {
display: none;
position: absolute;
left: 0px;
top: 100%;
width: 200px;
background-color: #ccc;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div#header ul#nav li:hover ul,
div#header ul#nav li.hover ul {
display: block;
}
div#header ul#nav li li {
float: none;
display: block;
position: static;
height: auto;
border-right: 0 none;
}
div#header ul#nav li li a {
display: inline;
padding: 0 15px;
line-height: 25px;
}
div#header ul#nav li li a:hover {
text-decoration: underline;
}
/* Content
********************/
/* Main Content
********************/
div#mainContent {
width: 799px;
float: left;
display: inline;
border-left: solid 1px #ddd;
margin-left: -1px;
}
/* Left Col
********************/
div#leftCol {
width: 200px;
float: left;
display: inline;
border-right: solid 1px #ddd;
position: relative;
z-index: 100;
background-color: #ddd;
}
div#leftCol h3 {
font-weight: bold;
font-size: 20px;
color: #333;
margin-bottom: 15px;
padding: 5px 15px 0;
}
div#leftCol ul {
margin-left: -5px;
}
.ie6 div#leftCol ul {
position: relative;
}
div#leftCol ul ul {
margin-left: 0;
}
div#leftCol ul li {
position: relative;
padding: 5px 0;
}
div#leftCol ul li.open {
padding-bottom: 0;
}
div#leftCol ul li.open a {
margin-bottom: 5px;
}
div#leftCol ul li.open li a {
margin-bottom: 0;
}
div#leftCol ul li a {
text-decoration: none;
color: #333;
border-left: solid 5px #900;
background-color: #eee;
display: block;
padding: 5px 0 5px 10px;
}
div#leftCol ul ul li a {
border-left-color: #006;
}
div#leftCol ul li a:hover,
div#leftCol ul li.selected a {
background-color: #fff;
}
div#leftCol ul li.selected li a {
background-color: #eee;
}
/* Main Col
********************/
div#mainCol {
width: 500px;
float: left;
padding-left: 20px;
border-left: solid 200px #ddd;
margin-left: -201px;
position: relative;
z-index: 90;
}
/* Right Col
********************/
div#rightCol {
width: 260px;
float: left;
display: inline;
margin-left: 20px;
}
/* div.box
********************/
div.box {
margin-bottom: 20px;
background-color: #fff;
position: relative;
overflow: hidden;
}
div.box.round {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: solid 2px #ddd;
behavior: url(/css/PIE.htc);
}
div.box div.h {
padding: 10px 15px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #FFFFFF;background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddddd));
background: -moz-linear-gradient(#ffffff, #dddddd);
background: linear-gradient(#ffffff, #dddddd);
-pie-background: linear-gradient(#ffffff, #dddddd);
behavior: url(/css/PIE.htc);
}
div.box.blue div.h {
background: #F5F5FF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F5F5FF), to(#d3cdfa));
background: -moz-linear-gradient(#F5F5FF, #d3cdfa);
background: linear-gradient(#F5F5FF, #d3cdfa);
-pie-background: linear-gradient(#F5F5FF, #d3cdfa);
behavior: url(/css/PIE.htc);
}
div.box div.h h4 {
margin: 0;
}
div.box div.c {
padding: 15px;
position: relative;
z-index: 100;
text-shadow: #fff 0.1em 0.1em 0.2em;
}
div.box div.bg {
position: relative;
}
div.box div.bg img {
position: absolute;
left: -50%;
top: -50%;
z-index: 10;
}
/* Footer
********************/
div#footer {
margin: 0 -15px;
width: 99%;
padding: 2%;
position: relative;
background: #C4C4C4;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#C4C4C4), to(#4D4D4D));
background: -moz-linear-gradient(#C4C4C4, #4D4D4D);
background: linear-gradient(#C4C4C4, #4D4D4D);
-pie-background: linear-gradient(#C4C4C4, #4D4D4D);
behavior: url(/css/PIE.htc);
}
div#footer h5 {
color: #fff;
}
div#footer div.col {
width: 30%;
padding: 0 2% 0 1%;
float: left;
display: inline;
border-right: solid 1px #ddd;
}
div#footer div.col.last {
border-right: 0 none;
}
div#footer ul {
padding-left: 5px;
}
div#footer ul li {
margin-bottom: 5px;
}
div#footer ul li a {
color: #eee;
text-decoration: none;
}
div#footer ul li a:hover {
text-decoration: underline;
}