Pages

Strategies

There are 3 common stategies for designing with HTML & CSS:

Strategy	Pros	Cons
Old School: uses tables and visual (e.g. "font") tags to create pages. No CSS.	Works in older browsers	Hard to maintain Will not work in future browsers Large file sizes
Hybrid: Uses tables for general layout, HTML for content, CSS for aesthetics.	Easy to build Easy to maintain	Not "correct" Difficult to repurpose for different screen sizes
Pure: HTML for content, CSS for layout and aesthetics.	"Correct" Easier to repurpose for different screen sizes	Painful to create complex designs Not compliant with all browsers

The hybrid option is the most forgiving for beginners to learn.

Example Hybrid Process

We will use the hybrid technique in this example. You can see this process as screenshots, then follow step by step.

See the process as screenshots.

Step 1: Figure out structure of the design

Here's the design we want to make.

We can break up the page into this basic grid.

Step 2: Duplicate the structure using tables

Next we block out that grid using tables. We need to use a basic style sheet to see what our table is doing. We have outlines in the table now. We'll remove those when we're done.

Basic style sheet. We'll get rid of the outline later.

table.layout { border-collapse: collapse; }
table.layout tr td { vertical-align: top; padding: 0; border: solid 1px fuchsia; }

Table with some colspans to get the grid in the right places.

<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Web 2.0 Corp</title>

	<link rel="stylesheet" type="text/css" href="css/main.css" />	

</head>

<body>

<table class="layout">
	<tr>
		<td colspan="4">head</td>
	</tr>
	<tr>
		<td colspan="4">nav</td>
	</tr>
	<tr>
		<td colspan="4">banner</td>
	</tr>
	<tr>
		<td>block 1</td>
		<td>block 2</td>
		<td>block 3</td>
		<td>block 4</td>
	</tr>
	<tr>
		<td colspan="4">footer</td>
	</tr>
</table>

</body>
</html>

How it looks.

Now we can make each block the right size. Let's do this by adding ids to each td, and altering our CSS. We'll replace our border with blocks of colors.

<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Web 2.0 Corp</title>

	<link rel="stylesheet" type="text/css" href="css/main.css" />	

</head>

<body>

<table class="layout">
	<tr>
		<td colspan="4" id="layout-top">head</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-nav">nav</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-center">banner</td>
	</tr>
	<tr>
		<td id="layout-block-1">block 1</td>
		<td id="layout-block-2">block 2</td>
		<td id="layout-block-3">block 3</td>
		<td id="layout-block-4">block 4</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-bottom">footer</td>
	</tr>
</table>

</body>
</html>

table.layout { border-collapse: collapse; }
table.layout tr td { vertical-align: top; padding: 0; }
table.layout tr td#layout-top { width: 960px; height: 110px; background: yellow; }
table.layout tr td#layout-nav { width: 960px; height: 50px; background: silver; }
table.layout tr td#layout-center { width: 960px; height: 280px; background: aqua; }
table.layout tr td#layout-block-1 { width: 240px; height: 180px; background: lime; }
table.layout tr td#layout-block-2 { width: 240px; height: 180px; background: silver; }
table.layout tr td#layout-block-3 { width: 240px; height: 180px; background: yellow; }
table.layout tr td#layout-block-4 { width: 240px; height: 180px; background: teal; }
table.layout tr td#layout-bottom { width: 960px; height: 80px; background: gray; }

Step 3: Add content in each field using HTML

<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Web 2.0 Corp</title>

	<link rel="stylesheet" type="text/css" href="css/main.css" />	

</head>

<body>

<div id="main">

<table class="layout">
	<tr>
		<td colspan="4" id="layout-top">
			<div id="logo">
				<p><a href="index.html">Web 2.0 Corporation</a></p>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-nav">
			<div id="nav">
				<ul>
					<li><a href="products.html">Products</a></li>
					<li><a href="solutions.html">Solutions</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="downloads.html">Downloads</a></li>
					<li><a href="about.html">About</a></li>
				</ul>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-center">
			<div id="banner">
				<h1>Connecting People with Really Big Machines</h1>
			</div>
		</td>
	</tr>
	<tr>
		<td id="layout-block-1">
			<div class="tease">
				<h2>Products</h2>
				<p>Our products are getting better and better each year:</p>
				<ul>
					<li><a href="biggonomax-basic.html">Biggonomax Basic</a></li>
					<li><a href="biggonomax-plus.html">Biggonomax Plus</a></li>
					<li><a href="biggonomax-supreme.html">Biggonomax Supreme</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-2">
			<div class="tease">
				<h2>Services</h2>
				<p>We provide scalable solutions that enhance human-scale networks maximizing your potential in the cloud. All with really big machines.</p>
				<ul>
					<li><a href="services.html">Maximize your ROI</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-3">
			<div class="tease">
				<h2>News</h2>
				<p>We're really thinking out of the box on this one... Now, in the works, Biggonomax Enterprise Edition.</p>
				<ul>
					<li><a href="blog.html">Read more</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-4">
			<div class="form">
				<h2>Sign up for Emails</h2>
				<form>
					<p>Email Address:</p>
					<p><input type="text" name="email" value="" id="email"/></p>
					<p><input type="submit" name="signup" value="Sign Up" id="signup"/></p>
				</form>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-bottom">
			<div id="footer">
				<ul>
					<li><a href="products.html">Products</a></li>
					<li><a href="solutions.html">Solutions</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="downloads.html">Downloads</a></li>
					<li><a href="about.html">About</a></li>
				</ul>
				<p>&copy; 2009 Web 2.0 Corporation. All rights reserved.</p>
			</div>
		</td>
	</tr>
</table>

</div>

</body>
</html>

A couple notes:

We added a div with id main around the table to give us more options in positioning the overall layout.
We used both id and class for out divs. If it's something we'll only use one, we try to stick with id.
The navigation items are listed as an unordered list. We'll do some fancy CSS to make it work later. The older way to do it is with images.
The form code is placeholder.

Now that we're done with adding the HTML content, we won't really need to touch it again. All the styling will be done with CSS.

Step 4: Style the content using CSS

First let's make our background grey and center our content. We can use the body tag and our main#div.

The div should be the same width as the table or else it will expand to the width of the page.

body { background: #dddddd; margin: 0; }
div#main { background: #ffffff; width: 960px; margin: 0 auto 0 auto; }

Next let's make the text look prettier. We can set a default font style with the body.

body { background: #dddddd; margin: 0; font: 12px/17px Helvetica, sans-serif; color: #444444; }

Let's make the links look prettier with pseudo-classes link, visited, hover, and active. Note that they must written in this order to be effective.

a:link { color: #336699; }
a:visited { color: #336699; }
a:hover { color: #003366; }
a:active { color: #336699; }

Now, we can create styles for the divs with the class "tease".

div.tease { }
div.tease h2 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #7ca81e; }
div.tease p { margin: 0 0 5px 0; }
div.tease ul { padding: 0 0 0 20px; margin: 0;}
div.tease ul li { list-style-image: url(../images/arrow.gif); font-weight: bold;}

We can add the blue line on the left and work on some white space around it.

div.tease { width: 219px; height: 165px; border-left: solid 1px #29abe2; padding: 5px 0 0 10px; margin: 0 10px 10px 0;}
div.tease h2 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #7ca81e; }
div.tease p { margin: 0 0 5px 0; }
div.tease ul { padding: 0 0 0 20px; margin: 0;}
div.tease ul li { list-style-image: url(../images/arrow.gif); font-weight: bold;}

We can now style the email form in the same way. But this time the color of the box and spacing is different. We'll have to change some text colors too.

div.form { width: 220px; height: 165px; padding: 5px 0 0 10px; margin: 0 10px 10px 0; background: #29abe2;}
div.form form { margin: 0; }
div.form h2 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #222222; }
div.form p { margin: 0 0 5px 0; color: #ffffff;}

Let's use a background image on the right most block to make it fancier. Let's add a subtle gradient background image.

div.form { width: 220px; height: 165px; padding: 5px 0 0 10px; margin: 0 10px 10px 0; background: #29abe2 url(../images/bg_signup.gif) no-repeat;}

We can make the logo on the top an image also, then force the text to disappear.

div#logo { width: 250px; height: 0; padding-top: 75px; margin: 0; line-height: 75px; overflow: hidden; background: url(../images/logo.gif) no-repeat; }

Now let's add the background banner.

div#banner { width: 930px; height: 250px; background: url(../images/banner_cern.jpg) no-repeat; margin: 0 10px 10px 0; padding: 10px; }

Next lets add the banner text, using the same CSS trick of text-image replacement that we did with the logo.

div#banner { width: 930px; height: 250px; background: url(../images/banner_cern.jpg) no-repeat; margin: 0 10px 10px 0; padding: 10px; }
div#banner h1 { height: 0; width: 350px; padding-top: 250px; margin: 0; line-height: 250px; overflow: hidden; background: url('../images/ttl_banner.gif') no-repeat; }

Let's style the footer, by making the li run horizontally. (In IE6 the horizontal bars don't appear.)

div#footer ul { margin: 10px; padding: 0;}
div#footer ul li { display:inline; margin-right: 6px; text-indent:0; }
div#footer ul li + li { border-left: 1px solid #666666; }
div#footer ul li + li a { margin-left: 8px; }

We can also add some padding to the copyright line.

div#footer p { margin: 10px; }
div#footer ul { margin: 10px; padding: 0;}
div#footer ul li { display:inline; margin-right: 6px; text-indent:0; }
div#footer ul li + li { border-left: 1px solid #666666; }
div#footer ul li + li a { margin-left: 8px; }

Now let's add the rule on top.

div#footer { border-top: solid 4px #7ca81e; margin: 0 10px 0 0;}
div#footer p { margin: 10px; }
div#footer ul { margin: 10px; padding: 0; }
div#footer ul li { display:inline; margin-right: 6px; text-indent:0; }
div#footer ul li + li { border-left: 1px solid #666666; }
div#footer ul li + li a { margin-left: 8px; }

Lastly we'll add the navigation bar on the top.

We can style the nav by using image-text replacement trick and shifting the background position with the pseudo-classes.

We need a graphic that looks like this, where the first row is the unselected look, the second is for the hover pseudo-class, the third is for the active pseudo-class, the fourth is the selected state.

Nav Bar

First we need to add some more ids in the HTML to identify each item.

<div id="nav">
	<ul>
		<li id="nav-products"><a href="products.html">Products</a></li>
		<li id="nav-solutions"><a href="solutions.html">Solutions</a></li>
		<li id="nav-support"><a href="support.html">Support</a></li>
		<li id="nav-downloads"><a href="downloads.html">Downloads</a></li>
		<li id="nav-about"><a href="about.html">About</a></li>
	</ul>
</div>

And style each element by using image-text replacement along with pseudo classes.

div#nav ul { margin: 0; padding: 0; height: 40px; background: url(../images/nav_bar.gif) no-repeat;}
div#nav ul li { display: inline; }
div#nav ul li a { float: left; width: 100px; height: 0; padding-top: 40px; overflow: hidden; background-image: url(../images/nav_bar.gif); }

div#nav ul li#nav-products a { width: 135px; background-position: 0 0; }
div#nav ul li#nav-solutions a { width: 135px; background-position: -135px 0; }
div#nav ul li#nav-support a { width: 115px; background-position: -270px 0; }
div#nav ul li#nav-downloads a { width: 138px; background-position: -385px 0; }
div#nav ul li#nav-about a { width: 94px; background-position: -523px 0; }

div#nav ul li#nav-products a:hover { width: 135px; background-position: 0 -40px; }
div#nav ul li#nav-solutions a:hover { width: 135px; background-position: -135px -40px; }
div#nav ul li#nav-support a:hover { width: 115px; background-position: -270px -40px; }
div#nav ul li#nav-downloads a:hover { width: 138px; background-position: -385px -40px; }
div#nav ul li#nav-about a:hover { width: 94px; background-position: -523px -40px; }

div#nav ul li#nav-products a:active { width: 135px; background-position: 0 -80px; }
div#nav ul li#nav-solutions a:active { width: 135px; background-position: -135px -80px; }
div#nav ul li#nav-support a:active { width: 115px; background-position: -270px -80px; }
div#nav ul li#nav-downloads a:active { width: 138px; background-position: -385px -80px; }
div#nav ul li#nav-about a:active { width: 94px; background-position: -523px -80px; }

div#nav ul li#nav-products.selected a { width: 135px; background-position: 0 -120px; }
div#nav ul li#nav-solutions.selected a { width: 135px; background-position: -135px -120px; }
div#nav ul li#nav-support.selected a { width: 115px; background-position: -270px -120px; }
div#nav ul li#nav-downloads.selected a { width: 138px; background-position: -385px -120px; }
div#nav ul li#nav-about.selected a { width: 94px; background-position: -523px -120px; }

Now let's clean it up.

We can get rid of all the temporary background colors.

table.layout { border-collapse: collapse; }
table.layout tr td { vertical-align: top; padding: 0; }
table.layout tr td#layout-top { width: 960px; height: 110px; }
table.layout tr td#layout-nav { width: 960px; height: 50px; }
table.layout tr td#layout-center { width: 960px; height: 280px; }
table.layout tr td#layout-block-1 { width: 240px; height: 180px; }
table.layout tr td#layout-block-2 { width: 240px; height: 180px; }
table.layout tr td#layout-block-3 { width: 240px; height: 180px; }
table.layout tr td#layout-block-4 { width: 240px; height: 180px; }
table.layout tr td#layout-bottom { width: 960px; height: 80px; }

And lastly let's add some white padding on the left to balance it out.

div#main { background: #ffffff; width: 960px; margin: 0 auto 0 auto; padding: 0 0 0 10px; }

Final

View the final page

<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Web 2.0 Corp</title>

	<link rel="stylesheet" type="text/css" href="css/main.css" />	

</head>

<body>

<div id="main">

<table class="layout">
	<tr>
		<td colspan="4" id="layout-top">
			<div id="logo">
				<p><a href="index.html">Web 2.0 Corporation</a></p>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-nav">
			<div id="nav">
				<ul>
					<li id="nav-products"><a href="products.html">Products</a></li>
					<li id="nav-solutions"><a href="solutions.html">Solutions</a></li>
					<li id="nav-support"><a href="support.html">Support</a></li>
					<li id="nav-downloads"><a href="downloads.html">Downloads</a></li>
					<li id="nav-about"><a href="about.html">About</a></li>
				</ul>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-center">
			<div id="banner">
				<h1>Connecting People with Really Big Machines</h1>
			</div>
		</td>
	</tr>
	<tr>
		<td id="layout-block-1">
			<div class="tease">
				<h2>Products</h2>
				<p>Our products are getting better and better each year:</p>
				<ul>
					<li><a href="biggonomax-basic.html">Biggonomax Basic</a></li>
					<li><a href="biggonomax-plus.html">Biggonomax Plus</a></li>
					<li><a href="biggonomax-supreme.html">Biggonomax Supreme</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-2">
			<div class="tease">
				<h2>Services</h2>
				<p>We provide scalable solutions that enhance human-scale networks maximizing your potential in the cloud. All with really big machines.</p>
				<ul>
					<li><a href="services.html">Maximize your ROI</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-3">
			<div class="tease">
				<h2>News</h2>
				<p>We're really thinking out of the box on this one... Now, in the works, Biggonomax Enterprise Edition.</p>
				<ul>
					<li><a href="blog.html">Read more</a></li>
				</ul>
			</div>
		</td>
		<td id="layout-block-4">
			<div class="form">
				<h2>Sign up for Emails</h2>
				<form>
					<p>Email Address:</p>
					<p><input type="text" name="email" value="" id="email"/></p>
					<p><input type="submit" name="signup" value="Sign Up" id="signup"/></p>
				</form>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="4" id="layout-bottom">
			<div id="footer">
				<ul>
					<li><a href="products.html">Products</a></li>
					<li><a href="solutions.html">Solutions</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="downloads.html">Downloads</a></li>
					<li><a href="about.html">About</a></li>
				</ul>
				<p>&copy; 2009 Web 2.0 Corporation. All rights reserved.</p>
			</div>
		</td>
	</tr>
</table>

</div>

</body>
</html>

/* defaults */
body { background: #dddddd; margin: 0; font: 12px/17px Helvetica, sans-serif; color: #444444; }
a:link { color: #336699; }
a:visited { color: #336699; }
a:hover { color: #003366; }
a:active { color: #336699; }

/* layout */
table.layout { border-collapse: collapse; }
table.layout tr td { vertical-align: top; padding: 0; }
table.layout tr td#layout-top { width: 960px; height: 110px; }
table.layout tr td#layout-nav { width: 960px; height: 50px; }
table.layout tr td#layout-center { width: 960px; height: 280px; }
table.layout tr td#layout-block-1 { width: 240px; height: 180px; }
table.layout tr td#layout-block-2 { width: 240px; height: 180px; }
table.layout tr td#layout-block-3 { width: 240px; height: 180px; }
table.layout tr td#layout-block-4 { width: 240px; height: 180px; }
table.layout tr td#layout-bottom { width: 960px; height: 80px; }

/* center */
div#main { background: #ffffff; width: 960px; margin: 0 auto 0 auto; padding: 0 0 0 10px; }

/* content */
div#logo { width: 250px; height: 0; padding-top: 75px; margin: 0; line-height: 75px; overflow: hidden; background: url(../images/logo.gif) no-repeat; }

div#nav ul { margin: 0; padding: 0; height: 40px; background: url(../images/nav_bar.gif) no-repeat;}
div#nav ul li { display: inline; }
div#nav ul li a { float: left; width: 100px; height: 0; padding-top: 40px; overflow: hidden; background-image: url(../images/nav_bar.gif); }

div#nav ul li#nav-products a { width: 135px; background-position: 0 0; }
div#nav ul li#nav-solutions a { width: 135px; background-position: -135px 0; }
div#nav ul li#nav-support a { width: 115px; background-position: -270px 0; }
div#nav ul li#nav-downloads a { width: 138px; background-position: -385px 0; }
div#nav ul li#nav-about a { width: 94px; background-position: -523px 0; }

div#nav ul li#nav-products a:hover { width: 135px; background-position: 0 -40px; }
div#nav ul li#nav-solutions a:hover { width: 135px; background-position: -135px -40px; }
div#nav ul li#nav-support a:hover { width: 115px; background-position: -270px -40px; }
div#nav ul li#nav-downloads a:hover { width: 138px; background-position: -385px -40px; }
div#nav ul li#nav-about a:hover { width: 94px; background-position: -523px -40px; }

div#nav ul li#nav-products a:active { width: 135px; background-position: 0 -80px; }
div#nav ul li#nav-solutions a:active { width: 135px; background-position: -135px -80px; }
div#nav ul li#nav-support a:active { width: 115px; background-position: -270px -80px; }
div#nav ul li#nav-downloads a:active { width: 138px; background-position: -385px -80px; }
div#nav ul li#nav-about a:active { width: 94px; background-position: -523px -80px; }

div#nav ul li#nav-products.selected a { width: 135px; background-position: 0 -120px; }
div#nav ul li#nav-solutions.selected a { width: 135px; background-position: -135px -120px; }
div#nav ul li#nav-support.selected a { width: 115px; background-position: -270px -120px; }
div#nav ul li#nav-downloads.selected a { width: 138px; background-position: -385px -120px; }
div#nav ul li#nav-about.selected a { width: 94px; background-position: -523px -120px; }

div#banner { width: 930px; height: 250px; background: url(../images/banner_cern.jpg) no-repeat; margin: 0 10px 10px 0; padding: 10px; }
div#banner h1 { height: 0; width: 350px; padding-top: 250px; margin: 0; line-height: 250px; overflow: hidden; background: url('../images/ttl_banner.gif') no-repeat; } 

div.tease { width: 219px; height: 165px; border-left: solid 1px #29abe2; padding: 5px 0 0 10px; margin: 0 10px 10px 0; }
div.tease h2 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #7ca81e; }
div.tease p { margin: 0 0 5px 0; }
div.tease ul { padding: 0 0 0 20px; margin: 0;}
div.tease ul li { list-style-image: url(../images/arrow.gif); font-weight: bold;}

div.form { width: 220px; height: 165px; padding: 5px 0 0 10px; margin: 0 10px 10px 0; background: #29abe2 url(../images/bg_signup.gif) no-repeat; }
div.form form { margin: 0; }
div.form h2 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #222222; }
div.form p { margin: 0 0 5px 0; color: #ffffff; }

div#footer { border-top: solid 4px #7ca81e; margin: 0 10px 0 0; }
div#footer p { margin: 10px; }
div#footer ul { margin: 10px; padding: 0;}
div#footer ul li { display:inline; margin-right: 6px; text-indent:0; }
div#footer ul li + li { border-left: 1px solid #666666; }
div#footer ul li + li a { margin-left: 8px; }