.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.

back to top

Image

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

back to top

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

back to top

Coding

Copy and paste this code into your neopet's petpage

Helpful Links

Exchange links?

Credits

Content and layout by Kat (rineo).

NEOPETS, characters, logos, names are trademarks of Neopets, Inc., (c) 1999-2008.





Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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