Tutorials

There are 5 tutorials on each page with the most recent ones on top. I hope that they are a help to you.

Sort by:

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>

<link rel=”stylesheet” href=”/style.css” type=”text/css”>
</head><body>

<div id=”banner”>

<div id=”navigation”>

<h2>Header</h2>

<a href=”http:///” class=”nav”> Link </a>
<a href=”http:///” class=”nav”> Link </a>
<a href=”http:///” class=”nav”> Link </a>
<a href=”http:///” class=”nav”> Link </a>

</div>

<div id=”content”>

<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.
  1. Blockquote
  2. Textarea
  3. Bold
  4. Underline
  5. Italics
  6. Links
  7. Navigation
  8. 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;

  • No Comments

No Comments Yet

You can be the first to comment!

Leave a comment

The Flamboyant

Copyright © Nise 2015, All Rights Reserved.

Contact | Terms of Use | Home

The Flamboyant Top Sites

eXTReMe Tracker

Affiliates

affiliate affiliate affiliate affiliate affiliate affiliate affiliate affiliate
.In Depth | .Apply

Twitter