1. Mark up the content using <div> tags to surround each major section (the header, the left column, center column, right column, footer, etc.)
<div id="header">
<h1>Generic Header</h1>
</div>
<div id="columnLeft">
<P>Blah blah blah</P>
</div>
<div id="columnMain">
<p>Lorem Ipsum</p>
</div>
<div id="columnRight">
<p>Yadda yadda yadda</p>
</div>
<div id="footer">
<p>Copyright 2006</p>
</div>
2. Now, write styles to create the columns:
#columnRight{
width: 30%;
float: left;
padding-bottem: 1em;
}
#columnLeft{
width: 20%;
float: left;
padding-bottem: 1em;
}
#columnMain{
width: 50%;
float: left;
padding-bottem: 1em;
}
#footer{
clear:both;
padding-bottom: 1em;
text-align: center;
}
1. Mark up the content using <div> tags to surround each major section (the header, the left column, center column, right column, footer, etc.).
2. Wrap a <div> tag around the left and middle columns (here it's called "enclose").
3. Wrap a <div> tag around the whole thing )here called "whole").
<div id="whole">
<div id="header">
<h1>Generic Header</h1>
</div>
<div id="enclose">
<div id="columnMain">
<p>Lorem Ipsum</p>
</div>
<div id="columnLeft">
<P>Blah blah blah</P>
</div>
</div>
<div id="columnRight">
<p>Yadda yadda yadda</p>
</div>
<div id="footer">
<p>Copyright 2006</p>
</div>
</div>
4. Now, write styles to create the columns:
#whole {
margin-left:0;
width: 50em;
}
#columnMain{
width: 25em;
float: right;
}
#columnLeft{
width: 10em;
float: left;
}
#columnRight{
width: 15em;
float: right;
}
#enclose {
float:left;
width: 35em;
}
#footer{
clear:both;
padding-top: 1em;
text-align: center;
}
1. Put your navigation into an unordered list, enclosed in a <div> tag:
<div id="navigation">
<ul>
<li><a href="#">Bob</a></li>
<li><a href="#">Carol</a></li>
<li><a href="#">Ted</a></li>
<li><a href="#">Alice</a></li>
</ul>
</div>
2. Now, create styles for the navigation:
#navigation{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: bold;
color: #333;
width: 10em;
background-color: #9CC;
border-right: 1px solid #333;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
margin: 0;
border-top: 1px solid #003;
}
#navigation ul li a {
display: block;
padding: .2em .2em .2em .4em;
border-left: 1px solid #369;
border-right: 1px solid #69C;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigation ul li a {
width: auto;
}
#navigation ul li a:hover {
background-color: #69F;
}
1. Create your navigation as an unordered list, enclosed in a <div> tag. Note the addition of the "current" ID in one of the anchor tags.
<div id="slickTabs">
<ul>
<li><a href="#">Bob</a></li>
<li><a href="#">Carol</a></li>
<li><a href="#">Ted</a></li>
<li><a href="#" id="current" >Alice</a></li>
<li><a href="#">Tom</a></li>
<li><a href="#">Dick</a></li>
<li><a href="#">Harry</a></li>
</ul>
</div>
2. Now, create styles for the navigation:
#slickTabs ul {
padding: .3em 0 .3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: bold;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #669;
}
#slickTabs ul li {
margin: 0px;
display: inline;
list-style: none;
}
#slickTabs ul li a {
text-decoration: none;
padding: .3em .5em;
margin-left: .2em;
border: 1px solid #669;
border-bottom: none;
background: #ccf;
text-decoration:none;
}
#slickTabs ul li a:link {
color: #448;
}
#slickTabs ul li a:visited {
color: #667;
}
#slickTabs ul li a:link:hover, #slickTabs ul li a:visited:hover {
color: #000;
background-color: #aae;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #227;
}
#slickTabs ul li a#current {
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}