< - -Coding a DIV Layout - - >

I'm at university right now, sitting in the huge library computer suite, trying to kill the next five hours before my first lecture. As this is something I've been meaning to do for a while now, I've decided to spend a few hours walking you through the coding of a DIV layout.

You must have at least a basic knowledge of HTML.

Microsoft Notebook in order to manipulate your code.

A banner image, preferably designed by yourself (we don't want any copyright issues here).

I'd appreciate a link back from your (hopefully div-layouted) site.

A DIV layout refers to a certain type of either HTML and/or CSS code that overlays an existing website template. Think of a DIV layout as a sort of tablecloth that goes over your original site pages. A DIV itself is a portion of code, it can be a box of text, an image or a title that is specifically positioned on your site using a pixel measurement. The code is contained with <div> and </div> tags.

DIV layouts have something called DIV classes or DIV ID's. These are used as a sort of reference back within a code as they will specify something (your text type, background image etc) that you need not type out all over again. For example, if I had a DIV class like this one:

.h1{

width: 410px;
height: 10px;
font: bold 9px smallfonts;
font-weight: bold;
font-size:9px;}

in which 'h1' represents my 'header' for my website; I can use a shortcut tag like this:

<DIV class="h1"> This is my header  </div>

which will automatically give my header text the properties I have specified in the h1 class.

This is an extremely useful trick that layout designers use. You should familiarise yourself with this concept as we'll be seeing DIV classes within the code I am going to show you.

The first part of our Xanga DIV overlay code specifies what your website is called, what banner image you will use and the alignment of it.

When naming your website, it is important that you leave the two quote symbols ' ' either side of your site name and make sure you do not use these mid way through (for example, you can't have plurals as your site name so 'Sarah's Xanga' won't work).

Next you will specify the positioning of your banner image. You can have a <div align="left"> a <div align="center"> or a <div align="right"> website. This will move your entire site to the left, center or right. Be aware that the 'center' alignment tag will only work properly on Internet Explorer and is not Firefox friendly. I'm working on this.

You can change how far away your banner image is from the top and sides of your screen by specifying a pixel difference. For example, in this code I will give you a margin-top: -20px; which shifts your page up by 20 pixels. A minus number will move your image up and a positive number will move your image down.

The same sort of thing goes for your margin-left and margin-right properties. A positive number will move your site away from the margin and a negative will move it towards it. You'll need to understand this in order to position your modules later on.  

Assuming you have a ready banner image, you must direct link to this in your code. That means uploading your image to a server such as imageshack.us and copying the direct link you recieve.

So all this gives us:

Still with me? Good. Now we move on to your background image. You might be wondering why we refer to this as a repeating background image. Well, it repeats itself, obviously. You can tell this image how to repeat - will it repeat on one axis only, will it start from the top, will it be left aligned? etc. The useful thing about repeating images is that nomatter how long your blog entries are, or how stretched your page is, your repeating background will copy itself to match.

Your repeating image can just be a block of color, but with a DIV layout it is usual for a designer to choose to 'crop' his banner image and use the very bottom of it as a repeating background. I will give you an example of this:

This is my main banner image: Clicky.

And this is my repeating background which I have cropped: Clicky.

See how cool that is? Just remember to align your background image to be the same as your banner. Either left, center or right aligned.

So now we're onto text. This is, as with all site specifications, entirely up to you to choose which font family to use. I personally find that Verdana gives the clearest text; but you can choose Georgia, Small Fonts, Times New Roman and a whole load of other defaults. It's best to stick with the Windows Defaults - find them all here - as other systems may not recognise or have correct software to interpret anything custom or fancy.

You are also given options on what your bold, italic and underlined text will be like too; as well as how your links will look.

So this gives us:

Modules are basically just those little boxes of text or links that go straight down the side of a site. Most sites have them, as they're used for storing personal information, navigation links, music etc.

Here we go back to the idea of DIV Classes. The following are the module and module header classes:

Right, now listen closely. Blog width is something that you'll have to check not once, not twice but three times within your code. Each width must be the same or your blog will not be the right size. The first pixel width you need to check is that of your DATES. The width for this one can be found in the div.blogheader class (look for the hint - 'Edits The Dates On Your Blog Entries').

The second is in the example below, in your table.blogbody ('Defines Blog Width')

The last can be found at the very end of our coding ('Edits Your Blog')

You'll also need to position your modules. This is using the pixel distance idea I told you about earlier.

So all that gives us:

Nearly there! This last little bit of code shows you how all the div classes play a role when you put whatever you want into your modules. The only thing to watch here is making sure you have the right number of end </div> tags to the right number of <div class="whatever"> tags. If you don't, your modules will either go off and play somewhere to the extreme of your screen, hide your blog or disappear entirely.

The last div class is your blog itself. This does not need a </div> tag as your blog entries are the content located within your div class. If you closed the div, your blog entries wouldn't show!

So this is your module content script:

You can find the entire dummy test code here.

Confused? I check this site every evening so leave me a message if you need help. However, I will not help people out with everything; please limit queries to specific fields.

S. Majere x