Creating a CSS layout, that doesn't look like a pop-up layout is never going to be easy, let alone when we get into the real hard nitty gritty areas of CSS. However, this layout will teach you how to create a good, but basic, CSS layout. The layout will literally look like this:
Code:
_______________________
| |
| Header |
| |
|_____________________|
|Content |Nav |
| | |
| | |
| | |
| | |
| | |
|______________|______|
It's all down to the header image and the colours that you choose that will determine what goes on.
So, now that we've decided what the layout looks like, you need to know a few ground rules about CSS.
First of all, CSS, or Cascading Style Sheets is used for almost anything when it comes to the appearance of web design. It ranges from simply changing the colours of fonts, to structuring the flow of the website. CSS can either be placed on a single web page, or it can be linked to externally. I recommend that you ALWAYS link externally to stylesheets. The reasoning behind this is because if you link, then all you need to do is change one file if you decide that a colour, or a position is the wrong place. Instead of changing many pages. The next piece of advice I'm offering is to make sure that everything is Coding Compliant. If it isn't, then work on it more. It's a good habit to get into. Some of us, myself included, are lazy when it comes to this. If you start at it from the off, then you'll never get into the detrimental habits.
So, I'll start off with the XHTML page, as that's the easier bit to understand.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Archaic Sage" />
<title>Your Site</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="header"></div>
<div id="content"><div class="header_content">Header</div>
<div id="copyright"></div></div>
<div id="links"><div class="header_links">Header</div>
</div>
</body>
</html>
The doctype is for the validation of your XHTML. If it's there, then it means that you can validate your page. The <html xmlns> is for XML purposes, I do it out of habit. The meta details are also for compliance purposes, which I've learnt to do out of habit. The first meta details just tell the browser what language you are using. The second tells the browser, and any XML details who made it.
The <link rel> is for the css. It can also be used with Javascript, you simply change the type.
Notice how everything has a " />" ending to it? Well, that's just because in XHTML everything requires you to have a closing tag (aside from a few codes), the space is so older browsers can understand it and read it as HTML. Soon, it will not be necessary.
We now then need to start the body and start with the <divs>.
The div id's are the areas which are decided by the CSS, the placement is important. In this case it's literally: Header, Content, Nav. It's as simple as that.
The Classes are something different. They tell the browser that the information within there is allowed to be repeated, it makes the work of the browser easier. Also, a id can only be used once in coding compliant layouts. A class can be used as many times as you like.
Within each <div> be it an id or a class, that's where the information you want goes. In this case, the classes are used for header information, so they look nicer. The ids are the structure of the site. Once you've determined what goes where, you then close the id or the div with </div>. It's the same for a class or an id.
Then close all other tags.
Simple.
Well, that's where simplicity ends.
Here's the CSS:
Code:
body
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
#header
{
background-image: url('header.jpg');
background-repeat: no-repeat;
top: 0px;
width:700px;
height:400px;
}
#content
{
position: absolute;
top: 405px;
width: 600px;
border-right: 1px #DC3213 solid;
}
#links
{
position: absolute;
top: 405px;
left: 600px;
width: 100px;
border-left: 1px #DC3213 solid;
}
.header_links
{
border-left: 1px #DC3213 dotted;
border-right: 1px #DC3213 dotted;
border-top: 1px #DC3213 dotted;
border-bottom: 1px #DC3213 dotted;
background-image: url('header_links.gif');
background-repeat: no-repeat;
width: 90px;
height: 20px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-weight: bold;
}
.header_content
{
border-left: 1px #DC3213 dotted;
border-right: 1px #DC3213 dotted;
border-top: 1px #DC3213 dotted;
border-bottom: 1px #DC3213 dotted;
background-image: url('header_content.gif');
background-repeat: no-repeat;
width: 598px;
height: 20px;
text-align: center;
font-weight: bold;
}
#copyright
{
border-left: 1px #DC3213 dotted;
border-right: 1px #DC3213 dotted;
border-top: 1px #DC3213 dotted;
border-bottom: 1px #DC3213 dotted;
text-align: center;
font-weight: bold;
width: 598px;
font-size:10px;
}
p
{
font-size:12px;
}
a:link {color: black}
a:visited {color: gray}
a:hover {color: #660000}
a:active {color: red}
Who ever said life was easy?
Well, this is where it gets tricky. But do not worry, as it will soon become clear!
With CSS everything has to be define:
p{Your settings}
x{y}
Your p (which is paragraph <p> remember) is what you're changing, and everything within the {} are the settings. It's that simple.
Now, with the body I've decided to discuss the margins. Margins are how far things are away from the edges. Notice how everything is "whatever
: 0px
;" The bold is the important bit. The colon is in replacement of the equals sign in HTML and the semi-colon ( ; ) is to tell the browser that a new line has appeared (just like PHP, C, C++ and many other programming languages).
Now, onto the div ids. All ids have to first be assigned with #. Then, you give it a name, and then you give it all of your settings. In this case, it's the header. And within the header we have told the browser where the background image is, where it should be replaced, how far away it is from the top, how wide it is and how tall it is. Everything can be defined, and needs to be.
All of the others have something that the header doesn't though. And that's a position. Positioning is crucial. You can make something float with CSS if you want to, or you can make it move around with the page. In this case, I've decided to make everything position: absolute. This means I define where it stays, this is by saying how far from the top and left it has to be. For more information on this, click
here
Now, onto the classes. To define a class, you must first have a fullstop (.). Then you define everything you want that class to be. Be it a header, or simply a class for a particular style of link. The possibilities are endless.
With the last area, the a: that is a special tag that is dedicated to links. It will simply define what colours, and styles, your links are going to be. They can be anything you want them to be. Which is why CSS is so powerful.
In the examples that I have given you, I've touched on many areas of CSS and not explained them. These are the more obvious things, such as background images and alike. If you are unsure of anything, then go to
W3Schools. This is the place for CSS training. There are many other sites dedicated to CSS, but they are more advanced than this site and expect you to know more than bare bones.
Again, I've used this very code on another site, it's a free layout site. So feel free to edit and change the code as you feel fit.
Any questions?
CSS Layout -- Instead of a table
Now you have access to post articles. Use it wisely 
