llamaoh got their homepage at Neopets.com

Introduction

Welcome guest. This tutorial will show you the basic steps in creating a DIV layout. It can be used for both petpages and offsite webpages. Spiffy, eh?

Requirements

Imade editing program, Basic understanding of HTML and CSS

Structure

When it comes to the images, a DIV layout consists of two parts - the header and the background. The header is the main image at the top of the layout. The background covers everything below the header image and continues to repeat vertically, depending on how much content your page has.

Image

When making the image, structure it so that there is a clear division between the header and the background.

Slicing

Separate the header and the background by creating two slices** along the division. Save the 'slices' as two separate files.

headerimage.jpg

backgroundimage.jpg

Coding

Copy and paste this code into your neopet's petpage

body{
background: url(backgroundimage.jpg) repeat #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-align: XXX;
text-transform: XXX;
overflow-x: hidden;}

b, strong{
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-transform: XXX;
font-weight: bold;}

i {
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-transform: XXX;
font-style: italics;}

u {
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-transform: XXX;
text-decoration: underline;}

a:link, a:active, a:visited{
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-transform: XXX;}

a:hover{
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-transform: XXX;}

h2{
background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-align: XXX;
text-transform: XXX;}

.sf {display:none;}
#rineo {position: absolute; top: 0px; left: 0px; }
</style />

<h2>Title</h2>
Text goes here.
You can put as many as you want.
Just copy and paste.
<b>Bold</b>
<i>Italics</i>
<u>Underline</u>
<a href="/~llamaoh">Link</a>

<h2>Credits</h2>
Coding help by <a href="http://www.neopets.com/~llamaoh">rineo</a>

Note: This code is merely a template of a simple DIV layout. If you want something move advanced, feel free to add your own elements to the stylesheet. (If you don't know your CSS, try reading this guide.)

I specified the XXX's for you to edit. Simply change the properties according to how you want your layout to turn out.

- - -

background: url(backgroundimage.jpg) repeat #XXX;

backgroundimage.jpg - replace with the background image's URL**
repeat - replace with either: repeat-y (vertically) or repeat (horizontally and vertically)
background - replace with the color: use the word (black) or its equivalent 6-digit hexcode (#000000)

background: #XXX;
font-family: XXX;
font-size: XXX;
color: #XXX;
text-align: XXX;
text-transform: XXX;

background - replace with the color: use the word (black) or its equivalent 6-digit hexcode (#000000)
font-family - replace with a font: arial, tahoma, verdana, etc.
font-size - replace with a number: use small fonts (10 to 12px) for the main text and larger fonts for titles (15 to 18px)
color - replace with the color: use the word (black) or its equivalent 6-digit hexcode (#000000)
text-align - replace with either: left, right, center, or justify
text-transform - replace with either: lowercase, UPPERCASE, or none

< img id="rineo" src="headerimage.jpg" >
< div style="position: absolute; top: XXXpx; left: XXXpx; width: XXXpx;" >

headerimage.jpg - replace with the header image's URL**
top - how far away you want the content to be from the top of the page
left - how far away you want the content to be from the left of the page
width - how wide you want the content to be

- - -

Preview ~ Save ~ and you're done !

Result

The petpage you see here was created using this tutorial (give or take a few CCS codes here and there.)

body{
background: url(http://i26.tinypic.com/e8nzgi.jpg) repeat;
font-family: arial;
font-size: 12px;
color: #000000;
text-align: left;
text-transform: none;
overflow-x: hidden;}

b, strong{
background: none;
font-family: arial;
font-size: 12px;
color: #84a67c;
text-align: left;
text-transform: none;}

i {
background: none;
font-family: arial;
font-size: 12px;
color: #62989c;
text-align: left;
text-transform: none;}

u {
background: none;
font-family: arial;
font-size: 12px;
color: #7da07c;
text-align: left;
text-transform: none;}

a:link, a:active, a:visited{
background: none;
font-family: arial;
font-size: 12px;
color: #84a67c;
text-align: left;
text-transform: none;
text-decoration: none;}

a:hover{
background: none;
font-family: arial;
font-size: 12px;
color: #a7e97a;
text-align: left;
text-transform: none;}

h2{
background: none;
font-family: arial;
font-size: 16px;
color: #2c7e6e;
text-align: left;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 1px dashed #dfe4d1;}

.sf {display:none;}
#rineo {position: absolute; top: 0px; left: 0px; }
</style />

<h2>Title</h2>
Text goes here.
You can put as many as you want.
Just copy and paste.
<b>Bold</b>
<i>Italics</i>
<u>Underline</u>
<a href="/~llamaoh">Link</a>

<h2>Credits</h2>
<a href="/~llamaoh"><img src="http://i30.tinypic.com/w7lqvr.gif" border="0"></a>
<br>
Designed and coded by <a href="http://www.neopets.com/~llamaoh">rineo</a>

*Slices

ie. In Photoshop, use the Slice Tool (K)

back to slicing

*Uploading

Suggestions: tinypic, imageshack, photobucket or other image hosting sites.
After uploading the images onto their site, copy and paste the image's link/URL onto your layout.

back to coding

FAQ / Contact

Q. Can I use the code you provided?
A. Yes, feel free to use and edit the codes however you want.

Q. Do I have to give credit?
A. Yes.

Q. How do I give credit?
A. I'm not picky, so long as you give proper credit where it is due. A text or button linking back would suffice. (:

Q. Can I take your _______ for my own?
A. No. Stealing is theft and reportable.

- - -

Neomail if you wish to contact me. Feedback is welcomed.

Link Back

Thanks for reading. Link back using any of these buttons.

Helpful Links

Exchange links?

Credits

Content and layout by Kat (rineo).

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions

	<a href="/~llamaoh"><img src="http://i27.tinypic.com/2di1too.gif" border="0"></a>
	<a href="/~llamaoh"><img src="http://i30.tinypic.com/w7lqvr.gif" border="0"></a>