Tableless xhtml/css valid- Young Entrepreneurs Making Money Online

Homepage Forum Interviews Rich List Blog Directory Creating Websites Make Money News Advertise Contact Us

Tableless xhtml/css valid
Learn how to code a template in Tableless xhtml/css valid!

Category: Coding
Views: 4253

Tableless xhtml/css valid

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.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

MASSIVE layout coding tutorial

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

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:

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

And this to your HTML (between body tags):

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

#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):

LINKLINKLINKLINKLINK 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:
#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 */}

Copyright YourCompany 2006

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

If you would like more help with this tutorial please register and visit the forum.

About Michael

Michael Dunlop personal statement

“But I am already older than 21”, I hear you cry. Don’t worry, despite the name, the information and advice is more geared towards retiring prior to having a fake hip installed.