Comment/Tagboard

Resources

100x100 Avatars Trans. PNGS Wallpapers

Layouts

Layout Index Div Layouts Table Layouts

Tutorials

Photoshop Articles Misc

Affiliates

Memory P H O N Y U Divine Designs Cinematic Parade Tenshi-Ai Designs The Forgottten Lair Towairaito Graphics Apply? (eh) Stats/Info. Link Exchange

Other Links

Do Not Copy Who Links Fight Spam!

Coding a Div Layout

Div layouts are the most simpliest form of layouts because of the small amounts of coding that it is involved. Basically a div layout is comebined with small simple parts:

- a main image (usually on the top), and a background (for the content).
- alignments (content, navigation, etc).

For this tutorial, I will be using our premade div layout Seisatsu.

Designing the images

Say you've already finished your top main image, does it contain the following points? Note the top image for the example.

- theres room for both navigation and content. The blocks are visible, non-blurred, non-complexed patterns on it.
- the ending of the layout is visible. Note the faded blur at the bottom of the example.
- The side(right) should have a border or faded. Unless you want your image to end there, your choice. But always leave empty space on the side so it doesn't look cut off.

Now for the background. Using your main image piece, using the marquee tool select at maybe 5pixels height and 100% of the width off the bottom of your layout, that's pure 'background'. Copy that, creat a new file, and save it as background.jpg. Remember if you take even little bit from the main image itself(brushes, main image colours, etc), your webpage will look funny. Note the background from the example here.

Adding it in

First, let's start off with the simple structure of the common website.

<html>
<head>
<title> Website Name </title>
</head>
<body>
</body>
</html>

Now lets add in the background. In your <body> tag, add in background="background.jpg". For the moment it will repeat horizontally, and it looks incredibly awkward and terrible. x__X However that can be easily overcome with the power of CSS!

CSS Stylesheet
Add this after <body>:
   <style>
    body { font-family: verdana, arial, tahoma; font-size: 11px; color: #color; background-repeat: repeat-y; }
   </style>

So what happens? The background-repeat: repeat-y makes the background repeat only vertically and you need to replace the colors of body, which is the text colours and such. If you have a css.css file, just stuff that code in it and edit/add however you like.

Just stuff this after your <body> tag.

<div style="position: absolute; top: 0px; left: 0px; width: #px; height: #px">
<img src="image.jpg">
</div>

The alignments of top and left has to be 0px (which means your image will be placed on the top left corner of your page), or else it won't be aligned to your background. Change width and height to your main image's size properties.

The next div tags (for your content and navigation) are similar to the above tags, except a wee different.

<div style="position: absolute; left: 215px; width: 500px; top: 217px;">
...WAH BLAM!
</div>

Left: The more pixels you add in, the more further away it is from the left.
Top: The more pixels you add in, the more lower it will be from the top.
Width: How long it will be until your text has to wrap up.

Say the above code is your content space, now you need another one for your navigation. So just copy and paste the entire thing under it and change the alignments.

So your entire file should look like this:

<html>
<head>
<title> Website Name </title>
</head>
<body background="background.jpg">
<style>
body { font-family: verdana, arial, tahoma; font-size: 11px; color: #color; background-repeat: repeat-y; }
</style>
<div style="position: absolute; top: 0px; left: 0px; width: xxxpx; height: xxx">
<img src="image.jpg">
</div>
<div style="position: absolute; left: 215px; width: 500px; top:217px;">
...WAH BLAM!
</div>
<div style="position: absolute; left: 14px; width: 186px; top:239px;">
...Navi Mavi
</div>
</body>
</html>

Conclusion

Aligning the text means fitting it in the boxes that you made in your main image, the content and navigation boxes - so that it looks like it actually is in the boxes itself. I can't explain. xD

Does this help? Even a little? =D Explained it pretty vague and bad, but going over how to do the main layout itself, how to find alignments, all that takes a brilliant amount of time.