3 Column Theme: Include a header and footer
March 17th, 2008.
You should have a basic three column layout as described here.
To include a header and footer you simply need to create a container.
Imagine your theme like a box. Inside the box you have different elements that you want to keep separate and neat. The wrap is like a box within a box, which allows you to do this.
Step 1. Include a header and footer
You can now simply add the following to you style.css file:
#mainContainer{
width:100%;
}
#header{
width: 100%;
height: 75px;
margin: 0px auto 0px; }
#footer{
width: 100%;
height: 75px;
margin: 0px auto 0px; }
Step 2. Include a header and footer
Now you will need to alter your index.xhtml file to look like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Untitled Document</title>
<link href=”main.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”mainContainer”>
<div id=”header”></div>
<div id=”rightContainer”>RIGHT Container</div>
<div id=”twoColumns”>
<div id=”leftColumn”>LEFT COLUMN</div>
<div id=”middleColumn”>MIDDLE COLUMN</div>
<div id=”footer”>FOOTER</div>
</div>
</div>
</body>
</html>
You should have something that looks like this…
Have a play around. Have a peak at here for more information on background colors and header images.
Let me know how it goes?
Thanks, Lilly
This article is written by: Lilly Mouse...I love communicating (through writing, art, dance, and any other way imaginable). Blogging and I have become very good friends in the last few years.
LillyMouse.com is my creation, and I'm so please to share it with you! Ciao for now, Lilly Read more from this authorWhat's Next?
Stumble this
Digg this
