There are many tutorials out there on how to make a three coloumed layout in XHTML with a table.
Tables are meant for tabulated data. As such, this tutorial will address writing a CSS based layout. The code will look like the old internet. However, it will give you greater freedom with your coding.
This layout uses the overflow tool. Thus, it looks like an I-frame layout. I decided to use this one as it’s quite a nice one to add with a lot of techniques used.
Code:
body
{
margin: 0px 0px 0px 0px;
font-size: 12px;
color: black;
}
#topheader{
position: absolute;
background-image: url('header.jpg');
width: 600px;
height: 76px;
}
#main{
position: absolute;
background-image: url('main.jpg');
width: 439px;
height: 374px;
top: 76px;
}
#content{
position: absolute;
width: 350px;
height: 350px;
overflow: scroll;
left: 44px;
top: 12px;
background-image:url('bg3.gif');
}
#right{
position: absolute;
background-image: url('right.jpg');
width: 161px;
height: 374px;
top: 76px;
left: 439px;
}
a:link {color: black; text-decoration: underline}
a:visited {color: gray; text-decoration: underline}
a:hover {color: black; text-decoration: underline}
a:active {color: silver; text-decoration: underline}
Oh my, that does look confusing doesn’t it!
Well, the body indicates what should happen within the body of the layout. This code tells us that there should be no margins, the font should be 12 pixels big and the colour should be black.
Take a note:
All spellings are in American English, and every line ends with a semi-colon, or ;. The semi-colon indicates a new line of code. This is so you can have one huge long line of code. But humans have trouble reading that. So we organise it well.
So, what does #topheader mean? Well, that is the name of that part of the code, within the {}’s is all the information about that area of code. The position tells us how we want it to be positioned. Simple enough. Absolute means I don’t want it to move. For more information click
http://www.w3schools.com/css/css_re...asp#positioning .
The background-image means what I want the background image to be, for more information on background images look at:
http://www.w3schools.com/css/pr_background-image.asp
The width and height settings are what you want that part of the code to be, width and height are very important for this layout. For yours, it may not be so. Remember, everything is in pixels, (px) or a percentage (%).
On the #main area of the code, there is a new piece of information. “top”. This means how far from the top margin do I want it to be. This can also refer to bottom, left and right.
Now, in #content we use the overflow technique. Scroll means that it will turn the ‘boxed’ area of code to be used as a barrier against information going into other areas of the site. Using scroll gives it a scrollbar, making it look like an I-frame. For more information, click
http://www.w3schools.com/css/pr_pos_overflow.asp . It’s a pretty simple layout so far. With #right, there is nothing new for us to look at.
The final bit of information is the a: areas. These indicate what you want the links that you have on your site to look like. With CSS you can define any element (or XHTML tag) to look like something you define. It’s very helpful. These links all have an underline and all look really good, with the black, grey and silver themes.
http://www.w3schools.com/css/tryit....me=trycss_link2 is a nice test it out yourself area of W3Schools to try some other things. As a link is also a piece of text, you can use text formatting on it, just bare that in mind.
So, now onto the XHTML code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>Autumn Rune</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="topheader"></div>
<div id="main">
<div id="content"></div>
</div>
<div id="right"></p>
</div>
</body>
</html>
Well, that certainly looks not as scary as the CSS. It’s pretty simple really. If you’re familiar with HTML you’ll see that this is basically the same. Only with a few simple changes. XHTML is just a stricter version of the previous markup language. I will not explain any of the XHTML to you aside from the <div align=”something”></div> why? Because if you’re looking at this coding you should already be familiar with basic XHTML. Which is what the rest of the coding is.
The divs just tell our browser what area of the CSS to display. It’s as simple as that. Whatever you’ve named your segment of code, be it #help or #main, you just need to use the name of that area of CSS code. It just tells the browser where you are placing your information. In the divs, you just dump your information without and of the horrible table layouts.
You may notice that the main div does not close until after another div has been put into it. That just styles that div's information with the other div's information as well.
It’s normally advisable to link your CSS information, as then it’s only a change to one page and not a hundred. As such, just use the link rel at thet op of the page. The meta information is to tell your browser what language you are using and the doctype just tells the browser what markup you’re using, and it’s also a necessity for your code to be standards compliant.
So, now that you’ve learned the basics. Go get layout making.
For more information, please look at:
http://www.w3schools.com/css
http://glish.com/css/
These sites are very handy.
Legal Information:
The above layout is © Archaic Sage and may not be used without prior permission. I know that makes me sound greedy, but it's used on other sites and stuff. So I need to keep it mine. Feel free to modify the codes to make it your own layout.
CSS Layout tutorial
