Divider Layouts

Div layer or Divider layouts are very easy to use once you're familiar with the div tags. The one thing you must remember in Div layouts is to never try and center it as it will always look wrong to other people who might have a different screen resolution to you. Always keep it to the left, or if you're an HTML wiz, the right.

Here's a basic div layer code:

<div style="position:absolute; top:##; left:##; width:##;"> Top means how far up you want it to be displayed, the smaller the number, the further up it will move. Left shows how much to the left you want it, the smaller the number, the further left it will move. Width is the width of your blog, you'll need to proportion it to the background you have made.

You can put height in with the code but it is not advised as it can distort your blog if too much content is written.

A Div layout always depends on the background the layout has been proportioned to. If you change the background, you'll have to change the blog positioning of your div tags. The background should just be a small image, extremely thin but very wide to accommodate most screen resolutions. One has been made for you to save onto your computer (right click and choose 'Save picture as...').

Don't worry, it will be bigger when you save it, and it will be more clear. That goes for all the images here.

The top image is also very important as well, but it also depends on the background you have made. It has to be in line with the background otherwise it will become out of place. One has been premade for you, the gray rectangle is for you to change into whatever images you see fit.

And as most div layouts look better with a spacer in between paragraphs and links, one has been supplied for you to use.

All in all, the div layout will now look like this:

<html>
<head>
<title>Title Here</title>
<style>
body {scrollbar-base-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #484848; scrollbar-darkshadow-color: #959899; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #959899; overflow-x: hidden; background: url('divbg.gif');}
a {text-decoration: none; color: #666666; cursor: crosshair;}
a:hover {text-decoration: underline overline; color: #959899; cursor: crosshair;} 
p {color: #000000; font-family: tahoma; font-size: 11px; text-align: justify;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
.header {font-family: Arial; font-weight: bold; font-size: 11px; color: #000000; background: url('divspace.gif'); height: 20px; text-align: right}
</style>
</head>

<div style="position:absolute; top:480; left:80; width:345;">
<p class="header">Divider Layout</p>
<p>
A Div layer layout is extremely easy to use, and can very easily be changed into a Div and Frame layout to make it easier for the webmaster to update.
<p>
Don't even think about removing the credits section or changing my site's name to your own because I made this layout and you better appreciate it. End of story.

<p class="header">The coding</p>
<p>
It's very easy to change the coding to your whim, feel free to experiment. If you get stuck, just copy the code again and see where you went wrong. You can email the staff if you have any queries.
</p>

<div style="position:absolute; top:20; left:488; width:149;">
<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>

<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>

<p class="header">Credits</p>

<p>
Site Content by You<br>
Layout code by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
</p>

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

Do not remove our credit! We are extremely generous to provide you with this template, the least you could do is to give credit where credit is due. Thieves will not be tolerated.

So basically, just copy the code and experiment with it and you'll be well on your way to becoming an expert webmaster.

Note: You are NOT allowed to use this code to make a layout and then re-distribute it. That is taken as theft and is against our terms of use.

~Jen