Unloveme.org

This is a tutorial on coding Basic website layouts for freewebs and what-not. If you need help on something, just use one of the forms on the site.

For this tutorial, I will be using this template: Click to get!

001.
First thing we need is the coding for the image, for this template, I want it in the top left corner. This is the code I will be using:

<div id=layer1 style=”position:absolute; top:0; left:0″> <img src=INSERT IMAGE URL HERE></div>

right now that should be your only coding on the page.

002.
Next we need to code the sidebar. To do this the easy way, please go here: Click!

You should have been directed to an image mapping site. But don’t fret, it’s part of the tutorial.

003.
Where it says “adress of gif or jpg image”, insert (copy & paste) your image URL, then press submit:

You should now be directed to a page with your image on it. Don’t click anything on the page or you will get confused.

004.
Go back to the page and click on the corner of where you want the text to be.

If you’re still using my template, this is the code that will appear on the bottom of your image:

005.
You need to figure out the width of the blog. In my webtemplate, the width would be 170.

Now here’s the key:
x= left
y= top

This is the code for the sidebar:

<div style=”position:absolute; left:ENTER-X; top:ENTER-Y; width:INSERT-WIDTH; cursor: default”> YOUR SIDEBAR TEXT-HERE!
</div>

This should be the code for your layout so far:

<div id=layer1 style=”position:absolute; top:0; left:0″> <img src=INSERT IMAGE URL HERE></div>

<div style=”position:absolute; left:ENTER-X; top:ENTER-Y; width:INSERT-WIDTH; cursor: default”>
YOUR SIDEBAR TEXT-HERE!
</div>

006.
Now for the blog part, repeat steps 4-5. This should be your complete layout code:

<div id=layer1 style=”position:absolute; top:0; left:0″> <img src=INSERT IMAGE URL HERE>

<!—– Sidebar Coding —–>

<div style=”position:absolute; left:ENTER-X; top:ENTER-Y; width:INSERT-WIDTH; cursor: default”>
YOUR SIDEBAR TEXT HERE!
</div>

<!—– Blog Coding —–>

<div style=”position:absolute; left:ENTER-X; top:ENTER-Y; width:INSERT-WIDTH; cursor: default”>
YOUR BLOG TEXT HERE!
</div>

<!—– Web Template from Unloveme.org —–>

Now all you have to do is add your own CSS!

That’s it! Simple right? If you have any questions, comment me on the blog with your question, e-mail me, or use one of the forms on the site.