3 Column Theme: Include a horizontal navigation bar
March 17th, 2008Feel free to republish this article with a link back to this page. Thanks!
You should have a basic three column layout with a header and footer, as described here.
To include a horizontal navigation bar, you simple need to add one more div.
(To create a vertical navigation bar, you would simply enter the relevant text with links into one of your columns.)
Step 1. Include horizontal navigation
Simply add the following div to you style.css file:
#nav{width: 100%;
height: 20px;
margin: 0px auto 0px;
background-color:green; }
Step 2. Include horizontal navigation
Now you add you navigation div in where you would like it to appear. So the Xhtml should look similar to 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”>HEADER</div>
<div id=”header”>NAVIGATION</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.
Let me know how it goes?
Thanks, Lilly
3 Column Theme: Include a header and footer
March 17th, 2008Feel free to republish this article with a link back to this page. Thanks!
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
Create a 3 Column Theme with Divs
March 17th, 2008Feel free to republish this article with a link back to this page. Thanks!
A three column theme using divs is fast-loading. It is also easy to create. Here’s a 3-step guide that is easier than shampoo instructions…
Step 1. Three Column Theme
Copy and paste this code into a text editor like Notepad:
body {
background: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;
}
#rightContainer{
width:25%;
float:right;
background-color:blue;
}
#twoColumns{
width:75%;
}
#leftColumn{
width:35%;
background-color:yellow;
display:block;
float:left;}
#middleColumn{
width:65%;
background-color:red;
display:block;
float:right;
}
Save this as file as style.css (when saving, make sure to select “All files” from the drop down menu below “File name”).
Step 2. Three Column Theme
Copy and paste this code into a text editor like Notepad:
<!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=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”rightContainer”>RIGHT</div>
<div id=”twoColumns”>
<div id=”leftColumn”>LEFT COLUMN</div>
<div id=”middleColumn”>MIDDLE COLUMN</div>
</div>
</div>
</body>
</html>
Save this as file as index.html
Step 3. Three Column Theme
Open the index.html in a browser. It should look like this…
Go ahead and test it. Write some text into your Xhtml sheet…
Upload this to your main directory. If you are not sure what this is, have a peak at the Web Dictionary.
This is a very simplified blog layout. Here are some variations:
- Include a horizontal navigation bar
- Change the background color or image
Do you have any other variations that you can create?
In future posts, I will look at basic CSS and Xhtml for little niceties like: centered text, bold text, etc.
Also, if you are using Wordpress, we’ll look at how to change your template to accommodate for the ‘loop’.
Ciao, Lilly
P.S. please feel free to contact me with questions? I love earning happy mascot points by helping you.
