Tableless xhtml/css valid

Retire at 21 · 12-10-2006, 12:42 PM

Welcome to this massive weblayout coding tutorial which will teach you how to code a template into a tableless xhtml/css valid weblayout that you can use for your website.

For this tutorial, I'm going to use this template:

First of all, we will have to slice our layout into seperate images with Adobe Photoshop. Open your layout (.PSD) and slice it as I did:

Remove plain text before slicing
Remember NOT to include the rectangular plain borders in your slices because we will add them with CSS so the layout loads faster. Make shure that you slice the same images only once and also see that, for the bottom bar, I only slice a tiny 1px width tile. I did that because we will repeat that image with CSS so, again, the page loads faster.

Tip: Name your slices, else it will be very hard to find the right image while coding.

Once you think you sliced everything as you want, go to File -> Save for web and set the settings to PNG-24 (for ALL slices). Then hit save and use following settings:

We're done slicing, now we can move on to the coding, open your favourite text editor and create a basic HTML page.

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"><head><title>MASSIVE layout coding tutorial</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="style.css" /></head><body></body></html>

Now we will have to make our basic CSS page, save it as STYLE.CSS

Code:

html, body{	background: #FFFFFF; /* background color */	text-align: center; /* center our layout */	font-family: Arial, Verdana, Helvetica, sans-serif; /* font */	font-size: small;	color: #666666;}a /* links */{	color: #333333;	text-decoration: none;}a:hover /* links hover */{	color: #666666;	text-decoration: underline;}a img{	margin: 0px; /* no whitespace	padding: 0px; /* idem */	border: 0px; /* no border around image links */}h1 /* heading 1 */{	font-size: large;	color: #2b4676;}h2 /* heading 2 */{	font-size: medium;	color: #2b4676;}

Now we have our basic HTML page and basic CSS stylesheet. We are now going to use a technique to center our entire layout. Add this to your CSS:

Code:

#container{	margin: auto;	width: 780px; /* size of our layout */}

And this to your HTML (between body tags):

Code:

<div id="container"><!-- layout comes here --></div>

Finally, we can start coding our real layout, I'm going to start with the top, banner and navigation bar.

Code:

#top{	height: 30px; /* top bar height */}#banner{	height: 60px; /* banner height */}#nav{	height: 34px; /* nav bar height */	float: left;	 font-weight: bold; /* bold */}#nav_1 /* button */{	width: 288px;	background: url(images/nav_1.png);	height: 34px;	float: left;}#nav_2 /* button */{	width: 70px;	background: url(images/nav_2.png);	height: 34px;	float: left;}#nav_3 /* button */{	width: 99px;	background: url(images/nav_3.png);	height: 34px;	float: left;}#nav_4 /* button */{	width: 103px;	background: url(images/nav_4.png);	height: 34px;	float: left;}#nav_5  /* button */{	width: 119px;	background: url(images/nav_5.png);	height: 34px;	float: left;}#nav_6 /* button */{	width: 87px;	background: url(images/nav_6.png);	height: 34px;	float: left;}#nav_7 /* button */ {	width: 14px;	background: url(images/nav_7.png);	height: 34px;	float: left;}

HTML (replace # with your links):

[code]<div id="top"> <img src="images/top_1.png" /><a href="#"><img src="images/top_2.png" /></a><a href="#"><img src="images/top_3.png" /></a><a href="#"><img src="images/top_4.png" /></a><a href="#"><img src="images/top_5.png" /></a></div><div id="banner"><a href="#"><img src="images/banner.png" /></a></div><div id="nav"><img src="images/nav_1.png" /><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span>[/i]

This is what you should have now:

And now the header is finished, we can code the content area. We will make 3 columns. CSS:

Code:

#left /* column */{	float: left;	width: 220px;}#middle /* column */{	float: left;	width: 350px;	text-align: left;}#right /* column */{	float: left;	width: 209px;}#header_left{	background: url(images/left_header.png); /* left header */	width: 220px;	height: 53px;}#header_right{	background: url(images/right_gradient.png) no-repeat; /* right header */	width: 209px;	height: 53px;}#box{	background: url(images/right_box.png); /* blue box */	width: 209px;	height: 156px;	color: #FFFFFF;	text-align: left;}#header{	background: url(images/right_header.png) no-repeat; /* list header */	width: 164px;	height: 24px;	padding-top: 1px; /* whitespace */}.list ul li /* list with arrows */{	list-style-image: url(images/arrow.png); /* arrow */}

HTML:

Code:

<div id="left"><div id="header_left"><br />HEADING</div><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p><p>Content Here</p><p><a href="#"><img src="images/left_readmore.png" /></a></p></div><div id="middle"><div><img src="images/middle_banner.png" /><!-- banner --></div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div id="right"><div id="header_right"><br />HEADING</div><div id="box"><!-- box -->Content Here</div><div id="header">CATEGORIES</div><div class="list"><ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></div></div><div>Copyright YourCompany 2006</div>

And your done, using the techniques you learned, you can add more things and code other templates.

Register @ Retire at 21 If you like this tutorial

craig · 02-02-2007, 08:43 AM

This is a photoshop tutorial more than a xhtml/css one.

You need to explain your code.

02-02-2007, 08:43 AM	#2 (permalink)
craig Status: Junior Member Join Date: Feb 2007 Posts: 13 Trader Rating: (0) TD$: 0.00 Donate	Re: Tableless xhtml/css valid This is a photoshop tutorial more than a xhtml/css one. You need to explain your code.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Beautiful xHTML/CSS Coded Arcade Template	Twadz	Design Offers & Requests	0	08-14-2007 12:05 AM
IMGSpec.com Upload Package - Really Unique - Design - Valid CSS/XHTML Coding - Domain	Twadz	Design Offers & Requests	1	08-04-2007 05:19 PM