llamaoh got their homepage at Neopets.com

.content and layout by rineo {neopets.com/~llamaoh} .no stealing {theft will get you reported} 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; } blockquote { background: none; font-family: arial; font-size: 12px; color: #3f5a59; border: 3px solid #dfe4d1; padding: 10px;} TEXTAREA { background: none; font-family: arial; font-size: 12px; color: #3f5a59; border: 2px solid #bec1ae; padding: 5px; overflow-x:hidden;} TEXTAREA.button { background: none; font-family: arial; font-size: 12px; color: #3f5a59; width: 100px; height: 31px; border: 2px solid #bec1ae; padding: 5px; overflow-x:hidden;} .counter{background-image:url()} />

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;}

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

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

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

.links {}
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;}

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

.do not edit {}
.sf {display:none;}
#rineo {position: absolute; top: 0px; left: 0px; }
/>

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

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

<br><i>Note</i>: This code is merely a template of a simple DIV layout. If you want something more advanced, feel free to add your own elements to the stylesheet. (If you don't know your CSS, try reading <a href="/~Llyxiana_xx">this</a> guide.)

<p>

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

</p>
<p align="center"> - - - </p>

<blockquote>background: url(backgroundimage.jpg) repeat #XXX;</blockquote>
<b>backgroundimage.jpg</b> - replace with the background image's URL<a href="#upload">**</a>
<br><b>repeat</b> - replace with either: repeat-y (vertically) or repeat (horizontally and vertically)
<br><b>background</b> - replace with the color: use the word (black) or  its equivalent 6-digit hexcode (#000000)

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

</p>
<blockquote>
<br>
</blockquote>
<b>headerimage.jpg</b> - replace with the header image's URL<a href="#upload">**</a>
<br><b>top</b> - how far away you want the content to be from the top of the page
<br><b>left</b> - how far away you want the content to be from the left of the page
<br><b>width</b> - how wide you want the content to be

Preview ~ Save ~ and you're done !

<h2>Result</h2>
The petpage you see here was created using this tutorial (give or take a few CSS codes here and there.)

<center><textarea cols="105" rows="3"><style></style>
.content and layout by rineo {neopets.com/~llamaoh}
.no stealing {theft will get you reported}

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;}

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

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

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

.links {}
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;}

.titles {}
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;}

.do not edit {}
.sf {display:none;}
#rineo {position: absolute; top: 0px; left: 0px; }
/>

<h2>Title</h2>
Text goes here.
You can put as many as you want.
Just copy and paste.
<b>Bold</b>
<i>Italics</i>
Underline
<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>

<a name="slices"></a>
<h2>*Slices</h2>
ie. In <b>Photoshop</b>, use the Slice Tool (K) <img src="http://i36.tinypic.com/w7eq0l.jpg"><p align="center"><img src="http://i33.tinypic.com/2ijn8mx.jpg"></p>

<p align="right"><a href="#slicing">back to slicing</a></p>

<a name="upload"></a>
<h2>*Uploading</h2> 
<b>Suggestions</b>: tinypic, imageshack, photobucket or other image hosting sites.
<br>
After uploading the images onto their site, copy and paste the image's link/URL onto your layout.

<p align="right"><a href="#coding">back to coding</a></p>

<h2>FAQ / Contact</h2>
Q. Can I use the code you provided?
<br>
A. Yes, feel free to use and edit the <a href="#coding">codes</a> however you want.
<p>
Q. Do I have to give credit?
<br>
A. <b>Yes</b>.
</p>
<p>
Q. How do I give credit?
<br>
A. I'm not picky, so long as you give proper credit where it is due. A text or button linking back would suffice. (:
</p>
<p>
Q. Can I take your _______ for my own?
<br>
A. No. <a href="http://www.neopets.com/~xxgreyfultearz">Stealing is theft</a> and reportable.

</p>
<p align="center"> - - - </p>
Neomail if you wish to <a href="/neomessages.phtml?type=send&recipient=rineo">contact</a> me. Feedback is welcomed.
<p>

</p>
<h2>Link Back</h2>
Thanks for reading. Link back using any of these buttons.
<p>
</p>
<table border="0" cellpadding="5">
<tr>
<td align="center"><img src="http://i27.tinypic.com/2di1too.gif"></td>
<td align="center"><textarea class="button"><a href="/~llamaoh"><img src="http://i27.tinypic.com/2di1too.gif" border="0"></a>

Helpful Links

Exchange links?

Credits

Content and layout by Kat (rineo).