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





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