Servage Web Development Course Part 3: Layout and page structure

blogimage Every website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there – somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let’s have a look at a sample <div> container structure (part3a.html of the project files):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" type="text/css" href="part3.css">
	</head>
	<body>
		<div id="container">
			<div id="header"></div>
			<div id="menu"></div>
			<div id="content"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

It’s not very complicated, and it provides a good structure for the page. There are many ways of organizing div’s. I like it simple, like in this example.

Full website

In the example file part3b.html there is even content added. Since you know all the used tags from previous parts of this course, I will not go through them again. If you are new, and not sure what everything means, please refer to parts 1 and 2 of the Servage Web Development Course. In part3.css I have re-used some of the CSS from part2.css, and added some styles for the new div containers, to properly position them with a top header, right-side menu, left-oriented content, and the footer at the bottom of the page. The tags are rather simple, and you can explore them in the sample file. Please note the use of the CSS styles for “position”, “top” and “right”.

The content of part3b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" type="text/css" href="part3.css">
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>My website</h1>
			</div>
			<div id="menu">
				<ul>
					<li><a href="">Menu item 1</a></li>
					<li><a href="">Menu item 2</a></li>
					<li><a href="">Menu item 3</a></li>
					<li><a href="">Menu item 4</a></li>
					<li><a href="">Menu item 5</a></li>
				</ul>
			</div>
			<div id="content">
				<div class="article">
					<h2>Genome analysis changes diagnosis</h2>
					<p class="date">Saturday, 24 October 2009 01:21 GMT</p>
					<p class="description">
						A critically ill Turkish boy has had his life saved after scientists were
						able to read his genome quickly and work out that he had a wrong diagnosis.
					</p>
					<img src="part2.jpg" alt="Illustration of DNA" />
					<p>
						The scientists writing in the journal, Proceedings of the National Academy of Sciences,
						say they completed the analysis of his blood in just 10 days. They were able to see that
						he had a mutation on a gene that coded for a gut disease and tell his doctors. Clinical
						tests proved that the boy had the disease and he is now recovering.
					</p>
					<p>
						<strong>Simultaneous analysis</strong><br />
						Richard Lifton, of Yale University Medical School who co-ordinated the research with teams
						in Beirut and Turkey, said: "The boys physicians sent a blood sample - they only had a very
						broad diagnosis of what was happening to this five-month-old child and were suspicious that
						he had a genetic disorder affecting his kidneys. [...]
					</p>
					<p>
						<a href="http://www.bbc.co.uk/go/homepage/i/int/news/worldtop/5/-/news/1/hi/health/8315258.stm">Read the full article here.</a>
					</p>
				</div>
				<div class="other_articles">
					<h3>Other articles</h3>
					<ul>
						<li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323061.stm">Farmer gets two-in-one ducklings</a></li>
						<li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323765.stm">Five rescued after boat capsizes</a></li>
						<li><a href="http://news.bbc.co.uk/2/hi/europe/8323651.stm">German coalition agrees tax cut</a></li>
					</ul>
				</div>
			</div>
			<div id="footer">
				© 2009 by me and my friends.
			</div>
		</div>
	</body>
</html>

The content of part3.css

body {
	font-family: Arial, Verdana;
	font-size: 12px;
	text-align: center;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 20px;
	margin: 0;
}
h2 {
	font-size: 16px;
	margin: 0;
}
h3 {
	font-size: 16px;
	margin: 0;
}
p.date {
	font-size: 10px;
	color: #aaaaaa;
}
p.description {
	font-weight: bold;
}
.article img {
	float: right;
}
a {
	color: #990000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ul {
	list-style-type: square;
}

#container {
	width: 700px;
	margin: 0 auto 0 auto;
	text-align: left;
	position: relative;
}
#header {
	background-color: #990000;
	color: #ffffff;
	padding: 10px;
}
#menu {
	position: absolute;
	top: 45px;
	right: 0;
	width: 150px;
}
#content {
	width: 540px;
	margin-right: 160px;
	margin-top: 10px;
	padding: 5px;
}
#footer {
	font-size: 10px;
	color: #aaaaaa;
	border-top: 1px solid #990000;
	padding: 5px;
	margin-bottom: 30px;
}

Positioning in-depth

For in-depth understanding of CSS based positioning, I can recommend the following online resource. Please also have a look at the interesting floating principle and the box-model on the same page as linked above. These are some of the core CSS skills to master, to successfully handle div containers.

The files for part 3 can be downloaded here.

Servage Magazine