In this quick tutorial, you will learn how to make a liquid xhtml layout. Basic knowledge of HTML and very little or no knowledge of CSS is assumed.
In case you don't know, xhtml is the same as html, just more strict. As a result of it being more strict, it's easier to make websites that look the same in all major browsers.
Ok, so let's get started. We are going to design our page with a header, two columns, and a footer.
If you want to follow along with this tutorial and make the pages (which I recommend you do... you'll remember it better), go ahead and create a new folder named my xhtml website or what ever. And create two files in it. index.html and style.css.
Now, for something very important. Your HTML is not for designing you website's look. That is what CSS is for... HTML is for the content, and CSS is for styling that content.
That is the whole idea behind CSS. Your website becomes a lot easier to manage and create when you separate your content from your styling.
So lets start with your html. Your content. Then we will make it all look good.
Edit you index.html file to look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My cool XHTML 1.0 website</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
</body>
</html>
Note that first line. That is where we tell the browser that the page is in XHTML 1.0. Also, in the <style> tag, the @import is to load our css file.
Now lets put our content in. Place this into the body (in the <body> tags):
<div id="header">
My header
</div>
<div id="sidebar">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</div>
<div id="body">
<p>This is the body of my cool website.</p>
<p>Yes, it's very cool!</p>
</div>
<div id="footer">
© 2006 by me
</div>
That is our content. And all we have to do now on the html side. Yup, all done with sticky html! Kinda easy? heh... I think so 
Before we go on to CSS, I want you to look at our content we have. How it's structured.
Our content is divided up into 4 sections. The header, sidebar, body, and footer. The sections are defined with the <div> tags. Each div having an id to specify the name of that section.
One more thing I want you to note... the navigation. We are making it in the sidebar section with a list (the <ul> tag). A lot of developers often use tables to accomplish the task of creating a navigation. But with lists, we can be a lot more flexible.
Now, save your index.html page and see how it look in a browser. Pretty plain, huh? But that is exactly how it should show... no styling at all. If you think that something can't be done with CSS and you absolutely need to use HTML to style your website... think again... cause you're wrong
Now for the fun part. CSS!
Lets start with the header. Put this into your style.css file:
#header
{
border:1px solid black;
color:white;
background-color:gray;
padding:5px;
font-size:130%;
}
Now load your page again. Cool! The header has some styling to it! Awesome!
Ok, let's look at what we just did with the css.
I hope you can see how most of it works... I'll explain.
In the first line, we see #header. The '#' means that the word after it is going to be an id of an html element. So in our case, your browser will look for the html element with an id of header. If we were to put a '.' insted, then it would look for all the html elements that had a class named header.
What is the difference between an id and a class? There is just one. You can use a class on as many html elements as you want... and an id you can use on only one element in your page.
Now below the first line is where we put all of our styling that is to be applied to the html element (in this case, a <div>) with the id of header.
I think the style properties we are applying are pretty self explanatory. I suggest you play with modifying the properties to see what happens (like change the border option to be border:3px dashed blue; or change the font-size to 80%).
Let's continue. How about now we style the sidebar and body next... as they will go next to each other. So put this below the styling for your header:
#sidebar
{
float:left;
width:300px;
border-left:1px solid black;
border-bottom:1px solid black;
}
#body
{
margin-left:300px;
border:1px solid black;
border-top-width:0px;
padding:10px;
}
Now reload your page. Wow! Lookin better!
Soooo... what how did we do that?
Well, to keep this tutorial short, and because this isn't meant to be a reference for css properties, I'll give a very basic explanation.
In the sidebar, we have float:left;. That makes it so that the side bar floats to the left of the body element and not go to the default position above it. If you're not sure what I mean, try removing it from the css and see what happens.
For the body, we set a left margin of 300px. This is to put the edge of the body right up next to the sidebar (note that we set the width of sidebar to 300px). If we did not do this, the text of the body would rap around the sidebar (remove the left margin to see what I mean).
Ok, cool! Almost done. Now we got to get the footer to go where we want it to. Footers are a tricky thing with CSS. Put this in your style.css:
#footer
{
clear:both;
font-size:80%;
color:gray;
background-color:white;
text-align:right;
padding:3px;
border-bottom:1px solid black;
}
The clear:both; is our secret ingredient. It makes it so that it gets positioned (in our case) below all of the other divs on the same level as it! Woo! we got got the footer positioned correct now... and have a nice look to it!
Now, with the content we have, you won't knotice a difference with or without the clear property. But make the sidebar longer than the body and you will be able to see what happens.
And finally, we will make the navigation look good. Our options are unlimited. In this tutorail, I cover some of the possibilities, but sense this tutorial is mainly about the layout, I'll keep it simple this time.
So lets take off those bullets from our links! Add this to your css file:
#sidebar ul
{
list-style-type:none;
}
Something new! After the #sidebar we have a ul! That simply means to apply the following style to all <ul> elements in the #sidebar element.
Simple?
Well, that's all for this tutorial! I hope you learned a lot! In case you didn't follow along, you can see the finial result here: https://joey101.net/static/tuts/layout/
Oh, and as an exercise, try flipping around the two columns so that the body is on the left and the sidebar is on the right. Tip: you don't need to change any html to do this, only css!
Have fun!
Joey
Re: Tutorial: How to make a good XHTML layout
Thanks for your excellent tutorials! I've been reading a lot about css but never quite understood its importance. I just realized I've been tied to html for too long! Keep up your excellent work!