Div Layout Tutorial 001

Here you will learn the basic coding to make a Div layout.

Here I will give you the basic coding for an html div layers layout, you can add more to this.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”> <—— This is very important, it identifies what type of html your using so it can be displayed the right way in browsers. Also it must be at the top of every page!

<html>
<head><title>TITLE HERE</title>

<h2>Header</h2>

</div>

<h1> About This Layout </h1>

Content Here!

<b>Bold</b> | <u>Underline</u> | <i>Italics</i> | <a href=”///”>Link</a>

<textarea>
SELECT
INPUT
TEXTAREA
</textarea>

<blockquote>
“This is a blockquote. I’m expanding the way I do my layouts hope you like it!
You can use this anyway you want.”
</blockquote>

</div>

</div>
</div>
</body>
</html>

Now a layout has many elements. But here I gave you the few that most people use.

Blockquote
Textarea
Bold
Underline
Italics
Links
Navigation
Headers

Also remember each opening must have a closing.

Open: <div> Closed: </div>

You can change the way they look in your CSS.

body, html {
padding: 0px;
margin: 0px;
color: #ffffff;
font-size: 11px;
font-family: arial;
}

body {
background: #000000 url(/image_bg.jpg) top left repeat-x;
}

div#banner {
background-image: url(/image_01.jpg);
height: ##px;
margin-top: 0px;
width: ##px;
margin: 0px auto;
position: relative;
}

#content
{position: absolute;
width: ##px;
top: ##px;
left: ##px;
}

#navigation
{position: absolute;
width: ##px;
top: ##px;
left: ##px;
}

B {COLOR: #000000;}
U {COLOR: #000000;}
I {COLOR: #000000;
}

#display
{font-family: arial;
font-size: ##px;
color: #ffffff;
}

h1
{font: normal ##px arial;
color: #fff;
}

h2
{font: normal ##px arial;
color: #fff;

}

input, textarea, select
{font-family:arial;
font-size: ##pt;
}

blockquote {font : ##px arial;
color:#000000;
}

A {text-decoration:none; cursor:crosshair;}
A:link {text-decoration: none; color:#000000;}
A:visited {text-decoration: none; color:#000000;}
A:hover {text-decoration:underline; color:#000000;
}

.nav:link, .nav:visited, .nav:active
{font: ##px arial;
color: #000000;
}

.nav:hover
{font: ##px arial;
}

The background has a repeat which is what you would use if you followed the Photoshop Layout 001 tutorial.
You will replace “##” with numbers. Such as the size of the image or the size of the font.
All #000000 is black you can switch it to the color you want.

Now this piece of code is for a centered layout. If you would like it right set go into the CSS and change:
margin: 0px auto; into margin: 0 0 0 auto;
For left set change:
margin: 0px auto; into margin: 0 0 auto;

Welcome

Search

Content

Shout Box

Quick Links

Div Layout Tutorial 001

The Flamboyant

Affiliates