This is the place where I make and store petpage templates in hopes that you, dear visitor, will use them. Knowing how to interpret and edit code is beneficial in making something out of these glorious grayscale layouts. Anywho, out of all things to absorb from this pointless introduction, remember this:

Leave credit that links back to this page.

You are free to edit the coding in any way you fancy. You can change the wording of the credit if the phrase template from bothers you for some inexplicable reason. You can use the code for your own premades page or to make custom layouts for others. If you're only going to take a segment of a template (say, for the drop-down navigation), please leave credit if you can't re-create it from scratch without referencing my code.

There is a zero-tolerance policy for coding theft. I will no longer send neomails courteously asking for credit where it is not given; I'll just report promptly. So, if you're editing the code for your friend, remember to put credit where it is due if you don't want your page cleared.

Have fun browsing :D

From the Dashboard: May 26, 2012

Some Moar House Cleaning (And New Templates Too)

I finally re-made those petpage application templates! I still have to do a blog-style, multipaged/anchored one though. I get to that, eventually. u.u And a new personal page. Also, I noticed that people were using the review site templates predominantly for multipurpose use, so those are gone and placed in the generic/multipurpose section instead. I am honestly not a fan of anchored layouts. People overuse them and then it gets annoying to have to click like ten times when I want to access the content T_T So that's why I barely coded them.

School is finally over for me =O I'll be taking a summer class and working as well, but I want to start taking layout requests and hopefully this summer I can start. However, my photoshop skills are rudimentary (and even that's a compliment) at best. So yeah, I have to improve that first. And I need to get better at replying to neomail. lolz.

I'll be continuing to pull down old templates and reincarnating new versions of them, but if you've been following me the past few months that's what I've been doing. I'm in a perpetual state of discontent over my work. When I first code them, I like 'em, and then a couple of weeks later I'm all, what was I thinking?

Also it bugs me when people don't edit the colors. How come people don't edit the colors? That makes me sadface. These weren't intended to be premades, guys. I detest nothing more than premades who offer cookie cutter premades but yet... I have become the thing I have tried to desperately to avoid. The irony of it all.

CSB I know; nobody cares, etc etc. Anywho, live previews avaliable at: /~Eobr, /~Eridella, /~Soranza, and /~Trodia.

Pertaining to Coding Help and Issues

Still really lazy at answering mails pertaining to coding. Remember you can find methods of finding the save changes button at /~Ddianc#save and anchoring help at /~imgsrc#multi, /~tizzep, and here /~Sariyra#html-links. Try perusing through my coding directory at /~Trudial, ask the Help Chat, or use your favorite search engine.

Site Showcase

[Kleur] is a site that offers a gargantuan variety of color palettes and info about the psychology and color associations. Educational, user-friendly and interactive, and simply brilliant. Seriously, I could browse this site for HOURS; whether drooling over the masterful arrangement of colors and or simply just reading the cool triva. If you're looking for ideas on how to add color to these templates, this is the place to go. What are you still doing here, dude. GO VISIT IT. NAO.

Generic/Multi-Purpose

• Icon Triad Preview?

  <style> table img { padding: 4px; } a { color: #88919B; text-decoration: none; } a:hover { color: #AAB5C1; } table { background: #000; } body { text-align: center; font: 8pt Verdana; line-height: 20px; } #container { font: 8pt Verdana; width: 900px; border-left: 4px #c4c4c4 double; margin: 50px auto -40px auto; } #title { font: 48pt "Edwardian Script ITC"; line-height: 8px; margin: 15px 0px 0px -30px; border-bottom: 4px #ccc double; text-align: left; padding: 45px 0px 20px 150px; } #container img { padding: 1px; border: 1px #999 solid; background: #fff; } #icon_focal { top: -25px; left: -35px; z-index: 1; } #icon_right { z-index: 2; top: 0px; left: -5px; } #icon_left { top: 25px; left: -65px; z-index: 0; } #nav { border: 0px red solid; padding: 5px 0px; text-align: right; margin: 0px 20px 20px 0px; } #nav a { color: #666; text-decoration: none; font: 7pt Verdana; letter-spacing: 1px; padding: 0px 14px; } #nav a:hover { color: #999; } #container p { text-align: left; font: 8pt Verdana; line-height: 20px; color: #666; } h1 { font: small-caps 18pt "Georgia"; color: #999; text-align: center; margin: 0px; } h2 { font: small-caps 12pt "Georgia"; color: #999; text-align: center; margin: 0px; } hr { background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d29.png") no-repeat top center; border: 1px #fff solid; height: 37px; margin: 10px 0px; } #sidebar { float: left; border: 2px #ddd solid; width: 20%; padding: 0px 5px 5px 5px; background: #e0e0e0; margin: 0px 20px; } </style> <div id="container" style="position: relative;"> <img src="http://i1104.photobucket.com/albums/h327/eponarf/vertigo-3.png" id="icon_left" style="position: absolute;"><img src="http://i1104.photobucket.com/albums/h327/eponarf/vertigo-3.png" id="icon_focal" style="position: absolute;"><img src="http://i1104.photobucket.com/albums/h327/eponarf/vertigo-3.png" id="icon_right" style="position: absolute;"><div id="title"> Simple. Clean. Practical. </div> <div id="nav"> <a href="/">account</a> <a href="/">customise</a> <a href="/">games</a> <a href="/">explore</a> <a href="/">news</a> <a href="/">pet central</a> <a href="/">boards</a> <a href="/">shops</a> <a href="/">nc mall</a> </div> <div id="sidebar"> <h2>Heading Here</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus. In hac habitasse platea dictumst. Vestibulum dictum mi sit amet massa tincidunt tristique. Aenean justo justo, blandit quis ultrices vel, consequat at libero. Sed eu sem sit amet ipsum tempus commodo. Pellentesque a laoreet nisl. </p> <p>Fusce vitae augue neque, in congue felis. Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor. </p> <h2>Heading Here</h2> <p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. </p> </div> <h1>Heading Here</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus. In hac habitasse platea dictumst. Vestibulum dictum mi sit amet massa tincidunt tristique. Aenean justo justo, blandit quis ultrices vel, consequat at libero. Sed eu sem sit amet ipsum tempus commodo. Pellentesque a laoreet nisl. Fusce vitae augue neque, in congue felis. Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor. </p> <p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. Donec fringilla, nulla vel porta consectetur, purus urna porttitor velit, sed feugiat augue orci ut nunc. Vestibulum adipiscing varius leo nec egestas. Suspendisse consequat dolor a neque semper vitae laoreet eros ullamcorper. Sed elementum condimentum lectus, eu dignissim diam varius sit amet. Maecenas fermentum vestibulum elit, id eleifend lacus suscipit ut. Maecenas a ipsum ac dolor bibendum aliquam lacinia eget diam. Phasellus vulputate libero sed nibh condimentum ultricies. Sed in sem sit amet neque mattis ullamcorper sed sit amet neque. Proin in libero eleifend purus gravida adipiscing. Integer nec ante urna. </p> <hr> <h1>Heading Here</h1> <p> Vivamus vulputate augue et lorem tincidunt lacinia. Nam nisi leo, volutpat vitae sodales in, venenatis in neque. Nullam ipsum odio, pretium in tristique nec, auctor eu mi. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ut mauris sit amet leo mollis accumsan luctus aliquam leo. Maecenas sit amet eros libero. Quisque non mattis nunc. Nulla interdum diam ut quam suscipit pretium. Aliquam volutpat, ligula eget porta dapibus, odio lacus aliquet purus, rutrum interdum lorem quam nec magna. Donec volutpat arcu a felis cursus gravida non sit amet orci. Donec porttitor tempus nunc, in consectetur nulla aliquam vitae. Integer a metus orci, egestas gravida sem. Sed molestie sem rutrum odio aliquam fringilla. Donec vel sapien non lectus ornare scelerisque. Nam condimentum dui et eros condimentum molestie. </p> <hr> Template From <a href="/~thatkillsme">That Kills Me.</a> | Dividers from <a href="/~La_Roque">The Lunch Box.</a> | Icons from <a href="/~Psychochromia">Psychochromia.</a> </div> Linear, two columned layout. Uses a cluster of three icons as a focal points; look for the images that have been classified as icon_focal, icon_left, and icon_right in the HTML to change the image. Marvel at the elegant minimalism!

• DebonairPreview?

  <style> hr { height: 30px; border-width: 0px; margin: 15px 0px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d19.png") no-repeat top center; } a { color: #FF8B00; text-decoration: none; } a:hover { color: #FFB257; } b, i { color: #FFB257; } .sf { display: none; } body { text-align: center; background: #444; color: #e0e0e0; } #container { margin: 20px auto; padding: 0px; width: 1000px; font: 9pt Verdana; background: #444; line-height: 20px; } #container p { text-align: left; } #sidebar { width: 25%; padding: 0px; float: left; font: 8pt Verdana; line-height: 18px; color: #e0e0e0; text-align: left; } #content { float: left; padding: 8px; width: 70%; background: #333; margin: 0px 10px 10px 0px; } #footer { clear: both; background: #333; padding: 5px 0px; width: 976px; } .module { margin-bottom: 15px; padding: 5px; background: #333; border-top: 2px #FF8B00 solid; } h1 { text-align: left; font: 22pt Georgia; color: #FF8B00; margin: 5px 0px 20px 0px; padding-left: 15px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b66.png") repeat-y 0px 0px; } #sidebar h1 { font: 16pt Georgia; margin: 10px 0px 5px 0px; padding: 0px; text-align: left; background: none; } #nav { padding: 0px; } #nav a { display: block; font: 9pt Verdana; padding: 10px 10px 10px 25px; border-top: 1px #FF8B00 dotted; color: #FF8B00; text-decoration: none; text-align: left; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b66.png") no-repeat 10px 15px; } #nav a:hover { background-color: #2D2D2D; } </style> <div id="container"> <div id="content"> <h1>Welcome to My Page!</h1> <p><b>Bold</b> and <i>italic</i>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis nibh velit. Integer sit amet nisi elit, ut ullamcorper nisl. Etiam tristique neque a est suscipit eu sagittis magna placerat. Duis sagittis commodo accumsan. Duis egestas quam et ipsum tempus feugiat. In mauris felis, cursus eget pellentesque et, fringilla sed metus. Curabitur risus lorem, dictum eget vestibulum sit amet, pellentesque ut lectus. Vestibulum eu elit sed enim dapibus sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce porttitor pulvinar elit at sodales. </p> <hr> <h1>Heading Here</h1> <p> Morbi quam ipsum, porta sed euismod vel, dictum a dolor. Cras feugiat luctus augue, quis consectetur augue aliquam a. Donec eget arcu non est egestas sodales sed in elit. Maecenas bibendum iaculis velit, in tristique nisl convallis id. Etiam euismod, urna quis fringilla feugiat, sem arcu ullamcorper risus, at condimentum quam lectus faucibus quam. Donec enim ipsum, porttitor a malesuada ut, elementum et arcu. Sed ornare mattis urna. Fusce luctus vestibulum magna eu volutpat. Sed vitae nunc sapien, eu semper urna. Donec faucibus accumsan diam, dictum vestibulum eros sollicitudin id. Suspendisse est mi, rhoncus vel elementum in, pharetra vel nibh. Suspendisse eu felis nisi, sit amet pretium augue. Quisque vel dolor eros, accumsan elementum metus. </p> <p> Ut a massa quam. Proin non ante quis enim rutrum tincidunt. Nam mollis tellus a mi luctus congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mollis neque in nisl pharetra tempus. Nullam felis felis, pellentesque gravida feugiat porttitor, sodales sit amet sapien. In eu nisi massa. Phasellus ac magna libero, pellentesque tempus nibh. Aliquam sagittis volutpat ante adipiscing consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nec auctor enim. Sed auctor tincidunt justo id vehicula. </p> <hr> <h1>Heading Here</h1> <p> Vivamus tellus eros, ullamcorper quis semper eget, feugiat nec purus. Nulla rhoncus, mi eget euismod posuere, nisl nunc euismod justo, elementum molestie metus erat quis magna. Aenean aliquam, enim vitae pretium mollis, diam risus ornare velit, nec condimentum purus sapien eget ligula. Nulla facilisi. Curabitur non nibh tellus. Nullam lacus lorem, volutpat et scelerisque quis, laoreet a elit. Fusce elementum molestie erat, at egestas enim eleifend in. Sed iaculis ultrices elit, at pellentesque libero rhoncus eu. Morbi eget vulputate lorem. Sed quis neque erat. Duis nec felis semper nulla ullamcorper tempor. Ut cursus lectus ut leo ultrices et laoreet odio vulputate. Maecenas ornare tortor et nisl egestas euismod. Morbi pulvinar facilisis metus vel feugiat. Maecenas porta velit eu lacus commodo ullamcorper. Quisque ultrices commodo sem sed facilisis. </p> </div> <div id="sidebar"> <div class="module"> <h1>Welcome</h1> <p> Ut a massa quam. Proin non ante quis enim rutrum tincidunt. Nam mollis tellus a mi luctus congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mollis neque in nisl pharetra tempus. Nullam felis felis, pellentesque gravida feugiat porttitor, sodales sit amet sapien. In eu nisi massa.</p> </div> <div class="module" id="nav"> <h1 style="padding-left: 5px;">Navigation</h1> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div class="module"> <h1>Updates</h1> <p> Phasellus ac magna libero, pellentesque tempus nibh. Aliquam sagittis volutpat ante adipiscing consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nec auctor enim. Sed auctor tincidunt justo id vehicula. </p> </div> <div class="module"> <h1>Credits</h1> Layout template from <a href="/~thatkillsme">That Kills Me.</a> <br>Bullets and dividers from <a href="/~solidarized">The Lunch Box.</a> </div> </div> <div id="footer">NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2011. </div> </div> Two-column, linear layout. Dark gray with white text lends easier on the eyes for reading. Sidebar modules can be added/deleted your liking as long as it is within the #sidebar div. In terms of colors, the dark look is best contrasted against a somewhat bright color.

• Two Column Modules Preview?

  <style> a { color: #0087FF; } a:hover { color: #0070D3; } body { font: 9pt Verdana; line-height: 20px; text-align: center; background: #ddd; } #container { margin: 10px auto -40px auto; color: #333; width: 1000px; font: 9pt Verdana; line-height: 20px; } #container p { text-align: left; } #footer { clear: both; border: 0px #ccc solid; padding: 20px; font: 8pt Verdana; } #content { float: left; padding: 10px; width: 70%; } #sidebar { float: left; width: 27%; padding-top: 10px; } .module { border: 1px #333 solid; background: #fff; padding: 5px; margin-bottom: 10px; } .module h1 { background: #333; color: #fff; font: bold 9pt Verdana; letter-spacing: 1px; padding: 5px; margin: -5px -5px 10px -5px; } #header { margin: 12px 5px 5px 5px; } #header img { width: 976px; padding: 1px; border: 1px #333 solid; } #clear { clear: both; visibility: hidden; margin: 0; border: 0; } #nav { border: 1px #333 solid; background: #ccc; margin: 10px 10px 0px 10px; padding: 0px; } #nav a { margin: 0px -5px -5px 0px; } #nav a img { border-width: 0; } </style> <div id="container"> <div id="header"> <img src="http://i162.photobucket.com/albums/t254/shingie/ohay-2.jpg"> </div> <div id="nav"> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/myaccount.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/customise.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/games.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/explore.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/news.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/petcentral.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/boards.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/shops.png"></a> <a href="/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/ncmall.png"></a> </div> <div id="content"> <div class="module"> <h1>Heading Here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis nibh velit. Integer sit amet nisi elit, ut ullamcorper nisl. </p> <p> Morbi quam ipsum, porta sed euismod vel, dictum a dolor. Cras feugiat luctus augue, quis consectetur augue aliquam. </p> </div> <div class="module"> <h1>Heading Here</h1> <p> Ut a massa quam. Proin non ante quis enim rutrum tincidunt. </p> </div> <div class="module"> <h1>Heading Here</h1> <p> Vivamus tellus eros, ullamcorper quis semper eget, feugiat nec purus. </p> </div> <div class="module"> <h1>Heading Here</h1> <p>Aenean in nibh in neque dignissim facilisis eu a diam. Nullam vel enim massa.</p> </div> <div class="module"> <h1>Heading Here</h1> <p>Aenean in nibh in neque dignissim facilisis eu a diam. Nullam vel enim massa.</p> </div> </div> <div id="sidebar"> <div class="module"> <h1>Heading Here</h1> <p>Vivamus tellus eros, ullamcorper quis semper eget, feugiat nec purus.</p> </div> <div class="module"> <h1>Heading Here</h1> <p>Aenean in nibh in neque dignissim facilisis eu a diam. Nullam vel enim massa.</p> </div> <div class="module"> <h1>Heading Here</h1> <p> Aenean in nibh in neque dignissim facilisis eu a diam. Nullam vel enim massa. </p> </div> <div class="module"> <h1>Credit</h1> Layout Template from <a href="/~thatkillsme">That Kills Me.</a> </div> </div> <hr id="clear"> </div> The banner can be of any height but should be around 1000px in width. You can add/delete the sidebar modules to your suiting, as long as they remain within the #sidebar and #content divs. Also, you can alter the widths of the #sidebar and #content divs as long as their sum equals to 100%.

---

• Single Strip Preview?

  <style> a { text-decoration: none; color: #666; } a:hover { color: #999; } td { background: #000; } body { text-align: center; font: 8pt Verdana; line-height: 20px; color: #444; background: #666; } #container { border: 20px #444 solid; border-width: 0px 20px; padding: 15px 15px 190px 15px; background: #fff; width: 750px; margin: 0px auto -220px auto; } #container p { text-align: left; margin: 10px; } #header { padding: 20px 0px; color: #666; font: small-caps 44pt Georgia; } #header span { display: block; clear: both; font: 7pt Verdana; border-top: 1px #c9c9c9 dashed; padding: 5px 0px; } h1 { text-align: left; font: small-caps 18pt Georgia; margin: 10px 0px; } ul { text-align: left; padding: 0px; list-style: none; margin: 10px; } ul li { padding-left: 20px; background: url("http://i1186.photobucket.com/albums/z363/thelunchboxgraphics/Resources/star1.png") no-repeat 8px 6px; } .column { float: left; width: 50%; } .column p { text-align: left; } .img_left { float: left; margin: 10px; } .img_right { float: right; margin: 10px; } #nav { text-align: justify; } #nav a b { display: block; color: #3AADFF; font: bold 8pt Verdana; } #nav a:hover b { color: #6DC2FF; } #nav a { float: left; width: 25%; font: 7.5pt Verdana; line-height: 14px; } #nav a img { float: left; margin: 0px 10px; height: 70px; } hr { clear: both; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d38.png") no-repeat top center; height: 50px; margin: 10px 0px; border-width: 0px; } #tkm, #tkm h1 { text-align: right; } #tkm img { margin-top: -15px; } </style> <div id="container"> <div id="header"> Simple. Clean. Practical. <span> Witty subtitle runs here. Witty subtitle runs here. Witty subtitle runs here. Witty subtitle runs here. Witty subtitle runs here. </span> </div> <div id="nav"> <a href="/"><img src="http://images.neopets.com/items/food_coffeePIC-01.gif"><b>Link Here</b> Some sort of witty description goes here. I like food.</a> <a href="/"><img src="http://images.neopets.com/items/cheese.gif"><b>Link Here</b> Some sort of witty description goes here. I like food.</a> <a href="/"><img src="http://images.neopets.com/items/foo_egg_omelette.gif"><b>Link Here</b> Some sort of witty description goes here. I like food.</a> <a href="/"><img src="http://images.neopets.com/items/bitredapple.gif"><b>Link Here</b> Some sort of witty description goes here. I like food.</a> <div style="clear: both;"></div> </div> <h1>Heading Here</h1> <img src="http://images.neopets.com/items/klf_cupcake_banana_nut.gif" class="img_left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus. In hac habitasse platea dictumst. Vestibulum dictum mi sit amet massa tincidunt tristique. Aenean justo justo, blandit quis ultrices vel, consequat at libero. Sed eu sem sit amet ipsum tempus commodo. Pellentesque a laoreet nisl. Fusce vitae augue neque, in congue felis. Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor. </p> <ul> <li> <b>This is a list.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus.</li> <li> In hac habitasse platea dictumst. Vestibulum dictum mi sit amet massa tincidunt tristique. Aenean justo justo, blandit quis ultrices vel, consequat at libero.</li> <li>Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor.</li> </ul> <img src="http://images.neopets.com/items/foo_rainbow_cupcake.gif" class="img_right"><p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. Donec fringilla, nulla vel porta consectetur, purus urna porttitor velit, sed feugiat augue orci ut nunc. Vestibulum adipiscing varius leo nec egestas. Suspendisse consequat dolor a neque semper vitae laoreet eros ullamcorper. </p> <hr> <h1>Heading Here</h1> <div class="column"> <p><b>This is a column that's floated to the left, yay!</b> Vivamus vulputate augue et lorem tincidunt lacinia. Nam nisi leo, volutpat vitae sodales in, venenatis in neque. Nullam ipsum odio, pretium in tristique nec, auctor eu mi. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ut mauris sit amet leo mollis accumsan luctus aliquam leo. Maecenas sit amet eros libero. </p> <p>Quisque non mattis nunc. Nulla interdum diam ut quam suscipit pretium. Aliquam volutpat, ligula eget porta dapibus, odio lacus aliquet purus, rutrum interdum lorem quam nec magna. Donec volutpat arcu a felis cursus gravida non sit amet orci. Donec porttitor tempus nunc, in consectetur nulla aliquam vitae. Integer a metus orci, egestas gravida sem. Sed molestie sem rutrum odio aliquam fringilla. Donec vel sapien non lectus ornare scelerisque. Nam condimentum dui et eros condimentum molestie. </p> </div> <div class="column"> <p><b>This is a column that's floated to the left, yay!</b> Vivamus vulputate augue et lorem tincidunt lacinia. Nam nisi leo, volutpat vitae sodales in, venenatis in neque. Nullam ipsum odio, pretium in tristique nec, auctor eu mi. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ut mauris sit amet leo mollis accumsan luctus aliquam leo. Maecenas sit amet eros libero. </p> <p>Quisque non mattis nunc. Nulla interdum diam ut quam suscipit pretium. Aliquam volutpat, ligula eget porta dapibus, odio lacus aliquet purus, rutrum interdum lorem quam nec magna. Donec volutpat arcu a felis cursus gravida non sit amet orci. Donec porttitor tempus nunc, in consectetur nulla aliquam vitae. Integer a metus orci, egestas gravida sem. Sed molestie sem rutrum odio aliquam fringilla. Donec vel sapien non lectus ornare scelerisque. Nam condimentum dui et eros condimentum molestie. </p> </div> <hr> <h1>Heading Here</h1> <img src="http://images.neopets.com/items/bak_greycupcake.gif" class="img_left"><p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. Donec fringilla, nulla vel porta consectetur, purus urna porttitor velit, sed feugiat augue orci ut nunc. Vestibulum adipiscing varius leo nec egestas. Suspendisse consequat dolor a neque semper vitae laoreet eros ullamcorper. Sed elementum condimentum lectus, eu dignissim diam varius sit amet. Maecenas fermentum vestibulum elit, id eleifend lacus suscipit ut. Maecenas a ipsum ac dolor bibendum aliquam lacinia eget diam. Phasellus vulputate libero sed nibh condimentum ultricies. Sed in sem sit amet neque mattis ullamcorper sed sit amet neque. Proin in libero eleifend purus gravida adipiscing. Integer nec ante urna. </p> <hr> Template from <a href="/~thatkillsme">That Kills Me</a>. | Bullets and dividers from <a href="/~La_Roque">The Lunch Box.</a> </div> Linear, single column. Just your standard, basic layout. Precoded image bullets, two-column divs, image dividers and you can float images to the left or right.

• Web Standard Preview?

  <style> table { background: #000; } a { text-decoration: none; color: #666; } a:hover { color: #999; } body { text-align: center; font: 9pt Tahoma; line-height: 20px; background: #e0e0e0; } #container { border: 1px #000 solid; background: #fff; margin: 10px auto -45px auto; width: 950px; color: #444; } #header { font: small-caps 48pt Tahoma; background: #333; color: #fff; padding: 30px 0px; } #header span { display: block; font: 8pt Tahoma; } #sidebar { float: left; width: 25%; font: 8pt Tahoma; line-height: 16px; } #content { float: left; width: 75%; overflow: auto; } #footer { clear: both; width: 100%; border-top: 2px #ccc solid; padding: 5px 0px; } #container p { text-align: left; margin: 10px; } #nav { float: left; width: 100%; } #nav a:hover { background: #545454; } #nav, ul.dropdown { list-style: none; padding: 0px; margin: 0px; background: #444; } li.header { float: left; width: 85px; text-align: center; } li.header ul { top: 28px; left: 0px; z-index: 1; display: none; text-align: left; } li.header:hover ul { display: block; } li.header a { color: #fff; text-decoration: none; font: 9pt Tahoma; float: left; width: 99%; display: block; padding: 7px 0px; } ul.dropdown a { padding: 7px; } ul.dropdown { overflow: hidden; width: 150px; } hr, #tkm { clear: both; border: 1px #fff solid; margin: 0px; border-width: 1px 0px 0px 0px; } a.nav { float: left; width: 46.3%; padding: 5px 0px; margin: 4px 0px 0px 4px; background: #aaa; font: 7pt Tahoma; color: #333; } a.nav:hover { color: #333; background: #999; } #b a { font-weight: bold; color: #FFD026; } h1 { font: small-caps 24pt Georgia; margin: 15px 10px; } h2 { margin: 10px 5px; font: small-caps 14pt Georgia; color: #aaa; } </style> <div id="container"> <div id="header"> Title Goes Here <span>Or alternatively, replace this section with a banner and remove the padding of the #header div.</span> </div> <ul id="nav"> <li class="header" id="b"><a href="/">Neopets</a></li> <li class="header" style="position: relative;"> <a href="/myaccount.phtml">My Account</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/myaccount.phtml">» Control Panel</a></li> <li><a href="/preferences.phtml">» Preferences</a></li> <li><a href="/userinfo.phtml">» Edit Profile</a></li> <li><a href="/neomessages.phtml">» Neomail</a></li> <li><a href="/neofriends.phtml">» Neofriends</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> <li><a href="/space/warehouse/prizecodes.phtml">» Redeem Code</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/customise/">Customise</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/customise/">» Customise Neopet</a></li> <li><a href="/objects.phtml?type=inventory">» Inventory</a></li> <li><a href="/closet.phtml">» Closet</a></li> <li><a href="/neohome/"> » Neohomes</a></li> <li><a href="/neohome/shed">» Storage Shed</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/games/arcade.phtml">Games</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/games/arcade.phtml">» Games Room</a></li> <li><a href="/games/arcade_more.phtml?cat=top_rated">» Top Rated</a></li> <li><a href="/gamescores.phtml">» High Scores</a></li> <li><a href="/games/favorites.phtml">» Favourites</a></li> <li><a href="/keyquest">» Key Quest</a></li> <li><a href="/habitarium">» Habitarium</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/explore.phtml">Explore</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/explore.phtml">» Map of Neopia</a></li> <li><a href="/help/tutorial/index.phtml">» Tutorial</a></li> <li><a href="/weather.phtml">» Weather</a></li> <li><a href="/pronounce.phtml">» Pronunciation</a></li> <li><a href="/neopedia.phtml">» Neopedia</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/nf.phtml">News</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/nf.phtml">» New Features</a></li> <li><a href="/comingsoon.phtml">» Coming Soon</a></li> <li><a href="/ntimes/index.phtml">» Neopian Times</a></li> <li><a href="/stuff.phtml">» Merch News</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/petcentral.phtml">Pet Central</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/petcentral.phtml">» Main</a></li> <li><a href="/calendar.phtml">» Calendar</a></li> <li><a href="/worldevents.phtml">» World Events</a></li> <li><a href="/pound/index.phtml">» Neopian Pound</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/neoboards/">Boards</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/neoboards/index.phtml">» Neoboard Index</a></li> <li><a href="/neoboards/preferences.phtml">» Preferences</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/objects.phtml">Shops</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/objects.phtml">» Neopia Central</a></li> <li><a href="/market.phtml?type=wizard">» Shop Wizard</a></li> <li><a href="/market.phtml?type=your">» Your Shop</a></li> <li><a href="/auctions.phtml">» Auctions</a></li> <li><a href="/island/tradingpost.phtml">» Trading Post</a></li> <li><a href="/bank.phtml">» Bank</a></li> <li><a href="/shopping/index.phtml">» Merchandise</a></li> </ul> </li> <li class="header" style="position: relative;"> <a href="/mall/">NC Mall</a> <ul class="dropdown" style="position: absolute;"> <li><a href="/mall/index.phtml">» Shop</a></li> <li><a href="/mall/index.phtml?page=buy_nc">» Get Neocash</a></li> <li><a href="/mall/index.phtml?type=11">» Neocash Cards</a></li> <li><a href="/mall/index.phtml?page=redeem_nc">» Redeem Neocash Card</a></li> </ul> </li> <div id="#tkm"></div> </ul> <div id="content"> <h1>Content Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus. In hac habitasse platea dictumst. Vestibulum dictum mi sit amet massa tincidunt tristique. Aenean justo justo, blandit quis ultrices vel, consequat at libero. Sed eu sem sit amet ipsum tempus commodo. Pellentesque a laoreet nisl. Fusce vitae augue neque, in congue felis. Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor. </p> <p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. Donec fringilla, nulla vel porta consectetur, purus urna porttitor velit, sed feugiat augue orci ut nunc. Vestibulum adipiscing varius leo nec egestas. Suspendisse consequat dolor a neque semper vitae laoreet eros ullamcorper. Sed elementum condimentum lectus, eu dignissim diam varius sit amet. Maecenas fermentum vestibulum elit, id eleifend lacus suscipit ut. Maecenas a ipsum ac dolor bibendum aliquam lacinia eget diam. Phasellus vulputate libero sed nibh condimentum ultricies. Sed in sem sit amet neque mattis ullamcorper sed sit amet neque. Proin in libero eleifend purus gravida adipiscing. Integer nec ante urna. </p> <h1>Content Heading</h1> <p> Vivamus vulputate augue et lorem tincidunt lacinia. Nam nisi leo, volutpat vitae sodales in, venenatis in neque. Nullam ipsum odio, pretium in tristique nec, auctor eu mi. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ut mauris sit amet leo mollis accumsan luctus aliquam leo. Maecenas sit amet eros libero. Quisque non mattis nunc. Nulla interdum diam ut quam suscipit pretium. Aliquam volutpat, ligula eget porta dapibus, odio lacus aliquet purus, rutrum interdum lorem quam nec magna. Donec volutpat arcu a felis cursus gravida non sit amet orci. Donec porttitor tempus nunc, in consectetur nulla aliquam vitae. Integer a metus orci, egestas gravida sem. Sed molestie sem rutrum odio aliquam fringilla. Donec vel sapien non lectus ornare scelerisque. Nam condimentum dui et eros condimentum molestie. </p> <p> Proin id dapibus diam. Curabitur ultricies justo id lacus fermentum venenatis. Maecenas at eros sem. Phasellus luctus, neque ac mollis ornare, elit eros tempor ipsum, nec auctor nunc libero at elit. Vestibulum elementum justo eget mauris lacinia lobortis a nec dui. Nunc sit amet est a lacus tincidunt volutpat. Donec fringilla, nulla vel porta consectetur, purus urna porttitor velit, sed feugiat augue orci ut nunc. Vestibulum adipiscing varius leo nec egestas. Suspendisse consequat dolor a neque semper vitae laoreet eros ullamcorper. Sed elementum condimentum lectus, eu dignissim diam varius sit amet. Maecenas fermentum vestibulum elit, id eleifend lacus suscipit ut. Maecenas a ipsum ac dolor bibendum aliquam lacinia eget diam. Phasellus vulputate libero sed nibh condimentum ultricies. Sed in sem sit amet neque mattis ullamcorper sed sit amet neque. Proin in libero eleifend purus gravida adipiscing. Integer nec ante urna. </p> </div> <div id="sidebar"> <h2>Heading Here</h2> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <hr> <h2>Heading Here</h2> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <hr> <h2>Heading Here</h2> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <a class="nav" href="/">Link here</a> <hr> <h2>Sidebar Heading</h2> <p>This is a sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet faucibus tellus. In hac habitasse platea dictumst. </p> <h2>Sidebar Heading</h2> <p>Cras gravida mauris id est commodo eget tincidunt lectus hendrerit. Phasellus vel dignissim tortor. </p> </div> <div id="footer"> Template from <a href="/~thatkillsme">That Kills Me.</a> </div> </div> Linear, two column. This is the ultimate cookie cutter of templates, like what most basic css websites look like. Includes two sets of navigation -- the dropdown navigation, and the sidebar navigation. In IE, for the dropdown navigation, more link don't appear on hover. Free free to replace the dropdown navigation with your own links. You can adjust the width of the divs as long as they both equal 100%.

• Derivative Preview?

  <style> table { display: none; } a { color: #7792AA; text-decoration: none; } a:hover { color: #93B6D6; } a img { border-width: 0px; } .sf { display: none; } body { text-align: center; background: #d9d9d9; overflow: hidden; } #sidebar { height: 100%; width: 175px; border-right: 1px #ccc solid; z-index: 2; top: 0px; background: #fff; left: 0px; text-align: left; } #wrapper { height: 100%; width: 100%; z-index: 1; top: 0px; left: 0px; overflow: auto; } #container { width: 800px; padding: 10px; float: left; margin-left: 175px; background: #fff; font: 9pt Verdana; line-height: 22px; text-align: left; } #sidebar a { font: 10pt Verdana; text-decoration: none; color: #666; display: block; padding: 5px; border-bottom: 1px #d9d9d9 solid; margin: 0px 2px; } #sidebar li { margin: 0px; border: 1px #fff solid; padding: 0px; } #sidebar a:hover { color: #999; } #nav { padding: 0px; margin: 0px; list-style: none; } li.header { background: url("http://www.websitebullets.com/bullet/402/5.gif") no-repeat 160px 8px; } li.header ul { padding: 0px; margin: 0px; list-style: none; border: 1px #ccc solid; display: none; left: 174px; top: -2px; background: #fff; width: 200px; } li.header:hover ul { display: block; } h1 { text-align: left; font: 18pt Georgia; } #marquee { height: 270px; text-align: center; } #marquee a { float: left; width: 24.75%; font: bold 11pt Georgia; margin: 2px 0px; padding: 25px 0px; background: #ccc; border: 1px #fff solid; color: #333; } #marquee a:hover { color: #666; background: #ddd; } #marquee a img { display: none; width: 800px; height: 200px; } #marquee a:hover img { display: block; top: 0px; left: 0px; z-index: 1; } </style> <div id="sidebar" style="position: absolute;"> <ul id="nav"> <li><a href="/">Regular Link</a></li> <li><a href="/">Regular Link</a></li> <li class="header" style="position: relative;"> <a href="/"><b>Section One</b></a> <ul style="position: absolute;"> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> </ul> </li> <li><a href="/">Regular Link</a></li> <li class="header" style="position: relative;"> <a href="/"><b>Section Two</b></a> <ul style="position: absolute;"> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> </ul> </li> <li><a href="/">Regular Link</a></li> <li><a href="/">Regular Link</a></li> <li><a href="/">Regular Link</a></li> <li class="header" style="position: relative;"> <a href="/"><b>Section Three</b></a> <ul style="position: absolute;"> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> </ul> </li> <li><a href="/">Regular Link</a></li> <li><a href="/">Regular Link</a></li> <li><a href="/">Regular Link</a></li> <li class="header" style="position: relative;"> <a href="/"><b>Section Four</b></a> <ul style="position: absolute;"> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> <li><a href="/">Link Here</a></li> </ul> </li> <li><a href="/">Regular Link</a></li> <li><a href="#credit">Credit</a></li> </ul> </div> <div id="wrapper" style="position: absolute;"> <div id="container"> <div id="marquee" style="position: relative;"> <img src="http://i162.photobucket.com/albums/t254/shingie/three.jpg"><a href="/">Hover Me <img src="http://i162.photobucket.com/albums/t254/shingie/one.jpg" style="position: absolute;"></a> <a href="/">Some Link <img src="http://i162.photobucket.com/albums/t254/shingie/two.jpg" style="position: absolute;"></a> <a href="/">Another Link<img src="http://i162.photobucket.com/albums/t254/shingie/five.jpg" style="position: absolute;"></a> <a href="/">Yet Another <img src="http://i162.photobucket.com/albums/t254/shingie/four.jpg" style="position: absolute;"></a> </div> <h1>Notes about this Layout</h1> <ul> <li>IE Compatibility: The sidebar sticks and the rollever banner above works; however, the bolded dropdown links (dropleft?) navigation doesn't work.</li> <li>The banner pictures are all 800x200 pictures. Have fun hovering over the links :D</li> <li>The save changes button is hidden. Either tab for it or disable styles. Visit <a href="/~ddianc#save">here</a> for more info.</li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis auctor tempor. Phasellus nulla felis, vestibulum at porttitor nec, dignissim sit amet orci. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla diam justo, lacinia at euismod ac, aliquam eget eros. Aenean ac ornare lectus. Aliquam sit amet lacus id tellus feugiat commodo non vitae nisl. In et mi metus, quis molestie nisi. Morbi molestie aliquet ipsum, nec scelerisque nisl commodo posuere. Fusce posuere ultrices condimentum. Nunc mattis tincidunt ipsum, a porta arcu varius quis. Praesent facilisis purus ut quam tempus tincidunt ullamcorper est feugiat. Integer fermentum posuere faucibus. Nulla a condimentum mauris. Vestibulum tellus diam, laoreet non consequat non, pulvinar quis ipsum. Vestibulum non mauris id purus sollicitudin hendrerit nec interdum est. </p> <h1>Heading Here</h1> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam mi nisi, tincidunt eget scelerisque at, auctor at tellus. Cras tincidunt, dolor non pulvinar molestie, felis eros porta dui, et scelerisque ligula velit vulputate elit. Duis leo dui, tempus malesuada ornare et, pulvinar ac mi. Donec semper nisi non elit sagittis condimentum. In ultricies enim malesuada sem dignissim vel sollicitudin libero euismod. Praesent bibendum pellentesque odio, at dignissim arcu consequat nec. Nullam nulla augue, vulputate vitae sollicitudin a, volutpat vitae dui. </p> <p> Aliquam id est et leo pretium ullamcorper nec ut lectus. Vestibulum lacinia laoreet mauris, luctus tempor augue porta nec. Nunc ut dictum nisl. Aenean viverra, nunc in consectetur euismod, nulla nulla euismod leo, aliquam gravida lectus nibh a ante. Donec facilisis dolor vel dui pharetra sed varius dolor consectetur. Proin sapien lacus, tincidunt et tincidunt id, ornare non mi. Aenean ultrices tincidunt eleifend. Nullam ligula enim, eleifend in feugiat nec, euismod sed nisi. </p> <h1>Heading Here</h1> <p> Vestibulum turpis tortor, dapibus vel volutpat ut, faucibus vel ligula. Etiam aliquet, leo quis tincidunt tincidunt, metus massa viverra dui, a aliquam metus tellus nec nunc. Sed hendrerit magna ac orci sagittis consectetur. Aliquam erat volutpat. Nulla enim sapien, faucibus vitae faucibus eget, bibendum ac ipsum. Maecenas nec lacus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id ante pharetra leo placerat congue. Integer ante sem, tempor vel fermentum sit amet, sodales a nisi. Nunc acsan sem quis arcu ornare vulputate. Sed elit urna, ultrices vel aliquam et, ultricies non mauris. Aliquam semper eros sit amet turpis dignissim acsan. Aenean semper consectetur elit vitae scelerisque. </p> <p> Aliquam rhoncus blandit tortor at egestas. Aliquam volutpat molestie libero rhoncus varius. Aenean iaculis lacinia aliquet. Nunc ac faucibus felis. Mauris ornare ultrices arcu, ac mollis ipsum bibendum volutpat. Curabitur ut leo quis neque elementum ultrices et sed augue. Sed commodo erat vel odio viverra egestas pretium lacus vulputate. Maecenas adipiscing velit sit amet libero blandit mollis. Sed eget pharetra augue. Suspendisse potenti. </p> <p><br></p> <p><br></p> <p><br></p> <p><br></p> <p><br></p> <p><br></p> <p><br></p> <a name="credit"></a> Template From <a href="/~thatkillsme">That Kills Me.</a> </div> </div> Linear layout; one column for navigation and one column for content. The sidebar nav sticks to the page as you scroll and includes a banner rollover marquee thingy that's IE proof. Banners are 800x200px. Bolded links which more link appear on hover doesn't work in IE. The save changes button is hidden (visit here on how to locate it.

---

• Cookie Cutter Preview?

  <style> a img { border-width: 0px; } a { color: #666; } a:hover { color: #999; } .sf { display: none; } body { font: 8pt Verdana; line-height: 18px; text-align: center; color: #444; background: #ccc; } td { background: #000; } #container { width: 800px; height: 480px; border-bottom: 1px #000 solid; border-left: 1px #666 dotted; border-right: 1px #666 dotted; margin: 0px auto -40px auto; background: #fff; overflow: hidden; } #container p { text-align: left; margin: 10px; } .section { overflow: auto; height: 100%; } #welcome { float: left; width: 508px; } #sidebar { height: 476px; width: 290px; margin: 2px 0px; border-left: 1px #999 dotted; float: left; background: #fff; } #nav { background: #444; width: 800px; margin: 8px auto 0px auto; padding: 6px 0px; border-width: 1px; border-style: solid dotted; border-color: #000 #999; text-align: left; } #nav a { color: #bfbfbf; font: bold 12pt Arial; padding: 5px; margin: 2px 4px; text-decoration: none; } #nav a:hover { color: #fff; } #banner { margin: 4px; } h1 { font: bold 11pt Arial; text-align: left; color: #444; background: #ddd; border-bottom: 2px #ccc solid; padding: 5px; margin: 0px 0px 5px 0px; clear: both; } h2 { font: bold 9pt Verdana; margin: 12px 0px 0px 2px; text-align: left; } #updates { height: 200px; overflow: auto; margin-right: 3px; } #updates p { margin: 1px 0px; padding-left: 15px; background: url("http://www.websitebullets.com/bullet/412/5.gif") no-repeat 3px 6px; } ul { list-style: none; text-align: left; margin: 15px; padding: 0px; } ul li { background: url("http://www.websitebullets.com/bullet/412/5.gif") no-repeat 3px 6px; margin: 5px 0px; padding-left: 16px; } .column { float: left; width: 50%; } .left { float: left; margin: 5px 12px; } .right { float: right; padding-right: 10px; } </style> <div id="nav"> <a href="#home">Home</a> <a href="#one">Section One</a> <a href="#two">Section Two</a> <a href="#three">Section Three</a> <a href="#cred">Credits</a> </div> <div id="container"> <a name="home"></a> <div id="welcome"> <img src="http://i56.tinypic.com/2qxq8le.png" id="banner"><h1>Witty Tagline Goes Here</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget fringilla diam. Proin id ipsum lacus, et laoreet nunc. Sed sollicitudin dui sed lacus imperdiet eu tristique purus adipiscing. Nunc ornare mi at nunc laoreet rhoncus. Ut id felis turpis, a lacinia justo. Nunc non ante urna. Phasellus nec est nec nisl ornare facilisis nec vitae quam. Donec mi libero, fringilla quis fringilla id, eleifend eu arcu. Donec sed nunc lectus, at posuere felis. </p> <p> Nunc sed sapien tortor. Sed ac urna ligula. Etiam vel velit nec ante feugiat sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mollis elit id odio feugiat vel hendrerit felis ornare. In id massa odio. Integer ac felis enim. Sed elementum fringilla hendrerit. </p> </div> <div id="sidebar"> <h1>Updates</h1> <div id="updates"> <h2>Tuesday, August 25, 2011</h2> <p>Every time you use the paragraph tag within this div, it appears like a bullet.</p> <p> Nunc sed sapien tortor. Sed ac urna ligula. Etiam vel velit nec ante feugiat sodales. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <h2>Tuesday, August 25, 2011</h2> <p> Nam mollis elit id odio feugiat vel hendrerit felis ornare. </p> <p>In id massa odio. Integer ac felis enim.</p> <h2>Tuesday, August 25, 2011</h2> <p> Sed elementum fringilla hendrerit. </p> <p>Cras suscipit placerat ligula vel volutpat. Vestibulum vulputate elementum pulvinar. Proin viverra cursus tortor ac auctor. </p> </div> <h1>Heading Here</h1> <p> Nunc sed sapien tortor. Sed ac urna ligula. Etiam vel velit nec ante feugiat sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mollis elit id odio feugiat vel hendrerit felis ornare. In id massa odio. Integer ac felis enim. Sed elementum fringilla hendrerit. Cras suscipit placerat ligula vel volutpat. Vestibulum vulputate elementum pulvinar. Proin viverra cursus tortor ac auctor. </p> </div> <div style="clear: both;"></div> <a name="one"></a> <div class="section"> <h1>Section One</h1> <ul> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget fringilla diam. Proin id ipsum lacus, et laoreet nunc. </li> <li>Sed sollicitudin dui sed lacus imperdiet eu tristique purus adipiscing. Nunc ornare mi at nunc laoreet rhoncus. Ut id felis turpis, a lacinia justo.</li> <li> Nunc non ante urna. Phasellus nec est nec nisl ornare facilisis nec vitae quam. Donec mi libero, fringilla quis fringilla id, eleifend eu arcu. Donec sed nunc lectus, at posuere felis.</li> <li> Morbi pellentesque diam sed libero facilisis id mattis ante mattis. Vestibulum quis ligula quis justo euismod laoreet eget id felis. Integer sit amet lectus eros.</li> </ul> <p> <img src="http://images.neopets.com/items/mall_parasol_valentine.gif" class="left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet magna urna. Integer velit nulla, fringilla sit amet aliquet non, dignissim ut diam. Integer pellentesque odio non felis malesuada blandit. Etiam tempor tempus leo id dignissim. Phasellus lectus ligula, auctor quis euismod vitae, dapibus eu quam. Duis sit amet est vulputate nunc aliquet aliquam. Aliquam nunc felis, sagittis eu sodales porttitor, aliquet at risus. Fusce volutpat est posuere elit auctor tempor. In at sapien massa, et accumsan sem. Pellentesque enim lacus, sagittis vel placerat a, faucibus non mi. Etiam commodo congue fringilla. Integer convallis leo ut urna facilisis et fringilla lacus blandit. </p> <h1>Section One</h1> <div class="column"> <p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> </div> <div class="column"> <p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. </p> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div style="clear: both;"></div> <img src="http://images.neopets.com/items/plu_babaa_pink.gif" class="left"><p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> <img src="http://images.neopets.com/items/sch_pinkcybunnyerasers.gif" class="right"><p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. </p> </div> <a name="two"></a> <div class="section"> <h1>Section Two</h1> <img src="http://images.neopets.com/items/fur_faellie_beanbag.gif" class="left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget fringilla diam. Proin id ipsum lacus, et laoreet nunc. Sed sollicitudin dui sed lacus imperdiet eu tristique purus adipiscing. Nunc ornare mi at nunc laoreet rhoncus. Ut id felis turpis, a lacinia justo. Nunc non ante urna. Phasellus nec est nec nisl ornare facilisis nec vitae quam. Donec mi libero, fringilla quis fringilla id, eleifend eu arcu. Donec sed nunc lectus, at posuere felis. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet magna urna. Integer velit nulla, fringilla sit amet aliquet non, dignissim ut diam. Integer pellentesque odio non felis malesuada blandit. Etiam tempor tempus leo id dignissim. Phasellus lectus ligula, auctor quis euismod vitae, dapibus eu quam. Duis sit amet est vulputate nunc aliquet aliquam. Aliquam nunc felis, sagittis eu sodales porttitor, aliquet at risus. Fusce volutpat est posuere elit auctor tempor. In at sapien massa, et accumsan sem. Pellentesque enim lacus, sagittis vel placerat a, faucibus non mi. Etiam commodo congue fringilla. Integer convallis leo ut urna facilisis et fringilla lacus blandit. Morbi pellentesque diam sed libero facilisis id mattis ante mattis. Vestibulum quis ligula quis justo euismod laoreet eget id felis. Integer sit amet lectus eros. </p> <img src="http://images.neopets.com/items/gro_poogle_meshsponge.gif" class="right"><p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <h1>Section Two</h1> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div class="section"> <a name="three"></a> <h1>Section Three</h1> <div class="column"> <p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div class="column"> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. </p> </div> <div style="clear: both;"></div> <p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <h1>Section Three</h1> <img src="http://images.neopets.com/items/toy_poogle_pinkyoyo.gif" class="left"><p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> </div> <a name="cred"></a> <div class="section"> <h1>Credits</h1> <p> Template from <a href="/~thatkillsme">That Kills Me</a>. <br>Banner Placeholder from <a href="/~Crince">Glow</a>. <br>NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. ® denotes Reg. US Pat. & TM Office. All rights reserved. </p> </div> </div>Anchored & multipaged, includes space for a banner. You may recognize this as the previous review site template, now revamped for generic use.

• Pseudo-designPreview?

  <style> a img { border-width: 0px; } a { color: #666; text-decoration: none; } a:hover { color: #999; } .sf { display: none; } body { font: 8pt Verdana; line-height: 20px; text-align: center; color: #444; } td { background: #000; } #container { width: 800px; height: 420px; margin: 0px auto; background: #fff; overflow: hidden; } #tkm { font: 7pt Arial; width: 800px; margin: 0px auto -65px auto; color: #999; } #container p { text-align: left; margin: 10px 0px; } #header { font: 20pt "Verdana"; width: 800px; color: #fff; background: #444; padding: 20px 0px; text-indent: 10px; margin: 15px auto 3px auto; text-align: left; } .section { overflow: auto; height: 100%; } #nav { width: 800px; height: 28px; margin: 2px auto; } #nav a { color: #aaa; font: bold 12pt Arial; border-bottom: 3px #aaa solid; padding: 2px 0px; float: left; width: 20%; text-decoration: none; } #nav a:hover { color: #666; border-color: #666; } h1 { font: bold 14pt Georgia; text-align: left; color: #444; } h2 { font: bold 9pt Verdana; margin: 12px 0px 0px 2px; text-align: left; } ul { list-style: none; text-align: left; margin: 15px; padding: 0px; } ul li { background: url("http://www.websitebullets.com/bullet/412/5.gif") no-repeat 3px 6px; margin: 5px 0px; padding-left: 16px; } .column { float: left; width: 50%; } .column p { margin: 10px !important; } .left { float: left; margin: 5px 12px; } .right { float: right; margin: 5px 12px; } </style> <div id="header"> Title Goes Hither, Huzzah! </div> <div id="nav"> <a href="#home">Home</a> <a href="#one">Section One</a> <a href="#two">Section Two</a> <a href="#three">Section Three</a> <a href="#four">Section Four</a> </div> <div id="container"> <a name="home"></a> <div class="section"> <h1>Hello World!</h1> <p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> <h1>Editing Notes</h1> <p> Not much to say about this layout. It's pretty plain and boring and minimal :o If you plan on adding more links (look for #nav a {width: 20%;} in the CSS), divide the 100 by the number of links. Right now there are five links, so each link is 20% wide. If you need help with anchoring, try visiting <a href="/~imgsrc#multi">/~imgsrc#multi</a> or <a href="/~tizzep">/~tizzep</a>. </p> </div> <a name="one"></a> <div class="section"> <h1>Section One</h1> <ul> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget fringilla diam. Proin id ipsum lacus, et laoreet nunc. </li> <li>Sed sollicitudin dui sed lacus imperdiet eu tristique purus adipiscing. Nunc ornare mi at nunc laoreet rhoncus. Ut id felis turpis, a lacinia justo.</li> <li> Nunc non ante urna. Phasellus nec est nec nisl ornare facilisis nec vitae quam. Donec mi libero, fringilla quis fringilla id, eleifend eu arcu. Donec sed nunc lectus, at posuere felis.</li> <li> Morbi pellentesque diam sed libero facilisis id mattis ante mattis. Vestibulum quis ligula quis justo euismod laoreet eget id felis. Integer sit amet lectus eros.</li> </ul> <p> <img src="http://images.neopets.com/items/mall_parasol_valentine.gif" class="left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet magna urna. Integer velit nulla, fringilla sit amet aliquet non, dignissim ut diam. Integer pellentesque odio non felis malesuada blandit. Etiam tempor tempus leo id dignissim. Phasellus lectus ligula, auctor quis euismod vitae, dapibus eu quam. Duis sit amet est vulputate nunc aliquet aliquam. Aliquam nunc felis, sagittis eu sodales porttitor, aliquet at risus. Fusce volutpat est posuere elit auctor tempor. In at sapien massa, et accumsan sem. Pellentesque enim lacus, sagittis vel placerat a, faucibus non mi. Etiam commodo congue fringilla. Integer convallis leo ut urna facilisis et fringilla lacus blandit. </p> <h1>Section One</h1> <div class="column"> <p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> </div> <div class="column"> <p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. </p> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div style="clear: both;"></div> <img src="http://images.neopets.com/items/plu_babaa_pink.gif" class="left"><p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> <img src="http://images.neopets.com/items/sch_pinkcybunnyerasers.gif" class="right"><p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. </p> </div> <a name="two"></a> <div class="section"> <h1>Section Two</h1> <img src="http://images.neopets.com/items/fur_faellie_beanbag.gif" class="left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget fringilla diam. Proin id ipsum lacus, et laoreet nunc. Sed sollicitudin dui sed lacus imperdiet eu tristique purus adipiscing. Nunc ornare mi at nunc laoreet rhoncus. Ut id felis turpis, a lacinia justo. Nunc non ante urna. Phasellus nec est nec nisl ornare facilisis nec vitae quam. Donec mi libero, fringilla quis fringilla id, eleifend eu arcu. Donec sed nunc lectus, at posuere felis. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet magna urna. Integer velit nulla, fringilla sit amet aliquet non, dignissim ut diam. Integer pellentesque odio non felis malesuada blandit. Etiam tempor tempus leo id dignissim. Phasellus lectus ligula, auctor quis euismod vitae, dapibus eu quam. Duis sit amet est vulputate nunc aliquet aliquam. Aliquam nunc felis, sagittis eu sodales porttitor, aliquet at risus. Fusce volutpat est posuere elit auctor tempor. In at sapien massa, et accumsan sem. Pellentesque enim lacus, sagittis vel placerat a, faucibus non mi. Etiam commodo congue fringilla. Integer convallis leo ut urna facilisis et fringilla lacus blandit. Morbi pellentesque diam sed libero facilisis id mattis ante mattis. Vestibulum quis ligula quis justo euismod laoreet eget id felis. Integer sit amet lectus eros. </p> <img src="http://images.neopets.com/items/gro_poogle_meshsponge.gif" class="right"><p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <h1>Section Two</h1> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div class="section"> <a name="three"></a> <h1>Section Three</h1> <div class="column"> <p> Proin ac elit risus. Phasellus ut tellus odio, at tincidunt dolor. Etiam mattis nisi at lacus lacinia et imperdiet lectus vulputate. Nulla varius lobortis quam nec accumsan. Quisque eleifend, justo in facilisis molestie, turpis metus tincidunt lectus, quis vestibulum sem nunc a lorem. In et turpis non turpis sagittis elementum id eu lorem. Donec tincidunt fermentum cursus. In dolor neque, hendrerit at sollicitudin eget, condimentum et ipsum. Sed eget sollicitudin mauris. Sed volutpat, lacus ac auctor porta, augue tortor rhoncus est, in pellentesque sapien ante ut magna. Nulla sed turpis velit, sit amet suscipit felis. </p> </div> <div class="column"> <p> Etiam at massa felis, vitae congue risus. Suspendisse potenti. Nam ultrices sapien luctus neque hendrerit a vulputate mauris imperdiet. In egestas dictum tincidunt. In hac habitasse platea dictumst. Cras faucibus tempor sagittis. Mauris faucibus mauris nec odio lacinia dignissim. Aliquam viverra consectetur pharetra. Aliquam erat volutpat. Sed dui est, convallis ut rhoncus eu, malesuada eu nibh. Aenean quis nisl eu elit accumsan vehicula consectetur a est. Phasellus sit amet sapien tortor, eu eleifend velit. Praesent pellentesque, massa vitae euismod volutpat, arcu justo condimentum libero, ac ultricies nisi risus non diam. </p> </div> <div style="clear: both;"></div> <p> Mauris rutrum, tortor sit amet semper hendrerit, magna magna tristique neque, sit amet blandit dui tellus vel quam. Curabitur lobortis mollis placerat. Morbi congue luctus mauris, non vulputate augue rutrum nec. Nulla quis ipsum tristique augue porta faucibus. Pellentesque lobortis massa eget nulla condimentum sed luctus risus tristique. In pulvinar enim sem, vel blandit ipsum. Ut sed dui sem. Nunc ac justo id ligula molestie vehicula. Donec malesuada leo eget odio gravida mollis. Aliquam tempor suscipit ornare. </p> <h1>Section Three</h1> <img src="http://images.neopets.com/items/toy_poogle_pinkyoyo.gif" class="left"><p> Ut lectus ipsum, eleifend nec sodales nec, viverra consequat metus. Integer mattis purus non nisl suscipit euismod. Quisque in mi tellus, dapibus adipiscing tellus. Nulla nisi arcu, bibendum non venenatis ac, feugiat consectetur est. Nam lobortis nulla non purus cursus mattis. Nullam sit amet sapien ut ipsum rhoncus bibendum. Mauris cursus porta magna, quis pulvinar mi laoreet quis. </p> </div> <a name="four"></a> <div class="section"> <h1>Section Four</h1> <p>Stuff hereth.</p> </div> </div> <div id="tkm"> <p> Template from <a href="/~thatkillsme">That Kills Me</a>. NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. All rights reserved. </p> </div> Anchored & multipaged, derived from the cookie cutter template, except more simple in design.

---

Guides

• So Boring Preview?

  <style> b { color: #44BDFF; } i { color: #5CBDF2; } a img, #plug a { border-width: 0px; } a { color: #3FBCFF; text-decoration: none; border-bottom: 1px #5EC9FF dotted; } a:hover { color: #87D5FF; } .sf, td { display: none; } body { text-align: center; overflow: hidden; } #plug { top: 0; left: -16px; z-index: 3; background: #000; width: 100%; } #plug img { margin: 1px auto; } #wrapper { z-index: 1; top: 0; left: 0; height: 100%; width: 100%; overflow: auto; } #container { margin: 45px auto; font: 10pt Verdana; line-height: 22px; color: #333; width: 60%; } #container p { text-align: left; } #nav { width: 16%; border: 1px #B2E4FF solid; border-width: 0px 1px 1px 0px; background: #E2F5FF; top: 15; left: 0; font: 9pt Verdana; line-height: 18px; z-index: 2; margin-right: 5px; float: left; } #nav ul { border: 0px red solid; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 35px; list-style: upper-roman; text-align: left; font-weight: bold; color: #3FBCFF; } #nav ul li { border: 0px orange solid; margin: 10px 0px; } #nav ul li ul { border: 0px blue solid; list-style: lower-alpha; font-weight: normal; margin: 0px; padding: 0px 0px 0px 20px; } #nav ul li ul li { border: 0px green solid; margin: 0px; } #nav ul ul a { text-decoration: none; border: none; } h1 { text-align: left; font: bold 20pt Georgia; line-height: 20px; color: #00A5FF; border-bottom: 2px #C9DFEA solid; clear: both; } h2 { text-align: left; color: #44BDFF; font: 16pt Georgia; clear: both; } h3 { color: #00A5FF; font: italic 10pt Verdana; margin: 5px 0px; padding-left: 10px; } img.left { float: left; margin: 1px 7px 7px 0px; } img.right { float: right; margin: 1px 0px 7px 7px; } hr { border: 2px #C9DFEA solid; border-width: 2px 0px 0px 0px; margin: 20px 0px; clear: both; } p.blquo { width: 75%; margin: 20px auto; border: 1px #44BDFF dotted; border-left: 10px #44BDFF solid; padding: 5px 10px; clear: both; } #tkm { color: #aaa; font: 9pt Verdana; line-height: 20px; } #container ul { text-align: left; list-style: none; margin: 20px 0px; padding: 0px; } #container ul li { padding-left: 35px; background: url("http://www.websitebullets.com/bullet/830/1.gif") no-repeat 12px 3px; margin: 8px 0px; border: 0px red solid; } .column { float: left; width: 50%; } .column p { margin: 0px 10px 10px 10px; } #footer div { float: left; width: 33%; text-align: left; padding: 5px 0px; margin-bottom: 15px; } #footer a { display: block; padding-left: 10px; text-decoration: none; border: none; } #title { font: 40pt Georgia; color: #0093DD; margin: 35px 0px; } #title span { display: block; font: 8pt Verdana; margin-top: -10px; color: #aaa; } </style> <div id="plug" style="position: absolute;"> <a href="/"><img src="http://images.neopets.com/images/homepage_banner.gif"></a> </div> <div id="nav" style="position: absolute;"> <ul> <li style="margin-top: 0px;"> <a href="/">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> </ul> </div> <div id="wrapper" style="position: absolute;"> <div id="container"> <div id="title"> Simple. Clean. Practical. <span>Well, I can't eat muffins in an agitated manner. The butter would probably get on my cuffs. One must eat muffins quite calmly, it is the only way to eat them. </span> </div> <h1>I. Heading Here</h1> <h2>Subtopic One</h2> <img src="http://images.neopets.com/items/ra_blum_band.gif" class="left"><p> This is <b>bold</b>, this is <i>italic</i>, and this is a <a href="/">link</a>. Curabitur vitae vehicula urna. Aliquam vehicula arcu eu diam tempor lacinia. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat rhoncus nibh. Integer aliquam placerat urna quis facilisis. Curabitur vitae vehicula urna. Aliquam vehicula arcu eu diam tempor lacinia. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat rhoncus nibh. Integer aliquam placerat urna quis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <p class="blquo">This is a blockquote. Whenever you want to say something of emphasis or important, this fancy box will do the trick. :D</p> <img src="http://images.neopets.com/items/fur_rooisland_bookshelf.gif" class="right"><p> Curabitur vitae vehicula urna. Aliquam vehicula arcu eu diam tempor lacinia. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat rhoncus nibh. Integer aliquam placerat urna quis facilisis. Aenean tempor ante et leo gravida eu auctor turpis tristique. Fusce bibendum pellentesque neque non blandit. Quisque dictum dapibus mollis. Nulla facilisi. Curabitur vitae vehicula urna. Aliquam vehicula arcu eu diam tempor lacinia. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat rhoncus nibh. Integer aliquam placerat urna quis facilisis. </p> Unless text is enclosed within paragraph tags, the text will be centered. <p>Look, I'm a paragraph!</p> <h2>Subtopic Two</h2> <img src="http://images.neopets.com/items/fur_rooisland_dresser.gif" class="left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Curabitur vitae vehicula urna. Aliquam vehicula arcu eu diam tempor lacinia. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat rhoncus nibh. Integer aliquam placerat urna quis facilisis. Aenean tempor ante et leo gravida eu auctor turpis tristique. Fusce bibendum pellentesque neque non blandit. Quisque dictum dapibus mollis. Nulla facilisi. </p> <p class="blquo">Note that the save changes button is underneath the layout. To save changes to your petpage, highlight the last link 'Terms and Conditions' at the bottom of the page. Hit tab once, hit enter, and your petpage will be saved. Alternatively you can disable styles -- find out how <a href="/~ddianc#save">here</a>.</p> <ul> <li> <b>These are unordered lists. Fancy, eh?</b> Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. </li> <li>Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus.</li> <li>Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus.</li> </ul> <img src="http://images.neopets.com/items/fur_rooisland_stove.gif" class="right"><p> Nam eu nisi mauris. Nam sodales ipsum eu diam laoreet tincidunt vitae eget nisi. Quisque molestie enim nec mi tincidunt tempus. Curabitur aliquet imperdiet blandit. In hac habitasse platea dictumst. Mauris euismod dolor et dui consequat sed adipiscing urna vehicula. Nullam dignissim iaculis nisi ut accumsan. Nulla eu tempor ipsum. Donec eu mollis ante. Nulla sed risus dui. Vivamus auctor arcu in elit blandit ut sodales odio consequat. Praesent et tortor est, ut suscipit massa. senectus et netus et malesuada fames ac turpis egestas. Aliquam suscipit convallis auctor. Fusce vitae nisl leo. Vivamus vitae nibh at metus commodo semper nec ac metus. Donec quis ante augue. Curabitur tempus gravida lacus a luctus.sem.senectus et netus et malesuada fames ac turpis egestas. Aliquam suscipit convallis auctor. Fusce vitae nisl leo. Vivamus vitae nibh at metus commodo semper nec ac metus. Donec quis ante augue. Curabitur tempus gravida lacus a luctus.sem. </p> <h2>Subtopic Three</h2> <img src="http://images.neopets.com/items/fur_rooisland_lamp.gif" class="left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non.sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <img src="http://images.neopets.com/items/fur_roo_island_bed.gif" class="right"><p> Phasellus auctor posuere faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam suscipit convallis auctor. Fusce vitae nisl leo. Vivamus vitae nibh at metus commodo semper nec ac metus. Donec quis ante augue. Curabitur tempus gravida lacus a luctus.sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h1>II. Heading Here</h1> <h2>Subtopic One</h2> <div class="column"> <p><b>This div is floated to the left, yay!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <p> Mauris massa lectus, venenatis eget interdum ac, fringilla ac felis. Aenean sem mi, luctus non aliquam id, semper interdum elit. Integer imperdiet viverra sem, non pulvinar urna eleifend sit amet. Maecenas ornare nulla at diam cursus quis mollis purus ullamcorper. </p> </div> <div class="column"> <p><b>This div is floated to the left, yay!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <p> Mauris massa lectus, venenatis eget interdum ac, fringilla ac felis. Aenean sem mi, luctus non aliquam id, semper interdum elit. Integer imperdiet viverra sem, non pulvinar urna eleifend sit amet. Maecenas ornare nulla at diam cursus quis mollis purus ullamcorper. </p> </div> <div style="clear: both;"></div> <h2>Subtopic Two</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Three</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h1>III. Heading Here</h1> <h2>Subtopic One</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Two</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Three</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h1>IV. Heading Here</h1> <h2>Subtopic One</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Two</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Three</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h1>V. Heading Here</h1> <h2>Subtopic One</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Two</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h2>Subtopic Three</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <div id="footer"> <div> <h3>Related Pages</h3> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div id="middle"> <h3>My Pages</h3> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div> <h3>Neopets</h3> <a href="/">My Account</a> <a href="/">Games</a> <a href="/">Boards</a> <a href="/">Pet Central</a> </div> </div> <hr> <div id="tkm"> Content © <a href="http://www.neopets.com/userlookup.phtml?user=username">username</a> | Template from <a href="/~thatkillsme">That Kills Me.</a> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/aboutus.phtml">Neopets, Inc.,</a> © 1999-2012. ® denotes Reg. US Pat. & TM Office. All rights reserved. <br><a href="/privacy.phtml">PRIVACY POLICY</a> | <a href="/safetytips.phtml">Safety Tips</a> | <a href="/contact.phtml">Contact Us</a> | <a href="/aboutus.phtml">About Us</a> | <a href="/presskit_form.phtml">Press Kit</a> | <a href="/terms.phtml">Terms and Conditions</a> </div> </div> </div> Linear layout with a fixed navigation that's IE-proof. Save changes button hidden -- go here to find out how to save changes. Precoded columns, floated images, blockquotes, unorded lists, and a fancy footer.

• Graphic Tutorial Preview?

  <style> a { color: #4271CF; text-decoration: none; } a:hover { color: #78A2F5; } td { background: #000; } body { text-align: center; font: 8pt Verdana; background: #ccc; } .sf { display: none; } #container { font: 9pt Verdana; line-height: 20px; color: #666; border: 1px #444 solid; border-width: 0px 1px; width: 850px; margin: 0px auto -50px auto; background: #fff; } #container p { text-align: left; margin: 10px 5px; } #banner { width: 100%; } hr { visibility: hidden; clear: both; border-width: 0px; margin: 0px; } #footer { text-align: left; font: bold 9pt arial; margin: 5px -1px -1px -1px; padding: 25px 15px; background: #444; color: #fff; } .column { float: left; width: 25%; } #footer a { display: block; font: normal 8pt Verdana; width: 80%; margin: 1px 0px; padding: 2px 0px; color: #999; } #footer a:hover { color: #ccc; } #nav { text-align: left; border: 2px #ccc solid; background: #DEEEF9; border-width: 1px 0px; width: 100%; margin-bottom: 10px; padding: 8px 0px; } #nav a { color: #48AFEA; font: 7.5pt Verdana; padding: 2px 0px 2px 19px; background: url("http://i650.photobucket.com/albums/uu222/argenteusdraco/b44.png") no-repeat 8px 5px; display: block; width: 85%; } #nav a:hover { color: #86C4E8; } .b { font: bold 9pt Arial !important; padding-left: 5px !important; background: none !important; } h1 { font: 18pt Calibri; text-align: left; padding-left: 10px; } .blquo { margin: 30px auto; width: 74%; text-align: left; padding: 5px 5px 5px 25px; border: 1px #5DB5F4 dotted; background: url("http://www.websitebullets.com/bullet/844/1.gif") no-repeat 8px 6px; } b { color: #2CA3F8; } .img_right img, .img_left img { width: 210px; } .img_right { float: right; border: 1px #ccc solid; margin: 0px 5px 2px 5px; padding: 1px; font: 7pt Verdana; } .img_left { float: left; border: 1px #ccc solid; margin: 0px 5px 2px 5px; padding: 1px; font: 7pt Verdana; } .img_right span, .img_left span { display: none; border: 1px #ccc solid; padding: 1px; background: #fff; } .img_left:hover span { display: block; top: -100px; left: 220px; z-index: 1; } .img_right:hover span { display: block; top: -100px; right: 220px; z-index: 1; } .img_right:hover span img, .img_left:hover span img { width: 600px; } </style> <div id="container"> <img src="http://i162.photobucket.com/albums/t254/shingie/ohay-2.jpg" id="banner"><div id="nav"> <div class="column"> <a href="/" class="b">Introduction</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> </div> <div class="column"> <a href="/" class="b">Body Paragraph</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> </div> <div class="column"> <a href="/" class="b">Body Paragraph</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> </div> <div class="column"> <a href="/" class="b">Conclusion</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> <a href="/">Subtopic here</a> </div> <hr> </div> <h1>Heading Here</h1> <div class="img_right" style="position: relative;"> <img src="http://images.neopets.com/backgrounds/sketch/800_babypets.jpg"><br>Hover for larger view. <span style="position: absolute;"><img src="http://images.neopets.com/backgrounds/sketch/800_babypets.jpg"></span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis leo, ornare non laoreet eu, fermentum nec nibh. Nunc auctor ornare nulla, in tincidunt ipsum sollicitudin id. Nullam vitae sapien id lacus ornare congue quis non neque. Maecenas congue nibh nulla, et tristique lorem. Aliquam nec arcu eros, vitae vehicula neque. In eros felis, convallis quis imperdiet ac, dapibus ut urna. In a lacus vel ipsum interdum pellentesque. Integer lacus tortor, ultricies in fermentum at, elementum a diam. Integer sem turpis, hendrerit lobortis suscipit ut, porttitor feugiat massa. </p> <p>Sed semper, turpis at elementum iaculis, nisi ante semper arcu, a ultrices metus nisl non leo. Donec sit amet justo nisi. Vivamus augue purus, porta vitae sagittis a, mattis id enim. Praesent adipiscing feugiat massa, sit amet gravida augue sodales vitae. In eu mi eu augue cursus varius. Duis posuere, lorem at convallis interdum, est velit pretium lorem, eu fringilla ante arcu ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <div class="img_left" style="position: relative;"> <img src="http://images.neopets.com/backgrounds/sketch/800_flotsam.jpg"><br>Hover for larger view. <span style="position: absolute;"><img src="http://images.neopets.com/backgrounds/sketch/800_flotsam.jpg"></span> </div> <p> Proin suscipit nibh vitae sapien lacinia eget sollicitudin dolor pharetra. Praesent a sagittis sem. Integer ullamcorper quam nec leo luctus imperdiet. Aliquam in enim in risus volutpat hendrerit vel in odio. Duis eget tortor augue, et lacinia nisi. Nam at rutrum purus. Sed semper, turpis at elementum iaculis, nisi ante semper arcu, a ultrices metus nisl non leo. Donec sit amet justo nisi. Vivamus augue purus, porta vitae sagittis a, mattis id enim. Praesent adipiscing feugiat massa, sit amet gravida augue sodales vitae. In eu mi eu augue cursus varius. Duis posuere, lorem at convallis interdum, est velit pretium lorem, eu fringilla ante arcu ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <div class="blquo"> <b>This is a blockquote.</b> Whenever you need to say something of importance -- a helpful tip, warning, summary, etc -- put it within a div like this. </div> <h1>Heading Here</h1> <div class="img_right" style="position: relative;"> <img src="http://images.neopets.com/backgrounds/sketch/800_lenny.jpg"><br>Hover for larger view. <span style="position: absolute;"><img src="http://images.neopets.com/backgrounds/sketch/800_lenny.jpg"></span> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel blandit elit. Quisque adipiscing aliquet pharetra. Etiam faucibus placerat ligula eget dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus quam nulla, mattis vel pellentesque eu, feugiat quis ligula. </p> <p> Maecenas eget accumsan lacus. Integer sed nunc lectus. Donec id dolor quis nisi cursus sagittis nec vitae est. Praesent risus nulla, volutpat vulputate rutrum sollicitudin, fringilla fringilla neque. Sed sodales lacus eu massa mollis at lobortis arcu euismod. In sit amet dui et enim lobortis eleifend. Nulla euismod pretium risus, at pretium lorem mollis mattis. Nam vel tortor ligula, et dapibus lectus. Donec ligula velit, rhoncus volutpat facilisis vestibulum, luctus sit amet nisi. Etiam non mauris dui, pretium congue libero. Nulla sollicitudin, ligula sit amet ultrices mattis, ligula nisl commodo odio, quis bibendum lorem lorem ut urna. Ut sollicitudin posuere risus ac rhoncus. Proin sollicitudin adipiscing nisl ac iaculis. </p> <h1>Heading Here</h1> <div class="img_left" style="position: relative;"> <img src="http://images.neopets.com/backgrounds/sketch/800_skeith.jpg"><br>Hover for larger view. <span style="position: absolute;"><img src="http://images.neopets.com/backgrounds/sketch/800_skeith.jpg"></span> </div> <p> Vivamus et orci vel arcu vestibulum consequat. Proin sodales scelerisque tortor, ut ultricies quam blandit ut. Cras accumsan lacinia faucibus. Sed auctor nulla at magna placerat consequat. Fusce egestas, nisl ut semper pretium, mauris quam elementum nisi, ut semper augue quam quis urna. Sed hendrerit sem at ante elementum molestie. Curabitur in nunc arcu, ut dapibus ipsum. Aenean mi diam, dapibus eget viverra vitae, pellentesque a est. Mauris sed imperdiet augue. </p> <p> Vivamus et orci vel arcu vestibulum consequat. Proin sodales scelerisque tortor, ut ultricies quam blandit ut. Cras accumsan lacinia faucibus. Sed auctor nulla at magna placerat consequat. Fusce egestas, nisl ut semper pretium, mauris quam elementum nisi, ut semper augue quam quis urna. Sed hendrerit sem at ante elementum molestie. Curabitur in nunc arcu, ut dapibus ipsum. Aenean mi diam, dapibus eget viverra vitae, pellentesque a est. Mauris sed imperdiet augue. </p> <div class="blquo"> <b>This is a blockquote.</b> Whenever you need to say something of importance -- a helpful tip, warning, summary, etc -- put it within a div like this. </div> <p> Vivamus et orci vel arcu vestibulum consequat. Proin sodales scelerisque tortor, ut ultricies quam blandit ut. Cras accumsan lacinia faucibus. Sed auctor nulla at magna placerat consequat. Fusce egestas, nisl ut semper pretium, mauris quam elementum nisi, ut semper augue quam quis urna. Sed hendrerit sem at ante elementum molestie. Curabitur in nunc arcu, ut dapibus ipsum. Aenean mi diam, dapibus eget viverra vitae, pellentesque a est. Mauris sed imperdiet augue. </p> <div id="footer"> <div class="column"> Content written by <a href="/">username</a> <br>Template from <a href="/~thatkillsme">That Kills Me</a> <br>Bullets from <a href="/~ellzaris">Flamboyance</a> </div> <div class="column"> Related Pages <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div class="column"> My Pages <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div class="column"> Listed At <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <hr> </div> </div> Linear Layout. It can support paragraphs with visuals (images) floated to the right/left. Banner should be about 850px in width but can be of any height. When you hover over the image a larger preview will appear, except in IE (they must manually drag/drop to view the bigger image). Includes a professionally styled footer.

• Two Column Classic Preview?

  <style> a { color: #999; text-decoration: none; } a:hover { color: #666; } a img { border-width: 0px; } .sf { display: none; } body { text-align: center; background: #ccc; color: #333; } #container { width: 1000px; border: 1px #444 dotted; margin: 10px auto; background: #fff; font: 9pt Verdana; line-height: 20px; } #container p { text-align: left; margin: 10px; } #content { width: 73%; float: left; margin: 10px 0px; border-right: 1px #ccc solid; } #sidebar { width: 26.9%; margin: 10px 0px; float: right; } #footer { clear: both; background: #e0e0e0; padding: 10px; } ul { text-align: left; padding: 0px; margin: 0px 15px 0px 0px; } ul li { list-style: upper-roman; margin: 15px 0px 20px 35px; } li ul li { list-style: square; margin: 3px 3px 3px 15px; } a.b { border-bottom: 1px #ccc solid; padding: 1px 0px; font: bold small-caps 11pt Verdana; display: block; color: #666; } h1 { font: 18pt Calibri; text-align: left; margin-left: 10px; } #footer h1 { font: 12pt Calibri; margin: 3px 0px; } .column { float: left; width: 24%; margin: 3px; text-align: left; } .column a { display: block; } hr { clear: both; margin: 5px 0px; border-width: 1px 0px 0px 0px; border: 1px #ccc solid; } p.blquo { background-color: #FAF2D2; padding: 7px 10px 10px 10px; margin: 10px 45px !important; border: 1px #FFD54D solid; } .picture_left { float: left; margin: 10px; } .picture_right { float: right; margin: 10px; } </style> <div id="container"> <div id="content"> <h1>Heading Here</h1> <img src="http://images.neopets.com/items/foo_lupe_pudding.gif" class="picture_left"><p>Text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu risus, molestie sit amet fermentum vel, dictum eu eros. Duis sagittis gravida mauris sed convallis. In vestibulum vehicula ullamcorper. Donec eget ante diam, a aliquet odio. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. Vestibulum at eros vel mauris consequat luctus quis quis mi. </p> <img src="http://images.neopets.com/items/food_cybunny_icecream.gif" class="picture_right"><p>Fusce nec nunc vel lectus congue volutpat in non turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu risus, molestie sit amet fermentum vel, dictum eu eros. Duis sagittis gravida mauris sed convallis. In vestibulum vehicula ullamcorper. Donec eget ante diam, a aliquet odio. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. Fusce nec nunc vel lectus congue volutpat in non turpis. Vestibulum at eros vel mauris consequat luctus quis quis mi.</p> <p class="blquo">This is a blockquote. Whenever you want to say something of importance, use this. Duis sagittis gravida mauris sed convallis. </p> <h1>Heading Here</h1> <img src="http://images.neopets.com/items/shf_icecream_dumplings.gif" class="picture_left"><p>Text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu risus, molestie sit amet fermentum vel, dictum eu eros. Duis sagittis gravida mauris sed convallis. In vestibulum vehicula ullamcorper. Donec eget ante diam, a aliquet odio. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. Vestibulum at eros vel mauris consequat luctus quis quis mi. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. </p> <p class="blquo">This is a blockquote. Whenever you want to say something of importance, use this. Vestibulum at eros vel mauris consequat luctus quis quis mi. </p> <img src="http://images.neopets.com/items/food_bansundae.gif" class="picture_right"><p>Text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu risus, molestie sit amet fermentum vel, dictum eu eros. Duis sagittis gravida mauris sed convallis. In vestibulum vehicula ullamcorper. Donec eget ante diam, a aliquet odio. Pellentesque vestibulum tellus arcu, et viverra sapien. Vestibulum at eros vel mauris consequat luctus quis quis mi. Vestibulum at eros vel mauris consequat luctus quis quis mi. Fusce nec nunc vel lectus congue volutpat in non turpis. Duis sagittis gravida mauris sed convallis. In vestibulum vehicula ullamcorper. Donec eget ante diam, a aliquet odio. </p> </div> <div id="sidebar"><ul> <li> <a href="/" class="b">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/" class="b">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/" class="b">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/" class="b">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> <li> <a href="/" class="b">Heading Here</a> <ul> <li><a href="#Sub1">Subtopic One</a></li> <li><a href="#Sub2">Subtopic Two</a></li> <li><a href="#Sub3">Subtopic Three</a></li> </ul> </li> </ul></div> <div id="footer"> <div class="column"> <h1>My Other Pages</h1> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> </div> <div class="column"> <h1>Related Pages</h1> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> </div> <div class="column"> <h1>Listed At</h1> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> <a href="/">Link here</a> </div> <div class="column"> <h1>Neopets</h1> <a href="/">Account</a> <a href="/">Games</a> <a href="/">Customise</a> <a href="/">Explore</a> </div> <hr> Template from <a href="/~thatkillsme">That Kills Me</a>. Neopets characters, logos, names, and all related indicia are trademarks of Neopets, Inc. © 1999 - Present. Used with permission. </div> </div> Linear layout, designed for any general guide. Includes hierarchical navigation and a professionally styled footer. Generous line height, gargantuan font, and wide layout allows visitors to read multiple paragraphs of text without tiring out. If you're going to insert multiple paragraphs, you can float images as visual aids to break up the monotony of the text.

---

Directories

• A.A. Mini Preview?

  <style> a img { border-width: 0px; } p { text-align: left; } a { text-decoration: none; color: #666; } a:hover { color: #999; } td { background: #000; } .sf { display: none; } body { text-align: center; font: 8pt Verdana; line-height: 16px; background: url("http://i972.photobucket.com/albums/ae202/tiptoeboo/Backgrounds/diffgrey-1.jpg") repeat; } #container { width: 800px; overflow: hidden; height: 550px; border: 2px #999 solid; padding: 1px; margin: 5px auto -50px auto; background: #fff; color: #333; } #banner { margin: 1px auto; width: 798px; } #nav { background: url("http://i.imgur.com/NEy8C.png") repeat; height: 26px; border-bottom: 1px #666 dotted; margin: 0px 1px; line-height: 20px; } #nav a { display: block; padding: 3px 0px; color: #ccc; } #nav a:hover { color: #99CC03; } #nav ul { padding: 0; margin: 0; list-style: none; } #nav ul { border: 0px red solid; } #nav ul li { border: 0px orange solid; width: 100px; float: left; } #nav ul li ul { border: 0px blue solid; margin-top: 1px; padding: 3px 5px; background: url("http://i.imgur.com/NEy8C.png") repeat; display: none; width: 500px; text-align: left; } #nav ul li:hover ul { display: block; } #nav ul li ul li { border: 0px purple solid; float: left; width: 16.66%; } #nav ul ul li a { padding: 1px 0px; } a.header { border-right: 1px #666 dotted; } #content { height: 321px; margin: 1px; overflow: hidden; } #content ul { text-align: left; list-style: none; padding: 0; margin: 10px 20px; } #content ul li { background: url("http://www.websitebullets.com/bullet/205/5.gif") no-repeat 0px 3px; padding-left: 18px; margin: 5px 0px; } .page { overflow: auto; height: 100%; padding: 0px 5px; } #updates { float: right; margin: 5px 0px 0px 10px; border: 1px #ccc solid; background: #e0e0e0; width: 20%; height: 93%; overflow: auto; padding: 0px 5px 5px 5px; } #updates h2 { margin-top: 8px; color: #666; } #new { height: 130px; overflow: auto; } #new a { display: block; float: left; width: 33%; padding: 5px 0px; text-align: left; font: 7pt Verdana; color: #999; } #new a:hover { background: #ddd; } #new a b { display: block; margin: 12px 0px 2px 0px; font: bold 8pt Verdana; text-decoration: underline; color: #666; } #new a img { border: 1px #ccc solid; padding: 1px; margin: 0px 5px; float: left; } .IEnav { margin: 10px; height: 320px; } .IEnav a { float: left; display: block; width: 14.28%; text-indent: 8px; font: 8pt Tahoma; padding: 5px 0px; border-bottom: 1px #ddd solid; } .IEnav a:hover { color: #666; background: #e0e0e0; } h1 { font: 16pt Calibri; text-transform: uppercase; color: #444; margin: 8px 0px; clear: left; border-bottom: 10px #ddd solid; line-height: 0px; padding-top: 10px; } h2 { font: 12pt Calibri; color: #999; margin: 0px; } hr { clear: both; margin: 0px; border: none; visibility: hidden; } .pet { float: left; width: 47%; margin: 8px; text-align: left; } .pet span { float: left; margin-right: 8px; border: 1px #ccc solid; overflow: hidden; } .pet span img { margin: 0px -30px 0px -20px; } </style> <div id="container"> <img src="http://i162.photobucket.com/albums/t254/shingie/four.jpg" id="banner"><div id="nav"> <ul> <li><a href="#home" class="header">Home</a></li> <li> <a href="#species" class="header">By Species</a> <ul style="position: absolute;"> <li><a href="#aca">Acara (1)</a></li> <li><a href="#ais">Aisha (3)</a></li> <li><a href="#blu">Blumaroo</a></li> <li><a href="#bor">Bori</a></li> <li><a href="#bru">Bruce</a></li> <li><a href="#buz">Buzz</a></li> <li><a href="#chi">Chia</a></li> <li><a href="#cho">Chomby</a></li> <li><a href="#cyb">Cybunny</a></li> <li><a href="#dra">Draik (2)</a></li> <li><a href="#ele">Elephante</a></li> <li><a href="#eyr">Eyrie</a></li> <li><a href="#flot">Flotsam</a></li> <li><a href="#gel">Gelert</a></li> <li><a href="#gno">Gnorbu</a></li> <li><a href="#gra">Grarrl</a></li> <li><a href="#gru">Grundo</a></li> <li><a href="#his">Hissi</a></li> <li><a href="#ixi">Ixi</a></li> <li><a href="#jet">Jetsam</a></li> <li><a href="#jub">Jubjub</a></li> <li><a href="#kac">Kacheek</a></li> <li><a href="#kau">Kau</a></li> <li><a href="#kik">Kiko</a></li> <li><a href="#koi">Koi</a></li> <li><a href="#kor">Korbat</a></li> <li><a href="#kou">Kougra</a></li> <li><a href="#kra">Krawk</a></li> <li><a href="#kyr">Kyrii</a></li> <li><a href="#len">Lenny</a></li> <li><a href="#lup">Lupe</a></li> <li><a href="#mee">Meerca</a></li> <li><a href="#moe">Moehog</a></li> <li><a href="#myn">Mynci</a></li> <li><a href="#nim">Nimmo</a></li> <li><a href="#ogr">Ogrin</a></li> <li><a href="#peo">Peophin</a></li> <li><a href="#poo">Poogle</a></li> <li><a href="#pte">Pteri</a></li> <li><a href="#qui">Quiggle</a></li> <li><a href="#ruk">Ruki</a></li> <li><a href="#sco">Scorchio</a></li> <li><a href="#sho">Shoyru</a></li> <li><a href="#ske">Skeith</a></li> <li><a href="#tec">Techo</a></li> <li><a href="#ton">Tonu</a></li> <li><a href="#tus">Tuskaninny</a></li> <li><a href="#uni">Uni</a></li> <li><a href="#usu">Usul</a></li> <li><a href="#woc">Wocky</a></li> <li><a href="#xwe">Xweetok</a></li> <li><a href="#yur">Yurble</a></li> <li><a href="#zaf">Zafara</a></li> <div style="clear: both;"></div> </ul> </li> <li> <a href="#color" class="header">By Color</a> <ul style="position: absolute; width: 550px;"> <li><a href="#8bit">8-Bit</a></li> <li><a href="#alien">Alien</a></li> <li><a href="#baby">Baby</a></li> <li><a href="#biscuit">Biscuit</a></li> <li><a href="#blue">Blue</a></li> <li><a href="#brown">Brown</a></li> <li><a href="#camouflage">Camouflage</a></li> <li><a href="#checkered">Checkered</a></li> <li><a href="#chocolate">Chocolate</a></li> <li><a href="#christmas">Christmas</a></li> <li><a href="#clay">Clay</a></li> <li><a href="#cloud">Cloud</a></li> <li><a href="#custard">Custard</a></li> <li><a href="#darigan">Darigan</a></li> <li><a href="#desert">Desert</a></li> <li><a href="#durian">Durian</a></li> <li><a href="#disco">Disco</a></li> <li><a href="#electric">Electric</a></li> <li><a href="#eventide">Eventide</a></li> <li><a href="#faerie">Faerie</a></li> <li><a href="#fire">Fire</a></li> <li><a href="#garlic">Garlic</a></li> <li><a href="#ghost">Ghost</a></li> <li><a href="#glowing">Glowing</a></li> <li><a href="#gold">Gold</a></li> <li><a href="#green">Green</a></li> <li><a href="#grey">Grey</a></li> <li><a href="#halloween">Halloween</a></li> <li><a href="#ice">Ice</a></li> <li><a href="#invisible">Invisible</a></li> <li><a href="#island">Island</a></li> <li><a href="#jelly">Jelly</a></li> <li><a href="#magma">Magma</a></li> <li><a href="#maractite">Maractite</a></li> <li><a href="#maraquan">Maraquan</a></li> <li><a href="#mutant">Mutant</a></li> <li><a href="#msp">MSP</a></li> <li><a href="#orange">Orange</a></li> <li><a href="#pink">Pink</a></li> <li><a href="#pirate">Pirate</a></li> <li><a href="#plushie">Plushie</a></li> <li><a href="#purple">Purple</a></li> <li><a href="#rainbow">Rainbow</a></li> <li><a href="#red">Red</a></li> <li><a href="#relic">Relic</a></li> <li><a href="#robot">Robot</a></li> <li><a href="#royalboy">Royal</a></li> <li><a href="#sketch">Sketch</a></li> <li><a href="#shadow">Shadow</a></li> <li><a href="#silver">Silver</a></li> <li><a href="#skunk">Skunk</a></li> <li><a href="#snow">Snow</a></li> <li><a href="#snot">Snot</a></li> <li><a href="#speckled">Speckled</a></li> <li><a href="#split">Split</a></li> <li><a href="#sponge">Sponge</a></li> <li><a href="#spotted">Spotted</a></li> <li><a href="#starry">Starry</a></li> <li><a href="#strawberry">Strawberry</a></li> <li><a href="#striped">Striped</a></li> <li><a href="#swamp">Swamp Gas</a></li> <li><a href="#tomato">Tomato</a></li> <li><a href="#transparent">Transparent</a></li> <li><a href="#tyrannian">Tyrannian</a></li> <li><a href="#usukiboy">Usuki</a></li> <li><a href="#usukigirl">Usuki</a></li> <li><a href="#water">Water</a></li> <li><a href="#white">White</a></li> <li><a href="#woodland">Woodland</a></li> <li><a href="#wraith">Wraith</a></li> <li><a href="#yellow">Yellow</a></li> <li><a href="#zombie">Zombie</a></li> <div style="clear: both;"></div> </ul> </li> <li> <a href="#add" class="header">Add Pet</a> </li> <li> <a href="#sitely" class="header">Sitely</a> </li> </ul> </div> <div id="content"> <a name="home"></a> <div class="page"> <div id="updates"> <h2>Updates 'N Stuff</h2> O_o I think this is the updates box. <h2>Featured Pet</h2> Or this could be a featured pet section <h2>Link Back</h2> Or this could be a link back section idk. </div> <p><b>Welcome message, yay!</b> Text here, whee. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas imperdiet molestie nisi, et viverra sem dignissim non. In at leo vitae quam consequat laoreet. Phasellus quis nibh a nisi aliquam tempus at ut risus. Integer aliquam commodo eros, non vulputate purus vulputate quis. </p> <p> Proin gravida laoreet adipiscing. Suspendisse ut bibendum urna. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at pulvinar metus. Nunc adipiscing, lorem eleifend aliquam elementum, quam mi vehicula nisi, vitae porttitor elit lacus nec nulla. <a href="#add"><b>For notes about this layout, click here.</b></a> </p> <h2>Newly Added Pets</h2> <div id="new"> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><b>Pet Name</b> Added April 8th, 2012</a> </div> </div> <a name="species"></a> <div class="page"> <div class="IEnav"> <a href="#aca">Acara</a> <a href="#ais">Aisha</a> <a href="#blu">Blumaroo</a> <a href="#bor">Bori</a> <a href="#bru">Bruce</a> <a href="#buz">Buzz</a> <a href="#chi">Chia</a> <a href="#cho">Chomby</a> <a href="#cyb">Cybunny</a> <a href="#dra">Draik</a> <a href="#ele">Elephante</a> <a href="#eyr">Eyrie</a> <a href="#flot">Flotsam</a> <a href="#gel">Gelert</a> <a href="#gno">Gnorbu</a> <a href="#gra">Grarrl</a> <a href="#gru">Grundo</a> <a href="#his">Hissi</a> <a href="#ixi">Ixi</a> <a href="#jet">Jetsam</a> <a href="#jub">Jubjub</a> <a href="#kac">Kacheek</a> <a href="#kau">Kau</a> <a href="#kik">Kiko</a> <a href="#koi">Koi</a> <a href="#kor">Korbat</a> <a href="#kou">Kougra</a> <a href="#kra">Krawk</a> <a href="#kyr">Kyrii</a> <a href="#len">Lenny</a> <a href="#lup">Lupe</a> <a href="#mee">Meerca</a> <a href="#moe">Moehog</a> <a href="#myn">Mynci</a> <a href="#nim">Nimmo</a> <a href="#ogr">Ogrin</a> <a href="#peo">Peophin</a> <a href="#poo">Poogle</a> <a href="#pte">Pteri</a> <a href="#qui">Quiggle</a> <a href="#ruk">Ruki</a> <a href="#sco">Scorchio</a> <a href="#sho">Shoyru</a> <a href="#ske">Skeith</a> <a href="#tec">Techo</a> <a href="#ton">Tonu</a> <a href="#tus">Tuskaninny</a> <a href="#uni">Uni</a> <a href="#usu">Usul</a> <a href="#woc">Wocky</a> <a href="#xwe">Xweetok</a> <a href="#yur">Yurble</a> <a href="#zaf">Zafara</a> </div> <h1>Acara</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> <h1>Aisha</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> <h1>Blumaroo</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> </div> <a name="color"></a> <div class="page"> <div class="IEnav"> <a href="#8bit">8-Bit</a> <a href="#alien">Alien</a> <a href="#baby">Baby</a> <a href="#biscuit">Biscuit</a> <a href="#blue">Blue</a> <a href="#brown">Brown</a> <a href="#camouflage">Camouflage</a> <a href="#checkered">Checkered</a> <a href="#chocolate">Chocolate</a> <a href="#christmas">Christmas</a> <a href="#clay">Clay</a> <a href="#cloud">Cloud</a> <a href="#custard">Custard</a> <a href="#darigan">Darigan</a> <a href="#desert">Desert</a> <a href="#durian">Durian</a> <a href="#disco">Disco</a> <a href="#electric">Electric</a> <a href="#eventide">Eventide</a> <a href="#faerie">Faerie</a> <a href="#fire">Fire</a> <a href="#garlic">Garlic</a> <a href="#ghost">Ghost</a> <a href="#glowing">Glowing</a> <a href="#gold">Gold</a> <a href="#green">Green</a> <a href="#grey">Grey</a> <a href="#halloween">Halloween</a> <a href="#ice">Ice</a> <a href="#invisible">Invisible</a> <a href="#island">Island</a> <a href="#jelly">Jelly</a> <a href="#magma">Magma</a> <a href="#maractite">Maractite</a> <a href="#maraquan">Maraquan</a> <a href="#mutant">Mutant</a> <a href="#msp">MSP</a> <a href="#orange">Orange</a> <a href="#pink">Pink</a> <a href="#pirate">Pirate</a> <a href="#plushie">Plushie</a> <a href="#purple">Purple</a> <a href="#rainbow">Rainbow</a> <a href="#red">Red</a> <a href="#relic">Relic</a> <a href="#robot">Robot</a> <a href="#royalboy">Royal</a> <a href="#sketch">Sketch</a> <a href="#shadow">Shadow</a> <a href="#silver">Silver</a> <a href="#skunk">Skunk</a> <a href="#snow">Snow</a> <a href="#snot">Snot</a> <a href="#speckled">Speckled</a> <a href="#split">Split</a> <a href="#sponge">Sponge</a> <a href="#spotted">Spotted</a> <a href="#starry">Starry</a> <a href="#strawberry">Strawberry</a> <a href="#striped">Striped</a> <a href="#swamp">Swamp Gas</a> <a href="#tomato">Tomato</a> <a href="#transparent">Transparent</a> <a href="#tyrannian">Tyrannian</a> <a href="#usukiboy">Usuki</a> <a href="#usukigirl">Usuki</a> <a href="#water">Water</a> <a href="#white">White</a> <a href="#woodland">Woodland</a> <a href="#wraith">Wraith</a> <a href="#yellow">Yellow</a> <a href="#zombie">Zombie</a> </div> <h1>8-Bit</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> <h1>Alien</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> <h1>Baby</h1> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <div class="pet"> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <h2>Pet Name</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum, massa at rutrum fermentum, massa ligula gravida augue, at tristique libero diam nec quam. Proin vehicula sodales mi non sagittis. Pellentesque ac volutpat nulla. </div> <hr> </div> <a name="add"></a> <div class="page"> <h1>Add Your Pet</h1> <ul> <li>The banner has to be exactly 800x200px. If you have a shorter (in terms of height) banner, you can increase the height of the #content div.</li> <li>The dropdown list does not show up in IE, hence the extra set of links in each "by species" and "by color" section.</li> <li>You can actually add/delete more links in the navigation bar -- just use (li)(a href="url")Link here(/a)(li) as the format. You can also increase/decrease the width if you wish -- go back to #nav ul li {stuff here} within the CSS and look for the width property.</li> <li>For the Newly Added Pet & Updates Section, a scrollbar will appear if you exceed the height alotted.</li> <li>Currently the page anchors are linked to nowhere. To establish an anchor; for example, for the anchor link (a href="#aca)Acara(/a) put a (a name="aca)(/a) right before the section you want to be linked to (usually before a header). The anchor can actually be named anything -- just keep the spelling and capitalization consistent. If you find that the floats are messing up the anchors, stick a (hr) right before the anchor. For guides on anchors, check <a href="/~tizzep">/~tizzep</a> and <a href="/~imgsrc#multi">/~imgsrc#multi</a>.</li> </ul> </div> <a name="sitely"></a> <div class="page"> <h1>Sitely</h1> Template from <a href="/~thatkillsme">That Kills Me</a> | Background from <a href="/~kiarlie">Teacake Backgrounds</a> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/aboutus.phtml">Neopets, Inc.,</a> © 1999-2012. ® denotes Reg. US Pat. & TM Office. All rights reserved. <br><a href="/privacy.phtml">PRIVACY POLICY</a> | <a href="/safetytips.phtml">Safety Tips</a> | <a href="/contact.phtml">Contact Us</a> | <a href="/aboutus.phtml">About Us</a> | <a href="/presskit_form.phtml">Press Kit</a> | <a href="/terms.phtml">Terms and Conditions</a> </div> </div> </div> Multipaged & Anchored layout with dropdown navigation (doesn't show up in IE). Front page has a sidebar for your updates, featured pet, link back, etc. and a section for the newly added. Has two sets of dropdown navgiation -- by species and by color.

• A.A. Linear Preview?

  <style> a { text-decoration: none; color: #666; } a:hover { color: #999; } a img { border-width: 0px; } .sf, td { display: none; } body { text-align: center; overflow: hidden; background: url("http://i972.photobucket.com/albums/ae202/tiptoeboo/Backgrounds/diffgrey-1.jpg") repeat; } h1 { font: 20pt Calibri; color: #666; border-left: 8px #666 solid; padding-left: 10px; text-align: left; margin: 10px; clear: both; } h2 { font: 14pt Calibri; color: #999; border: 1px #999 dotted; border-left: 5px #999 solid; padding-left: 10px; text-align: left; margin: 8px 10px; background: #e0e0e0; } #wrapper { z-index: 1; top: 0; left: 0; height: 100%; width: 100%; overflow: auto; } #wrapper ul { text-align: left; } #container { margin: 0px auto -15px auto; padding-bottom: 20px; width: 900px; border: 0px #000 solid; background: #fff; font: 8pt Verdana; line-height: 18px; color: #333; } #container p { text-align: left; margin: 10px; } #plug { background: #000; margin-top: 26px; } #nav { background: url("http://i.imgur.com/NEy8C.png") repeat; top: 0px; left: -17px; z-index: 2; width: 100%; border-bottom: 1px #666 solid; height: 25px; } #nav ul { border: 0px red solid; margin: 0; padding: 0px; list-style: none; display: inline; float: left; width: 100px; } a.header { border-right: 1px #666 dotted; display: block; padding: 5px; margin-bottom: 2px; } #nav a { color: #fff; font: 9pt Tahoma; text-decoration: none; } #nav a:hover { color: #ABDD37; } #nav ul li { display: none; margin-left: 10px; background: url("http://i.imgur.com/NEy8C.png") repeat; text-align: left; } #nav ul:hover li { display: block; width: 150px; } #nav ul li a { display: block; padding: 6px 0px 6px 10px; } #banner { width: 98.5%; margin: 7px auto; } .column { float: left; width: 50%; height: 250px; overflow: auto; } #updates p { padding-left: 18px; margin: 5px 15px; background: url("http://www.websitebullets.com/bullet/202/5.gif") no-repeat 0px 5px; } #new img { border: 2px #ddd solid; padding: 2px; margin: 9px 0px 0px 9px; } .item { float: left; width: 25%; margin: 15px 0px; text-align: left; font: 8pt Verdana; color: #666; line-height: 18px; } .item img { float: left; margin: 0px 15px; } .item b { display: block; font: 12pt Calibri; text-transform: uppercase; color: #999; } .pet { float: left; width: 33%; margin: 15px 0px; text-align: left; font: 8pt Verdana; color: #666; line-height: 17px; } .pet span { border: 1px #ccc solid; margin: 0px 5px; float: left; overflow: hidden; } .pet span img { margin: -20px -40px -30px -30px; } .pet h3 { margin: 0px; font: 12pt Calibri; text-transform: uppercase; color: #999; text-decoration: underline; } .petb { margin: 5px 0px; height: 160px; } .petb span { float: left; border: 1px #ccc solid; margin: 0px 10px; clear: left; } .petb span img { margin: 1px; } .petb a { font: 9pt Verdana; display: block; width: 20%; float: left; padding: 8px 0px; color: #999; border-bottom: 1px #ddd solid; } .petb a:hover { background: #e0e0e0; } #IEnav { margin: 10px; height: 200px; } #IEnav a { float: left; display: block; width: 12.5%; font: 10pt Tahoma; padding: 5px 0px; border-bottom: 1px #ddd solid; } #IEnav a:hover { color: #666; background: #e0e0e0; } </style> <div id="nav" style="position: absolute;"> <ul style="padding-left: 17px;"> <a href="/" class="header">Home</a> <li><a href="/">» Welcome</a></li> <li><a href="/">» Updates</a></li> <li><a href="/">» Newly Added</a></li> <li><a href="/">» Add Your Pet?</a></li> </ul> <ul> <a href="/" class="header">A - E</a> <li><a href="#aca">» Acara</a></li> <li><a href="#ais">» Aisha</a></li> <li><a href="#blu">» Blumaroo</a></li> <li><a href="#bor">» Bori</a></li> <li><a href="#bru">» Bruce</a></li> <li><a href="#buz">» Buzz</a></li> <li><a href="#chi">» Chia</a></li> <li><a href="#cho">» Chomby</a></li> <li><a href="#cyb">» Cybunny</a></li> <li><a href="#dra">» Draik</a></li> <li><a href="#ele">» Elephante</a></li> <li><a href="#eyr">» Eyrie</a></li> </ul> <ul> <a href="/" class="header">F - J</a> <li><a href="#flot">» Flotsam</a></li> <li><a href="#gel">» Gelert</a></li> <li><a href="#gno">» Gnorbu</a></li> <li><a href="#gra">» Grarrl</a></li> <li><a href="#gru">» Grundo</a></li> <li><a href="#his">» Hissi</a></li> <li><a href="#ixi">» Ixi</a></li> <li><a href="#jet">» Jetsam</a></li> <li><a href="#jub">» Jubjub</a></li> </ul> <ul> <a href="/" class="header">K - O</a> <li><a href="#kac">» Kacheek</a></li> <li><a href="#kau">» Kau</a></li> <li><a href="#kik">» Kiko</a></li> <li><a href="#koi">» Koi</a></li> <li><a href="#kor">» Korbat</a></li> <li><a href="#kou">» Kougra</a></li> <li><a href="#kra">» Krawk</a></li> <li><a href="#kyr">» Kyrii</a></li> <li><a href="#len">» Lenny</a></li> <li><a href="#lup">» Lupe</a></li> <li><a href="#mee">» Meerca</a></li> <li><a href="#moe">» Moehog</a></li> <li><a href="#myn">» Mynci</a></li> <li><a href="#nim">» Nimmo</a></li> <li><a href="#ogr">» Ogrin</a></li> </ul> <ul> <a href="/" class="header">P - T</a> <li><a href="#peo">» Peophin</a></li> <li><a href="#poo">» Poogle</a></li> <li><a href="#pte">» Pteri</a></li> <li><a href="#qui">» Quiggle</a></li> <li><a href="#ruk">» Ruki</a></li> <li><a href="#sco">» Scorchio</a></li> <li><a href="#sho">» Shoyru</a></li> <li><a href="#ske">» Skeith</a></li> <li><a href="#tec">» Techo</a></li> <li><a href="#ton">» Tonu</a></li> <li><a href="#tus">» Tuskaninny</a></li> </ul> <ul> <a href="/" class="header">U - Z</a> <li><a href="#uni">» Uni</a></li> <li><a href="#usu">» Usul</a></li> <li><a href="#woc">» Wocky</a></li> <li><a href="#xwe">» Xweetok</a></li> <li><a href="#yur">» Yurble</a></li> <li><a href="#zaf">» Zafara</a></li> </ul> <ul> <a href="/" class="header">Sitely</a> <li><a href="/">» Link Back</a></li> <li><a href="/">» External Links</a></li> <li><a href="/">» Acknowledgments</a></li> </ul> </div> <div id="wrapper" style="position: absolute;"> <div id="plug"> <a href="/"><img src="http://images.neopets.com/images/homepage_banner.gif"></a> </div> <div id="container"> <img src="http://i162.photobucket.com/albums/t254/shingie/four.jpg" id="banner"><div id="IEnav"> <a href="#aca">Acara</a> <a href="#ais">Aisha</a> <a href="#blu">Blumaroo</a> <a href="#bor">Bori</a> <a href="#bru">Bruce</a> <a href="#buz">Buzz</a> <a href="#chi">Chia</a> <a href="#cho">Chomby</a> <a href="#cyb">Cybunny</a> <a href="#dra">Draik</a> <a href="#ele">Elephante</a> <a href="#eyr">Eyrie</a> <a href="#flot">Flotsam</a> <a href="#gel">Gelert</a> <a href="#gno">Gnorbu</a> <a href="#gra">Grarrl</a> <a href="#gru">Grundo</a> <a href="#his">Hissi</a> <a href="#ixi">Ixi</a> <a href="#jet">Jetsam</a> <a href="#jub">Jubjub</a> <a href="#kac">Kacheek</a> <a href="#kau">Kau</a> <a href="#kik">Kiko</a> <a href="#koi">Koi</a> <a href="#kor">Korbat</a> <a href="#kou">Kougra</a> <a href="#kra">Krawk</a> <a href="#kyr">Kyrii</a> <a href="#len">Lenny</a> <a href="#lup">Lupe</a> <a href="#mee">Meerca</a> <a href="#moe">Moehog</a> <a href="#myn">Mynci</a> <a href="#nim">Nimmo</a> <a href="#ogr">Ogrin</a> <a href="#peo">Peophin</a> <a href="#poo">Poogle</a> <a href="#pte">Pteri</a> <a href="#qui">Quiggle</a> <a href="#ruk">Ruki</a> <a href="#sco">Scorchio</a> <a href="#sho">Shoyru</a> <a href="#ske">Skeith</a> <a href="#tec">Techo</a> <a href="#ton">Tonu</a> <a href="#tus">Tuskaninny</a> <a href="#uni">Uni</a> <a href="#usu">Usul</a> <a href="#woc">Wocky</a> <a href="#xwe">Xweetok</a> <a href="#yur">Yurble</a> <a href="#zaf">Zafara</a> </div> <h1>Welcome Message, yay!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non.sem. Sed interdum nibh in erat tempor id pulvinar ipsum auctor. Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> <h1>Notes About This Layout</h1> <ul> <li>I've precoded three possible uses for this page: a morphing potion listing, a uft/ufa pet directory, and/or a spare pb clothing/dream pet list. Feel free to delete what you don't need :)</li> <li>Note that the save changes button is hidden/underneath the layout. To save changes to your petpage, highlight the last link (Terms and Conditions), tab once (or twice), and hit enter. Alternatively, you could disable styles -- go to <a href="/~ddianc#save">/~Ddianc#save</a> to find out how.</li> <li>The dropdown doesn't appear in IE, hence all those links under the banner.</li> <li>Currently the page anchors are linked to nowhere. To establish an anchor; for example, for the anchor link (a href="#aca)Acara(/a) put a (a name="aca)(/a) right before the section you want to be linked to (usually before a header). The anchor can actually be named anything -- just keep the spelling and capitalization consistent. If you find that the floats are messing up the anchors, stick a (div style="clear:both)(/div) right before the anchor. For guides on anchors, check <a href="/~tizzep">/~tizzep</a> and <a href="/~imgsrc#multi">/~imgsrc#multi</a>.</li> </ul> <div class="column" id="updates"> <h2>Updates</h2> <p>Every time you enclose text within the paragraph tag within the #updates div, it appears like a bullet.</p> <p>Suspendisse congue, mauris dapibus sollicitudin mattis, lorem ligula viverra lectus, ac aliquet nibh massa vel sem.</p> <p>Sed interdum nibh in erat tempor id pulvinar ipsum auctor.</p> <p>Aliquam erat volutpat. Integer id tortor metus. Phasellus at augue mi. Pellentesque egestas aliquam mauris, at viverra tellus aliquet non. </p> </div> <div class="column" id="new"> <h2>Newly Added</h2> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> <a href="http://www.neopets.com/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"></a> </div> <h1>This could be a Morphing Potion Guide!</h1> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <div class="item"> <img src="http://images.neopets.com/items/pot_pteri_faerie.gif"><b>Name of Item</b> Approx Cost, Rarity, etc.</div> <h1>Or a UFT/UFA Directory!</h1> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <div class="pet"> <a href="/petlookup.phtml?pet=petname"><span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <h3>Name of Pet Here</h3></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor hendrerit ligula, eget pulvinar nisl tincidunt vitae. </div> <h1>Or a Dream Pet List/Spare PB Clothes page!</h1> <div class="petb"> <span> <img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> </div> <div class="petb"> <span><img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png"></span> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> <a href="/userlookup.phtml?user=username">usernamehere</a> </div> <h1>Sitely</h1> Template from <a href="/~thatkillsme">That Kills Me</a> | Background from <a href="/~kiarlie">Teacake Backgrounds</a> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/aboutus.phtml">Neopets, Inc.,</a> © 1999-2012. ® denotes Reg. US Pat. & TM Office. <br> All rights reserved. <br><a href="/privacy.phtml">PRIVACY POLICY</a> | <a href="/safetytips.phtml">Safety Tips</a> | <a href="/contact.phtml">Contact Us</a> | <a href="/aboutus.phtml">About Us</a> | <a href="/presskit_form.phtml">Press Kit</a> | <a href="/terms.phtml">Terms and Conditions</a> </div> </div> Linear Layout with a fixed dropdown navigation (dropdown not IE compliant). Coded for three potential uses: morphing potion guide, uft/ufa agency, spare pb clothing/dream pet wishlist. Save changes button hidden -- go here to find out how to save changes.

• Hackneyed Preview?

  <style> a img { border-width: 0px; } p { text-align: left; } a { text-decoration: none; color: #666; } a:hover { color: #999; } td { background: #000; } .sf { display: none; } body { text-align: center; font: 8pt Verdana; line-height: 16px; background: url("http://i972.photobucket.com/albums/ae202/tiptoeboo/Backgrounds/diffgrey-1.jpg") repeat; } #container { width: 800px; height: 520px; border: 1px #aaa solid; margin: 0px auto -48px auto; background: #fff; color: #333; } #h_nav { border: 0px red solid; margin: 15px auto 2px auto; width: 800px; text-align: left; } #h_nav a { font: bold 16pt Georgia; padding: 0px 8px; } #content { width: 78%; border: 0px red solid; height: 520px; float: left; overflow: hidden; } #content_inner { width: 103%; border: 0px orange solid; height: 520px; overflow: auto; } #sidebar { width: 22%; float: right; height: 100%; } #sidebar a { display: block; font: 10pt Tahoma; border: 1px #ccc solid; border-right: 10px #999 solid; padding: 6px 0px; margin: 4px -10px 4px 4px; color: #999; } #sidebar a:hover { border-right: 10px #666 solid; } #banner { width: 620px; margin: 2px; } #container p { text-align: left; margin: 10px 5px; } hr { clear: both; margin: 0; border: none; visibility: hidden; } div.column { float: left; overflow: auto; width: 50%; height: 175px; margin: 3px 0px; } div.sub_column { width: 33%; float: left; overflow: auto; height: 175px; margin: 3px 0px; font: 7.5pt Verdana; line-height: 15px; text-align: left; color: #666; } div.sub_column h2 { text-align: center; } div.sub_column ul { margin: 0; padding: 0; list-style: none; } div.sub_column ul li { padding-left: 18px; background: url("http://www.websitebullets.com/bullet/200/3.gif") no-repeat 7px 4px; margin: 2px 0px; } #updates { width: 49.5%; } #updates p { background: url("http://i53.tinypic.com/2e0pdom.jpg") no-repeat 5px 3px; padding-left: 20px; margin: 3px 0px; } #symbol img { margin: 1px 3px; } ul.yay { margin: 0px 5px 0px 0px; width: 47.8%; padding: 0px; list-style: none; float: right; height: 475px; overflow: auto; text-align: center; } #new { float: left; width: 50%; height: 230px; } #closed { float: left; clear: left; width: 50%; height: 230px; } ul.yay li { padding: 5px; border-bottom: 1px #ccc dotted; } ul.yay li a img { margin: 5px auto; } #submit { border: 1px #C3D6B1 solid; border-width: 1px 0px; background: #DFFFD3; padding: 8px 5px; margin: 0px 5px; } #closed li { text-align: left; padding-left: 15px; margin: 5px 0px; background: url("http://www.websitebullets.com/bullet/200/5.gif") no-repeat 4px 6px; list-style: none; } h2 { font: bold 10pt Verdana; color: #666; margin: 5px; padding: 3px; background: #e0e0e0; border: 1px #ccc solid; } h1 { margin: 5px 0px; font: small-caps 18pt Georgia; color: #444; clear: both; } ul { text-align: left; } .rankings a { margin: 0px 5px; } ul.column { border: 1px #ccc solid; float: left; padding: 0px; height: 430px; margin: 5px; list-style: none; width: 48%; overflow: auto; } ul.column li { padding-left: 15px; margin: 5px 0px; } li.reg { background: url("http://www.websitebullets.com/bullet/200/5.gif") no-repeat 4px 6px; } li.ina { background: url("http://www.websitebullets.com/bullet/222/5.gif") no-repeat 6px 6px; } li.rec { background: url("http://i51.tinypic.com/2dtueso.jpg") no-repeat 5px 5px; } li.ina a { color: #c9c9c9; } li.ina a:hover { color: #999; } </style> <div id="h_nav"> <a href="#home">Home</a> <a href="#class">Classifieds</a> <a href="#sitely">Sitely</a> <a href="/userlookup.phtml?user=username">Contact</a> <a href="/">Leave?</a> </div> <div id="container"> <div id="content"> <div id="content_inner"> <a name="home"></a> <img src="http://i162.photobucket.com/albums/t254/shingie/four.jpg" id="banner"><div class="column"> <h2>Welcome Message</h2> <p><b>Welcome Message, yay! </b> Donec suscipit orci sed nulla faucibus rutrum. Sed velit quam, congue non tristique id, volutpat at quam. Fusce orci risus, varius vel gravida vehicula, convallis in lorem. Donec massa velit, pretium ac fermentum eget, blandit in est.</p> </div> <div class="column" id="updates"> <h2>Updates</h2> <p>Every time you use the paragraph tag within the updates div, it appears like a bullet. </p> <p>Don't let the lack of a scrollbar fool you! Try scrolling with your arrow keys or your scroll wheel if you have a mouse. </p> <p>Eventually a scrollbar will appear in the updates and the column links div if you override the alloted height. </p> <p>To establish an anchor, put (a name="anynamehere")(/a) right before the section you want to be linked to (usually before a header); and to link to it, (a href="#anynamehere")Link here(/a). The anchor can actually be named anything -- just keep the spelling and capitalization consistent.</p> <p> If you find that the floats are messing up the anchors, stick a (hr) right before the anchor. For guides on anchors, check <a href="/~tizzep">/~tizzep</a> and <a href="/~imgsrc#multi">/~imgsrc#multi</a>. </p> </div> <div class="sub_column"> <h2>Get Listed</h2> <ul> <li>Donec suscipit orci sed nulla faucibus rutrum.</li> <li>Sed velit quam, congue non tristique id, volutpat at quam.</li> <li>Fusce orci risus, varius vel gravida vehicula, convallis in lorem.</li> </ul> </div> <div class="sub_column" id="symbol"> <h2>Symbol Key</h2> <img src="http://i51.tinypic.com/2dtueso.jpg"> Recommended Site <br><img src="http://www.websitebullets.com/bullet/222/5.gif"><font style="color: #c9c9c9;">Inactive Site</font> </div> <div class="sub_column"> <h2>Statistics</h2> <ul> <li>587 unique links</li> <li>15 posted site ads</li> <li>15 Affiliates</li> </ul> </div> <hr> <a name="class"></a><h1>Classifieds</h1> <ul class="yay"> <h2>Site Ads</h2> <li id="submit"> <b>Wanna submit an ad?</b> Blah blah blah too lazy to look up lorem ipsum filler text. </li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec suscipit orci sed nulla faucibus rutrum. Sed velit quam, congue non tristique id, volutpat at quam.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Fusce orci risus, varius vel gravida vehicula, convallis in lorem. Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Sed velit quam, congue non tristique id, volutpat at quam.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> <li> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a><br> Donec massa velit, pretium ac fermentum eget, blandit in est.</li> </ul> <div id="new"> <h2>Newly Listed</h2> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <div id="closed"> <h2>Recently Closed</h2> <li><a href="/">Regular Page</a></li> <li><a href="/">Regular Page</a></li> <li><a href="/">Regular Page</a></li> <li><a href="/">Regular Page</a></li> </div> <hr> <a name="one"></a> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <ul class="column"> <li class="reg"><a href="/">Regular Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> </ul> <ul class="column"> <li class="reg"><a href="/">Regular Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> <li class="rec"><a href="/">Recommended Page</a></li> <li class="ina"><a href="/">Inactive Page</a></li> <li class="reg"><a href="/">Regular Page</a></li> </ul> <hr> <a name="sitely"></a> <h1>Sitely</h1> <p> Template From <a href="/~thatkillsme">That Kills Me</a> <br>Organizational elements inspired by <a href="/~Soroptimist">Soroptimist</a> <br>Bullets from <a href="/~snow_faerie_love">Foomanshu</a>, button placeholders from <a href="/~solidarized">The Lunch Box</a>, and background from <a href="/~kiarlie">Teacake Backgrounds</a> </p> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/aboutus.phtml">Neopets, Inc.,</a> © 1999-2012. ® denotes Reg. US Pat. & TM Office. <br> All rights reserved. <br><a href="/privacy.phtml">PRIVACY POLICY</a> | <a href="/safetytips.phtml">Safety Tips</a> | <a href="/contact.phtml">Contact Us</a> | <a href="/aboutus.phtml">About Us</a> | <a href="/presskit_form.phtml">Press Kit</a> | <a href="/terms.phtml">Terms and Conditions</a> <br> </div> </div> <div id="sidebar"> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> <a href="#one">Link Here</a> </div> </div> Anchored, but the content scrollbar is hidden. Has two sets of navigation. Standard link directory with organization derivative of Soroptmist -- pixel recommendation system, rankings, columned links, etc. In IE the navigation links right borders get cut off.

• TKM Special Preview?

  <style> a { color: #666; text-decoration: none; } a:hover { color: #999; } td { background: #000; } body { text-align: center; background: #ccc; font: 8pt Verdana; line-height: 16px; } #container { border: 0px #000 solid; margin: 15px auto -30px auto; width: 850px; color: #444; background: #fff; padding: 8px; } #container p { text-align: left; margin: 0px 0px 10px 0px; } #banner { width: 800px; } h1 { font: 16pt Calibri; text-align: left; clear: both; margin: 5px 0px 5px 0px; background: #444; color: #fff; padding: 5px; } h2 { font: 14pt Calibri; letter-spacing: 3px; padding: 8px 0px 8px 5px; text-align: left; margin: 0px; color: #666; clear: both; } h3 { margin: 8px 0px 3px 0px; font: bold 8pt Verdana; text-indent: 0px; text-align: left; } hr { clear: both; border: 1px #fff solid; } a.reg, a.rec, a.ina { float: left; border: 0px #ccc solid; width: 32%; padding: 3px 0px; color: #666; text-decoration: none; text-align: left; text-indent: 13px; } a.reg:hover, a.rec:hover, a.ina:hover { color: #999; } a.reg, a.ina { background: url("http://www.websitebullets.com/bullet/200/5.gif") no-repeat 3px 8px; } a.ina { color: #c6c6c6; } a.rec { background: url("http://i1186.photobucket.com/albums/z363/thelunchboxgraphics/Resources/p1.png") no-repeat 3px 8px; } .box { float: left; padding: 5px; text-align: left; width: 23%; background: #e0e0e0; margin-right: 5px; border: 1px #ccc solid; line-height: 18px; height: 150px; } .box h3 { margin-top: 0px; } a img { border-width: 0px; } .rankings a { margin-right: 15px; } #updates { height: 200px; margin-bottom: 10px; border: 1px #ccc solid; padding: 5px; background: #e0e0e0; overflow: auto; font: 8pt Verdana; line-height: 16px; } #updates p { margin: 0px 0px 4px 0px; padding-left: 20px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b49.png") no-repeat 7px 5px; } .column { float: left; width: 48.3%; border: 1px #ccc solid; padding: 1px; margin: 20px 5px 0px 5px; } #news hr { border: 1px #ccc solid; border-width: 1px 0px 0px 0px; margin: 10px 5px; } #news a img { float: left; margin: 0px 10px 0px 5px; } #news { clear: both; margin: 20px 5px 5px 5px; border: 1px #ccc solid; text-align: left; } .column div, #news div { overflow: auto; height: 170px; padding-left: 5px; } .column a { margin: 3px; } .column h2, #news h2 { margin-top: -23px; margin-bottom: -2px; z-index: 1; } h2 span { background: #fff; padding: 0px 2px; } #nav { display: block; width: 100%; background: #444; font: 8pt Verdana; padding: 5px 0px 0px 8px; z-index: 2; height: 18px; text-align: left; overflow: hidden; top: 0px; left: 0px; } #nav:hover { height: 100px; } #nav div { float: left; border-left: 1px #666 dotted; padding: 0px 0px 0px 10px; height: 90px; width: 11%; } .h { font: bold 9pt arial !important; letter-spacing: 1px; color: #fff !important; } #home { font: bold 9pt arial; color: #E6BB8D !important; letter-spacing: 1px; } #nav a { color: #999; margin: 1px 0px; display: block; text-indent: 5px; } #nav a:hover { color: #666; } </style> <div id="nav" style="position: fixed;"> <div style="border-width: 0px;"> <a href="/" id="home">Site Name</a> <a href="/">Welcome</a> <a href="/">Classifieds</a> <a href="/">Sitely</a> <a href="/">Credits</a> <a href="/">Contact</a> </div> <div> <a href="/" class="h">Graphics</a> <a href="/">Adoptables</a> <a href="/">Pixels</a> <a href="/">Backgrounds</a> <a href="/">Resources</a> <a href="/">Miscellaneous</a> </div> <div> <a href="/" class="h">Creative Arts</a> <a href="/">Visual Arts</a> <a href="/">Writing & Poetry</a> <a href="/">Magazines</a> </div> <div> <a href="/" class="h">Premades</a> <a href="/">Fonts</a> <a href="/">Petpages</a> <a href="/">Userlookups</a> <a href="/">Multi-layouts</a> </div> <div> <a href="/" class="h">Guides</a> <a href="/">Dailies & NP</a> <a href="/">HTML/CSS</a> <a href="/">General</a> <a href="/">Games</a> <a href="/">Graphics</a> </div> <div> <a href="/" class="h">Directories</a> <a href="/">Adopt Agencies</a> <a href="/">General</a> <a href="/">Guild</a> <a href="/">Pet Listings</a> </div> <div> <a href="/" class="h">Requests</a> <a href="/">Buttons</a> <a href="/">Banner</a> <a href="/">Graphics</a> <a href="/">Petpages</a> <a href="/">Reviews</a> </div> <div> <a href="/" class="h">Misc </a><a href="/"></a> <a href="/">Untaken Names</a> <a href="/">Competitions</a> <a href="/">Screenies</a> </div> </div> <div id="container"> <img src="http://i162.photobucket.com/albums/t254/shingie/ohay-2.jpg" width="100%"><h1>Witty tagline may lurk here...</h1> <h2>Welcome Message</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo eget mauris malesuada dapibus. Nullam elementum adipiscing arcu, id sagittis enim lacinia consectetur. Morbi pharetra, lacus nec rhoncus tristique, elit est sodales elit, ut bibendum est enim vel lacus. Morbi pretium, nunc sed molestie hendrerit, purus tortor tristique nulla, a bibendum felis augue sed lacus. Nulla pretium, felis eget sollicitudin pulvinar, nibh nisi lacinia quam, eu faucibus quam quam ut leo.</p> <p> Vestibulum viverra metus a elit porttitor et aliquam urna fermentum. Etiam pulvinar porttitor condimentum. Duis egestas, elit id aliquet volutpat, mi eros pulvinar dui, eget gravida nibh nunc accumsan elit. </p> <h2>Additional Information</h2> <div class="box"> <h3>Symbol Key</h3> <img src="http://i1186.photobucket.com/albums/z363/thelunchboxgraphics/Resources/p1.png"> Recommended <br><img src="http://www.websitebullets.com/bullet/200/5.gif"><font color="#c6c6c6">Inactive</font> </div> <div class="box"> <h3>Statistics</h3> <b>585</b> sites listed <br>Established Sept 15, 2011 <br>Best viewed in Firefox </div> <div class="box"> <h3>Get Listed</h3> Nunc leo tellus, rhoncus eu molestie nec, lobortis ut justo. Nunc leo tellus, rhoncus eu molestie nec, lobortis ut justo. </div> <div class="box"> <h3>Link Back</h3> <img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"><br>Or this could serve as a featured site section? </div> <h2>Updates</h2> <div id="updates"> <h3>Monday, July 17, 2011</h3> <p> Maecenas libero metus, tincidunt vitae semper in, convallis nec dolor. Etiam placerat, nisi euismod dapibus tempus, tortor nulla elementum nibh, quis mollis purus nibh eget purus.</p> <p>Praesent lobortis, libero faucibus tincidunt auctor, risus mauris mollis magna, vel interdum lorem odio faucibus ante. </p> <p>Aliquam eget pharetra elit. Integer ullamcorper leo lacinia mi vestibulum pretium. Nunc leo eros, molestie nec elementum at, pretium at lectus. Sed et arcu neque.</p> <p>Duis pretium, elit eu mattis sollicitudin, leo felis placerat sapien, ut adipiscing purus purus eu lacus. Vivamus in metus enim, at volutpat risus.</p> <h3>Monday, July 17, 2011</h3> <p> Maecenas libero metus, tincidunt vitae semper in, convallis nec dolor. Etiam placerat, nisi euismod dapibus tempus, tortor nulla elementum nibh, quis mollis purus nibh eget purus.</p> <p>Praesent lobortis, libero faucibus tincidunt auctor, risus mauris mollis magna, vel interdum lorem odio faucibus ante. </p> <p>Aliquam eget pharetra elit. Integer ullamcorper leo lacinia mi vestibulum pretium. Nunc leo eros, molestie nec elementum at, pretium at lectus. Sed et arcu neque.</p> <p>Duis pretium, elit eu mattis sollicitudin, leo felis placerat sapien, ut adipiscing purus purus eu lacus. Vivamus in metus enim, at volutpat risus.</p> </div> <h1>Classifieds</h1> <div class="column"> <h2 style="position: relative;"><span>Newly Listed</span></h2> <div> <h3>Monday, July 17 2011</h3> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <h3>Monday, July 17 2011</h3> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <h3>Monday, July 17 2011</h3> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <h3>Monday, July 17 2011</h3> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> </div> <div class="column" style="margin-right: 0px; text-align: left;"> <h2 style="position: relative;"><span>Recently Closed</span></h2> <div> <h3>Monday, July 17 2011</h3> <a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> <h3>Monday, July 17 2011</h3> <a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> <h3>Monday, July 17 2011</h3> <a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> <br><a href="/">Link Here</a> </div> </div> <hr> <div id="news"> <h2><span>Site Ads</span></h2> <div> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo eget mauris malesuada dapibus. Integer pulvinar adipiscing tincidunt. Phasellus viverra congue tortor, sit amet tincidunt orci adipiscing at. <hr> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo eget mauris malesuada dapibus. Nunc leo tellus, rhoncus eu molestie nec, lobortis ut justo. <hr> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo eget mauris malesuada dapibus. Etiam pulvinar porttitor condimentum. Duis egestas, elit id aliquet volutpat, mi eros pulvinar dui, eget gravida nibh nunc accumsan elit. <hr> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo eget mauris malesuada dapibus. Etiam pulvinar porttitor condimentum. Duis egestas, elit id aliquet volutpat, mi eros pulvinar dui, eget gravida nibh nunc accumsan elit. <hr> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar porttitor condimentum. Duis egestas, elit id aliquet volutpat, mi eros pulvinar dui, eget gravida nibh nunc accumsan elit. </div> </div> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h1>Heading Here</h1> <div class="rankings"> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> <a href="/"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bh20.png"></a> </div> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h2>Subheading Here</h2> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="ina">Inactive Page</a> <a href="/" class="rec">Recommended Page</a> <a href="/" class="reg">Regular Page</a> <hr> <h1>Sitely</h1> <h2>Link Back</h2> :D <h2>Affiliates</h2> :D <h2>My Other Pages</h2> :D <h1>Credits</h1> Template from <a href="/~thatkillsme">That Kills Me.</a> | Bullets from <a href="/~La_Roque">The Lunch Box</a> | Organizational elements & classifieds inspired by <a href="/~Soroptimist">Soroptimist</a>. </div> Linear layout. Designed for the typical link directory: includes four columns for the welcome booth, an update log, a stylist classifieds section, and rankings for sites -- inspired by Soroptimist. Banner should be 850px in width and of any height. Navigation does not stick in IE as you scroll, nor do more links appear on hover.

Newspaper

• Single Column Preview?

  <style> h1 { clear: both; margin: 10px 0px; font: 24pt "Times New Roman"; text-align: left; border-left: 25px #00B7FF solid; padding-left: 10px; } h2 { font: 18pt "Times New Roman"; text-align: left; margin: 5px 0px; } body { text-align: center; font: 0px Verdana; } td { background: #000; } .sf { display: none; } #container { font: 9pt verdana; line-height: 22px; width: 83%; margin: 15px auto; background: #fff; padding: 5px; } p { text-align: left; text-indent: 20px; } #title { font: small-caps 45pt "Times new Roman"; letter-spacing: 1px; padding: 10px 0px; background: #00B7FF; color: #fff; } #subhead { font: 9pt Verdana; letter-spacing: 2px; padding: 5px; border-bottom: 1px #ccc solid; height: 15px; } #tagline { float: right; text-align: left; display: inline; color: #999; } #date { float: left; font: small-caps 9pt "Times New Roman"; display: inline; } .column { width: 31%; float: left; margin: 5px 0px; text-align: justify; } #middle { border-left: 1px #ccc solid; border-right: 1px #ccc solid; padding: 0px 10px; margin: 0px 10px; background: #E0F6FF; } #picture_left, #picture_right { padding: 3px; margin: 5px; border: 1px #ccc solid; font: italic 9pt "Times New Roman"; } #picture_left { float: left; } #picture_right { float: right; } .footer_column { float: left; width: 25%; text-align: left; padding-bottom: 15px; } .footer_column a { display: block; width: 80%; color: #00B7FF; font: 9pt Georgia; padding: 3px; text-decoration: none; border-bottom: 1px #ccc dotted; } .footer_column a:hover { background: #DEDEDE; } #copyright { clear: both; display: block; font: 8pt Verdana; padding: 5px; color: #999; margin: -5px; } </style> <div id="container"> <div id="title"> Simple. Clean. Practical. </div> <div id="subhead"> <div id="date"> Last Updated Monday, July 10th, 2011 </div> <div id="tagline"> All morons hate it when you call them a moron. </div> </div> <h1>Heading Here</h1> <div id="picture_right"> <img src="http://images.neopets.com/games/new_tradingcards/lg_kikoracing.gif" style="height: 200px;"><br>Commentary caption thing here. </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo metus nisi. Duis congue interdum ligula lobortis lacinia. Aliquam rhoncus, mi et fermentum porttitor, enim enim mollis mi, hendrerit adipiscing justo mi posuere nisi. Duis quis mi urna. </p> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id ante non quam lobortis molestie eu non sapien. Etiam mollis risus cursus tellus condimentum facilisis. Praesent lectus ante, viverra id feugiat ac, imperdiet eu nibh. Pellentesque sed leo eget dui convallis congue. Etiam scelerisque ultrices sapien, egestas gravida odio condimentum sit amet.</p> <p> Phasellus quis lorem ut elit rhoncus posuere in in dui. Etiam commodo commodo sapien, ac volutpat felis mollis quis. Aliquam erat volutpat. Curabitur mollis augue at mauris commodo pretium. Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> <p> Phasellus quis lorem ut elit rhoncus posuere in in dui. Etiam commodo commodo sapien, ac volutpat felis mollis quis. Aliquam erat volutpat. Curabitur mollis augue at mauris commodo pretium. Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id ante non quam lobortis molestie eu non sapien. Etiam mollis risus cursus tellus condimentum facilisis. Praesent lectus ante, viverra id feugiat ac, imperdiet eu nibh. Pellentesque sed leo eget dui convallis congue. Etiam scelerisque ultrices sapien, egestas gravida odio condimentum sit amet.</p> <div class="column"> <h2>Subheading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula purus, porttitor consectetur ultrices eu, porta vitae lectus. Suspendisse ut euismod lorem. Sed fermentum arcu ut arcu iaculis at pharetra lectus pellentesque.</p> <p>Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> </div> <div class="column" id="middle"> <h2>Subheading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula purus, porttitor consectetur ultrices eu, porta vitae lectus. Suspendisse ut euismod lorem. Sed fermentum arcu ut arcu iaculis at pharetra lectus pellentesque.</p> <p>Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> </div> <div class="column"> <h2>Subheading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula purus, porttitor consectetur ultrices eu, porta vitae lectus. Suspendisse ut euismod lorem. Sed fermentum arcu ut arcu iaculis at pharetra lectus pellentesque.</p> <p>Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> </div> <h1>Heading Here</h1> <div id="picture_left"> <img src="http://images.neopets.com/games/new_tradingcards/lg_mynci_day_2005.gif" style="height: 150px;"><br>Commentary caption thing here. </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo metus nisi. Duis congue interdum ligula lobortis lacinia. Aliquam rhoncus, mi et fermentum porttitor, enim enim mollis mi, hendrerit adipiscing justo mi posuere nisi. Duis quis mi urna. </p> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id ante non quam lobortis molestie eu non sapien. Etiam mollis risus cursus tellus condimentum facilisis. Praesent lectus ante, viverra id feugiat ac, imperdiet eu nibh. Pellentesque sed leo eget dui convallis congue. Etiam scelerisque ultrices sapien, egestas gravida odio condimentum sit amet.</p> <p> Phasellus quis lorem ut elit rhoncus posuere in in dui. Etiam commodo commodo sapien, ac volutpat felis mollis quis. Aliquam erat volutpat. Curabitur mollis augue at mauris commodo pretium. Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> <p>Phasellus quis lorem ut elit rhoncus posuere in in dui. Etiam commodo commodo sapien, ac volutpat felis mollis quis. Aliquam erat volutpat. Curabitur mollis augue at mauris commodo pretium. Etiam ut ligula neque, eu lacinia eros. Nullam mauris ligula, dignissim nec euismod quis, consequat venenatis diam. Mauris eu diam quis magna consectetur varius id eget sem. Curabitur et facilisis nisl. Suspendisse elementum adipiscing sem vitae gravida. Mauris rutrum ultricies molestie.</p> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id ante non quam lobortis molestie eu non sapien. Etiam mollis risus cursus tellus condimentum facilisis. Praesent lectus ante, viverra id feugiat ac, imperdiet eu nibh. Pellentesque sed leo eget dui convallis congue. Etiam scelerisque ultrices sapien, egestas gravida odio condimentum sit amet.</p> <div class="footer_column"> Affiliates <a href="/">Brother</a> <a href="/">Sister</a> <a href="/">Cousin-Once-Removed</a> <a href="/">Uncle</a> <a href="/">Father-in-Law</a> <a href="/">Great Grandfather</a> </div> <div class="footer_column"> My Pages <a href="/">Chocolate</a> <a href="/">Rocky Road</a> <a href="/">Strawberry</a> </div> <div class="footer_column"> Listed At <a href="/">Pancakes and Ducks</a> <a href="/">Field Trips</a> <a href="/">Rainbow Sprinkles</a> <a href="/">Jelly World</a> </div> <div class="footer_column"> Neopets <a href="/">Back to Neopets</a> <br>Layout Template From <a href="/~thatkillsme'">That Kills Me</a> </div> <div id="copyright"> NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2011. ® denotes Reg. US Pat. & TM Office. All rights reserved. </div> </div> Linear layout, with simple coding that is easy to edit. Spacing is a little off in IE; some elements do not align perfectly. Images floated to the left/right have a little space where you can insert a caption However, everything is still fully functional. The Neopets copyright footer is crucial in holding together the layout; do not remove. Includes a professionally styled footer.

• Three ColumnPreview?

  <style> a { color: #00B3FC; text-decoration: none; } a:hover { color: #F0C390; } td { background: #000; } .sf { display: none; } p { text-align: left; margin-bottom: 5px; } #container { margin: 0px auto -85px auto; border: 1px #999 solid; border-width: 0px 1px; font: 8pt Verdana; line-height: 18px; width: 1000px; padding: 15px 10px; background: #fff; } #sidebar { float: left; width: 17.6%; background: #E0F6FF; padding: 5px 5px 20px 5px; margin: 5px; text-align: justify; } #content { float: left; width: 59.8%; padding: 5px; } #footer { clear: both; color: #999; padding-top: 10px; } body { text-align: center; background: #ccc; } #marquee_container { width: 595px; height: 200px; border: 0px #000 solid; } #marquee_container a { float: right; clear: right; display: block; height: 47px; width: 150px; margin: 0px 1px 1px 1px; padding: 2px 0px 0px 3px; color: #fff; background: #86AFDE; font: 7.5pt Verdana; text-decoration: none; text-align: left; } #marquee_container a:hover { background: #2F73C1; font: bold 7.5pt Verdana; } a span { display: none; z-index: -1; top: 0px; left: 0px; } a span img { border: 0; } a:hover span { display: block; z-index: 1; } #main_banner { top: 0px; left: 0px; z-index: 0; } #tagline { border-top: 1px #FFD54D solid; border-bottom: 1px #FFD54D solid; background: #FAF2D2; font: small-caps bold 10pt Verdana; padding: 5px 0px; display: block; width: 595px; margin: 10px 0px; color: #D6B246; } #sidebar h1 { font: small-caps bold 12pt "Times New Roman"; color: #666; margin: 15px 0px -5px 0px; border-left: 0; padding: 3px 5px; border-bottom: 1px #ccc solid; text-align: left; } h1 { font: small-caps bold 20pt "Times New Roman"; text-align: left; border-left: 5px #B1DEF0 solid; padding-left: 5px; margin: 10px 0px 0px 5px; clear: both; } h2 { margin: 0px 0px 5px 0px; font: bold 9pt Verdana; } .column { text-align: justify; float: left; width: 31.5%; margin-right: 5px; margin-bottom: 10px; } #middle { border-left: 1px #ccc solid; border-right: 1px #ccc solid; padding: 0px 5px; margin: 0px 5px; } </style> <div id="container"> <div id="sidebar"> <h1> » Top News</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet diam magna, sed convallis ipsum. Pellentesque semper pretium leo, quis congue mauris dignissim a. </p> <p>Curabitur nisl elit, eleifend quis pharetra vitae, pulvinar non mauris. Pellentesque laoreet feugiat risus vitae volutpat. Donec consectetur nulla a lectus fringilla at vehicula justo eleifend. </p> <h1> » Top News</h1> <p> Maecenas condimentum vehicula elementum. Phasellus nec quam est. Maecenas sodales diam ac neque ornare ut pretium odio placerat. </p> <h1> » Top News</h1> <p>Duis posuere sagittis ornare. Vivamus massa risus, feugiat non porttitor sed, placerat eget mi. Nam vestibulum sem id arcu accumsan viverra. Donec risus risus, sodales eu tempor in, adipiscing sit amet sem.</p> <p> Suspendisse fermentum, sapien sit amet dapibus malesuada, lacus elit vestibulum augue, eget tristique mi neque in nunc.</p> </div> <div id="content"> <div id="marquee_container" style="position: relative;"> <img src="http://images.neopets.com/homepage/marquee/altadorcup_2011_v2.jpg" id="main_banner" style="position: absolute;"><a href="/~Xazo">Play for Your Team in the Altador Cup! <span style="position: absolute;"><img src="http://images.neopets.com/homepage/marquee/altadorcup_2011_v2.jpg"></span> </a> <a href="/~Xazo">Altador Cup VIP Passes <span style="position: absolute;"><img src="http://images.neopets.com/homepage/marquee/ncmall_ac_vippass_2011_v4.jpg"></span> </a> <a href="/~Xazo">New Game Challenge: S.M.E.L.T. <span style="position: absolute;"> <img src="http://images.neopets.com/homepage/marquee/ngc_game_smelt.jpg"></span></a> <a href="/~Xazo">Explore the world of Habitariums! <span style="position: absolute;"> <img src="http://images.neopets.com/homepage/marquee/habitarium_2011_v2.jpg" style="position: absolute;"></span></a> </div> <div id="tagline"> Really Important Message Should Go Here. </div> <h1>Heading Here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet diam magna, sed convallis ipsum. Pellentesque semper pretium leo, quis congue mauris dignissim a. Curabitur nisl elit, eleifend quis pharetra vitae, pulvinar non mauris. Pellentesque laoreet feugiat risus vitae volutpat. Donec consectetur nulla a lectus fringilla at vehicula justo eleifend. </p> <p> Vivamus nibh orci, placerat id mattis ut, porttitor non neque. Pellentesque metus magna, vestibulum eget tristique quis, porta non leo. Quisque at libero eros, sit amet interdum elit. Vivamus in lorem ut leo hendrerit tempor quis sit amet libero.</p> <div class="column"> <h2>Subtopic</h2> Nam sit amet lacus libero. Cras vitae diam sapien, a mattis quam. Sed lacus ipsum, ullamcorper eget suscipit at, imperdiet vitae nisl. Aliquam quam ante, venenatis dapibus ullamcorper eget, porttitor eget augue. Fusce ultrices varius enim. </div> <div class="column" id="middle"> <h2>Subtopic</h2> Nam sit amet lacus libero. Cras vitae diam sapien, a mattis quam. Sed lacus ipsum, ullamcorper eget suscipit at, imperdiet vitae nisl. Aliquam quam ante, venenatis dapibus ullamcorper eget, porttitor eget augue. Fusce ultrices varius enim. </div> <div class="column"> <h2>Subtopic</h2> Nam sit amet lacus libero. Cras vitae diam sapien, a mattis quam. Sed lacus ipsum, ullamcorper eget suscipit at, imperdiet vitae nisl. Aliquam quam ante, venenatis dapibus ullamcorper eget, porttitor eget augue. Fusce ultrices varius enim. </div> <h1>Heading Here</h1> <p> Nam a luctus nisi. Morbi lectus dolor, tempor vitae consequat id, elementum et eros. Integer iaculis nunc tristique est sodales malesuada.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet diam magna, sed convallis ipsum. Pellentesque semper pretium leo, quis congue mauris dignissim a. Curabitur nisl elit, eleifend quis pharetra vitae, pulvinar non mauris. Pellentesque laoreet feugiat risus vitae volutpat. Donec consectetur nulla a lectus fringilla at vehicula justo eleifend. </p> <p> Vivamus nibh orci, placerat id mattis ut, porttitor non neque. Pellentesque metus magna, vestibulum eget tristique quis, porta non leo. Quisque at libero eros, sit amet interdum elit. Vivamus in lorem ut leo hendrerit tempor quis sit amet libero.</p> </div> <div id="sidebar"> <h1> » Top News</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet diam magna, sed convallis ipsum. Pellentesque semper pretium leo, quis congue mauris dignissim a. </p> <p>Curabitur nisl elit, eleifend quis pharetra vitae, pulvinar non mauris. Pellentesque laoreet feugiat risus vitae volutpat. Donec consectetur nulla a lectus fringilla at vehicula justo eleifend. </p> <h1> » Top News</h1> <p> Maecenas condimentum vehicula elementum. Phasellus nec quam est. Maecenas sodales diam ac neque ornare ut pretium odio placerat. </p> <h1> » Top News</h1> <p>Duis posuere sagittis ornare. Vivamus massa risus, feugiat non porttitor sed, placerat eget mi. Nam vestibulum sem id arcu accumsan viverra. Donec risus risus, sodales eu tempor in, adipiscing sit amet sem.</p> <p> Suspendisse fermentum, sapien sit amet dapibus malesuada, lacus elit vestibulum augue, eget tristique mi neque in nunc.</p> </div> <div id="footer"> NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2011. ® denotes Reg. US Pat. & TM Office. All rights reserved. <br>Layout Template from <a href="/~thatkillsme">That Kills Me</a><a>. </a> </div> </div> Linear layout. The Neo-inspired marquee rollover provides a fancy way of advertising current events that are going on, subdivisions of your newspaper, etc. Customisable with other banners (keep image sizes consistent) and text. Spacing is a little off in IE; some elements do not align perfectly. However, everything is still fully functional. The Neopets copyright footer is crucial in holding together the layout; do not remove.

---

Personal Pages

• Wishlist Preview?

  <style> td { background: #000; padding: 5px; } a { color: #2D9DFF; text-decoration: none; } a:hover { color: #7AC1FF; } body { text-align: center; font: 8pt Verdana; line-height: 18px; color: #666; } #container { width: 1000px; border: 0px #999 solid; margin: 20px auto -45px auto; } hr { clear: both; border: 1px #ccc solid; border-width: 1px 0px 0px 0px; width: 100%; } h1 { font: 18pt Calibri; clear: both; text-align: left; background: url("http://www.websitebullets.com/bullet/448/5.gif") no-repeat 5px 8px; text-indent: 25px; } #title { font: 32pt Calibri; padding: 15px 0px; border: 5px #ddd solid; } #tkm { border-top: 5px #ddd solid; clear: both; padding: 10px 0px; width: 100% !important; } ul { list-style: none; padding: 0; margin: 0; } ul li { float: left; width: 25%; margin: 10px 0px; text-align: left; } ul li img { float: left; border: 1px #ccc solid; margin: 0px 10px; } div.pet { height: 300px; margin: 10px 0px; } div.pet img { float: left; } div.pet li { width: 23% !important; } </style> <div id="container"> <div id="title">My Wishlist</div> <h1>Heading Here</h1> <ul> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> </ul> <h1>Heading Here</h1> <ul> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> </ul> <h1>Pet Name</h1> <div class="pet"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/4.png"><ul> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> </ul> </div> <h1>Pet Name</h1> <div class="pet"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/4.png"><ul> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> <li> <img src="http://images.neopets.com/items/mall_giftbox_plainredbow.gif"><b>Name of Item here</b> <br>Rarity 99 </li> </ul> </div> <div id="tkm"> Template from <a href="/~thatkillsme">That Kills Me.</a> </div> </div> Linear layout. 100% table free and easy to edit for the CSS newb. You can remove/add without worrying about table row/cell confinements. To get the large version image url of your pets, copy the image URL from your lookup of the pet you want; in the URL, near the end it should say *mqlt3c/1/2.png* -- change the 2 to 4. This wishlist also is designed to help you plan future customizations for your pets.

• About Me Icon Preview?

  <style> body { text-align: center; font: 3pt Verdana; } .sf { font: 5pt Verdana; } td { background: #000; } a { text-decoration: none; color: #666; } a:hover { color: #999; } #container { background: #fff; margin: 0 auto; width: 800px; height: 510px; font: 8pt Verdana; } #content_container p { line-height: 14px; margin: 10px 0px 10px 0px; text-indent: 10px; } #content_container { left: 250px; top: 70px; height: 415px; width: 520px; overflow: hidden; text-align: left; } .content_section { height: 415px; overflow: auto; } #sidebar { top: 220px; left: 45px; width: 175px; height: 265px; overflow: auto; font: 7pt Verdana; text-align: left; border-bottom: 2px #ccc solid; padding: 0px; } #nav { top: 25px; left: 45px; height: 30px; width: 725px; text-align: right; padding: 10px 0px 0px 0px; } #nav a { color: #fff; background: #363636; padding: 11px 8px 9px 8px; margin: 0px; text-decoration: none; font: 15px Verdana; border-bottom: 2px #363636 solid; } #nav a:hover { background: #666; } #icon_top, #icon_bottom { padding: 1px; border: 1px #000 solid; background: #fff; } #icon_top { z-index: 2; top: 80px; left: 70px; } #icon_bottom { z-index: 1; top: 100px; left: 95px; } #credit { top: 495px; left: 620px; font: 6pt "small fonts"; text-transform: uppercase; } h1 { margin: 5px 0px 0px 0px; font: 16px Verdana; color: #666; background: #E8E8E8; border-top: 1px #ccc solid; border-left: 1px #ccc solid; padding-left: 10px; } h2 { font: 9px Verdana; color: #999; text-align: right; margin: 0px 0px 15px 0px; } </style> <div id="container" style="position: relative;"> <img src="http://i1104.photobucket.com/albums/h327/eponarf/neo-30.png" id="icon_top" style="position: absolute;"><img src="http://i1104.photobucket.com/albums/h327/eponarf/neo-31.png" id="icon_bottom" style="position: absolute;"><div id="nav" style="position: absolute;"> <a href="#a">About Me</a> <a href="#bl">Blog</a> <a href="#i">Image Gallery</a> <a href="#bk">Bookmarks</a> <a href="#p">My Pets</a> <a href="/userlookup.phtml?user=shinning123">Lookup</a> </div> <div id="sidebar" style="position: absolute;"> <h1>Welcome!</h1> <h2>Witty subheading goes here.</h2> <p>You can put some text here if you want. </p> </div> <div id="content_container" style="position: absolute;"> <a name="a"></a> <div class="content_section"> Your about me section goes here. Type whatever you want </div> <a name="bl"></a> <div class="content_section"> <h1>This is a Blog Entry</h1> <p> Text here. </p> <h2>Witty subheading goes here.</h2> <h1>This is a Blog Entry</h1> <p> Text here. </p> <h2>Witty subheading goes here.</h2> </div> <a name="i"></a> <div class="content_section"> Your image gallery goes here. This is where you put your collection of favorite icons or images, funny gifs, interesting screenies of moments you want to remember, etc. here. </div> <a name="bk"></a> <div class="content_section"> Your bookmarks goes here. This is where you put links to all your favorite petpages that you often frequent :) </div> <a name="p"></a> <div class="content_section"> Your pets section goes here. This is where you put all the little blurbs about your extended family of pets. </div> </div> <div id="credit" style="position: absolute;"> Layout Template from <a href="/~thatkillsme">[That Kills Me.]</a><div> </div> </div> </div> Multi-paged and anchored. Includes two overlapping icons with a sidebar underneath. You can easily change the icons if you get bored of looking at them. Some other sections you can replace include but are not limited to: Avatars, Wishlist/Goals, Dailies, Account Accomplishments, To-do List. Where it says lookup link to your own lookup.

• All-In-OnePreview?

  <style> a img { border-width: 0px; } a { color: #666; text-decoration: none; } a:hover { color: #999; } body { font: 8pt Verdana; line-height: 18px; text-align: center; color: #444; } td { background: #000; } #container { width: 1000px; margin: 5px auto -40px auto; } #center { width: 60%; float: left; } .sidebar { width: 20%; float: left; font: 7.5pt Verdana; line-height: 16px; text-align: left; } #center p { text-align: left; margin: 0px 0px 10px 0px; } .sidebar p { margin: 0px 0px 5px 0px; text-align: left; } .sidebar img { float: left; clear: left; width: 50px; margin: 5px 5px 5px 0px; } .module { margin: 10px 5px 0px 5px; border: 1px #999 solid; padding: 5px; background: #fff; } h1 { font: bold 10pt Verdana; text-align: left; margin: -5px -5px 5px -5px; color: #333; padding: 2px 5px 2px 5px; background: #ddd; } hr { margin: 2px 0px; border: 1px #ccc solid; border-width: 1px 0px 0px 0px; clear: both; } #dailies hr, #games hr { border: 1px #ccc dotted; border-width: 1px 0px 0px 0px; } #tkm { visibility: hidden; } #nf a { display: block; margin: 3px 0px; color: #444; } #nf b { display: block; margin: -1px 0px; } #nf a:hover { color: #444; } #pet_list { height: 310px; overflow: hidden; } #pet_list a { margin: -1px; } #pet_list a img { float: left; margin: 7px 0px 0px 7px; } #pet_list hr { visibility: hidden; } #pet_list a span { display: none; } #pet_list a:hover span { display: block; left: 11px; top: 142px; width: 550px; height: 160px; overflow: hidden; text-align: left; color: #444; } a:hover span img { margin: 4px 8px 4px 0px !important; float: left; } #blog div { height: 200px; overflow: auto; margin: -3px; padding: 5px; line-height: 20px; } #blog h2 { float: left; width: 38px; background: #ddd; border: 1px #ccc solid; padding: 2px; margin: 5px 8px 0px 0px; font: 7pt Verdana; text-transform: uppercase; text-align: center; } #blog h2 b { display: block; font: 14pt Verdana; } #bookmarks a { display: block; background: url("http://www.websitebullets.com/bullet/810/5.gif") no-repeat 5px 6px; padding: 3px 0px 3px 19px; margin: 2px -5px; border-bottom: 1px #ccc dotted; } textarea { background: #e0e0e0; color: #666; border: 0px; width: 100%; height: 300px; overflow: auto; font: 9pt Courier New; } #dailies, #games { overflow: hidden; } #dailies a, #games a { float: left; width: 24%; margin: 3px 0px; text-align: left; } #avatars a { padding: 5px; margin: -1px; } #games a { font: 7pt Verdana; } #games a i { font: normal 7pt Verdana; color: #999; display: block; } #games a img { float: left; width: 50px; margin-right: 5px; } #about { text-align: center; } #about img { float: none; margin: 3px; width: auto; } </style> <div id="container"> <div class="sidebar"> <div class="module" id="about"> <h1>About Me</h1> <a href="/~waffull"><img src="http://img694.imageshack.us/img694/5203/mallow.png"></a><a href="/~waffull"><img src="http://img834.imageshack.us/img834/4286/honey.png"></a><a href="/~Sugarrush"><img src="http://i55.tinypic.com/2wcpkiq.jpg"></a> <p>Type a little bit about yourself here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu velit dolor, ut varius eros. Vestibulum eros felis, molestie vel blandit a, aliquet nec leo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu velit dolor, ut varius eros. In tincidunt pharetra massa, non dapibus augue mattis sit amet. Nulla lobortis pretium pharetra. </p> </div> <div class="module"> <h1>Interests</h1> <b>TV Shows</b> Sed tristique lectus eget diam blandit laoreet. Curabitur enim odio, fringilla vel placerat vitae, convallis nec nunc. <hr> <b>Movies</b> In tincidunt pharetra massa, non dapibus augue mattis sit amet. Nulla lobortis pretium pharetra. <hr> <b>Books</b> Fusce eleifend nibh in tortor iaculis vitae pretium enim suscipit. <hr> <b>Video Games</b> Vivamus dapibus sagittis mauris, faucibus ultrices nunc sodales at. <hr> <b>Music</b> Donec quis convallis eros. Ut accumsan auctor porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="module" id="nf"> <h1>Neofriends</h1> <a href="/userlookup.phtml?user=username"> <img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b> witty description, reminder, or blurb may go here. </a> <a href="/userlookup.phtml?user=username"> <img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b> witty description, reminder, or blurb may go here. </a> <a href="/userlookup.phtml?user=username"> <img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b> witty description, reminder, or blurb may go here. </a> <a href="/userlookup.phtml?user=username"> <img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b> witty description, reminder, or blurb may go here. </a> </div> </div> <div id="center"> <div class="module" id="pet_list" style="position: relative;"> <h1>My Pets (hover for larger preview)</h1> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/mbnhlmnz/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/xrmqlt3c/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/xrmqlt3c/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/nmkndh33/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/nmkndh33/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/9r6fd7w5/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/9r6fd7w5/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/zchg82ch/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/zchg82ch/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/72k87q4j/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/72k87q4j/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/mbnhlmnz/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/xrmqlt3c/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/xrmqlt3c/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/nmkndh33/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/nmkndh33/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/9r6fd7w5/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/9r6fd7w5/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/zchg82ch/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/zchg82ch/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/72k87q4j/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/72k87q4j/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/mbnhlmnz/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/xrmqlt3c/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/xrmqlt3c/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/nmkndh33/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/nmkndh33/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/9r6fd7w5/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/9r6fd7w5/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/zchg82ch/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/zchg82ch/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/72k87q4j/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/72k87q4j/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/72k87q4j/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/72k87q4j/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=petname"><img src="http://pets.neopets.com/cp/72k87q4j/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cp/72k87q4j/1/2.png">Witty blurb or description goes here.</span></a> </div> <div class="module" id="blog"> <h1>Blog</h1> <div> <h2>Oct<b>21</b>2011</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu velit dolor, ut varius eros. Vestibulum eros felis, molestie vel blandit a, aliquet nec leo. In tincidunt pharetra massa, non dapibus augue mattis sit amet. Nulla lobortis pretium pharetra. Sed tristique lectus eget diam blandit laoreet. Curabitur enim odio, fringilla vel placerat vitae, convallis nec nunc. Fusce eleifend nibh in tortor iaculis vitae pretium enim suscipit. </p> <hr> <h2>Oct<b>21</b>2011</h2> <p> Vivamus dapibus sagittis mauris, faucibus ultrices nunc sodales at. Aliquam ornare erat in quam scelerisque auctor. In sed tortor non lectus egestas porta. Donec quis convallis eros. Ut accumsan auctor porta. Mauris convallis, ante ac placerat scelerisque, mauris sem cursus elit, et semper ante dolor sit amet tellus. Vestibulum ut arcu eu erat consequat pellentesque. Pellentesque id justo enim, et viverra magna. Vivamus viverra, elit in volutpat dictum, mi nunc imperdiet libero, ut ullamcorper enim elit non metus. </p> <hr> <h2>Oct<b>21</b>2011</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu velit dolor, ut varius eros. Vestibulum eros felis, molestie vel blandit a, aliquet nec leo. In tincidunt pharetra massa, non dapibus augue mattis sit amet. Nulla lobortis pretium pharetra. Sed tristique lectus eget diam blandit laoreet. Curabitur enim odio, fringilla vel placerat vitae, convallis nec nunc. Fusce eleifend nibh in tortor iaculis vitae pretium enim suscipit. Vivamus dapibus sagittis mauris, faucibus ultrices nunc sodales at. Aliquam ornare erat in quam scelerisque auctor. In sed tortor non lectus egestas porta. Donec quis convallis eros. Ut accumsan auctor porta. Mauris convallis, ante ac placerat scelerisque, mauris sem cursus elit, et semper ante dolor sit amet tellus. Vestibulum ut arcu eu erat consequat pellentesque. Pellentesque id justo enim, et viverra magna. Vivamus viverra, elit in volutpat dictum, mi nunc imperdiet libero, ut ullamcorper enim elit non metus. </p> <p> Sed eu mi eget ligula viverra vestibulum at sit amet nisi. Proin rutrum lorem a magna pellentesque commodo nec id est. Nullam iaculis commodo lorem vel lacinia. Fusce nec gravida nisl. Aenean at dolor ut tellus congue suscipit ut ut nisi. Integer vitae ipsum ut est ultricies molestie. Integer vel augue nibh. Aenean molestie mauris et justo imperdiet at ullamcorper metus facilisis. Suspendisse semper massa quis nunc tristique iaculis. Nam accumsan, tellus nec varius ultrices, velit ligula vehicula ipsum, vitae pretium urna orci et turpis. Donec nec leo libero. </p> </div> </div> <div class="module" id="dailies"> <h1>Dailies</h1> <a href="/lab.phtml">Lab Ray</a> <a href="/pirates/anchormanagement.phtml?sc9ejf2=99127">Anchor Management</a> <a href="/halloween/applebobbing.phtml">Apple Bobbing</a> <a href="/bank.phtml">Bank Interest</a> <a href="/desert/shrine.phtml">Coltzan's Shrine</a> <a href="/worlds/geraptiku/tomb.phtml">Deserted Tomb</a> <a href="/desert/fruitmachine.phtml">Fruit Machine</a> <a href="/jelly/index.phtml">Giant Jelly</a> <a href="/prehistoric/omelette.phtml" title="once a day">Giant Omelette</a> <a href="/medieval/grumpyking.phtml">Grumpy Old King</a> <a href="/faerieland/springs.phtml">Healing Springs</a> <a href="/games/play.phtml?game_id=905">Qasalan Expellibox</a> <a href="/shop_of_offers.phtml?slorg_payout=yes">Rich Slorg</a> <a href="/faerieland/tdmbgpop.phtml">TDMGPOP</a> <a href="/island/tombola.phtml">Tombola</a> <a href="/water/fishing.phtml">Fishing Vortex</a> <a href="/petpetpark/daily.phtml">Weltrude's Toy Chest</a> <a href="/medieval/wiseking.phtml">Wise Old King</a> <a href="/magma/pool.phtml">Magma Pool</a> <a href="/worlds/deadlydice.phtml">Deadly Dice</a> <a href="/medieval/turmaculus.phtml">Turmaculus</a> <a href="/winter/snowager.phtml">Snowager</a> <hr> <a href="/halloween/witchtower.phtml">Edna's Quests</a> <a href="/halloween/esophagor.phtml">Esophagor's Quests</a> <a href="/island/kitchen.phtml">Kitchen Quests</a> <a href="/winter/snowfaerie.phtml">Taelia's Quests</a> <hr> <a href="/faerieland/wheel.phtml">Wheel of Excitement</a> <a href="/prehistoric/mediocrity.phtml">Wheel of Mediocrity</a> <a href="/medieval/knowledge.phtml">Wheel of Knowledge</a> <a href="/">Wheel of Extravagance</a> <a href="/">Wheel of Misfortune</a> <a href="/">Wheel of Slime</a> <hr> </div> <div class="module" id="avatars"> <h1>Avatars to Attempt For</h1> <a href="/games/tyranuevavu.phtml"><img src="http://images.neopets.com/neoboards/avatars/jarbjarb.gif"></a> <a href="/pirates/buriedtreasure/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/aishascalawag.gif"></a> <a href="/games/meepits.phtml"><img src="http://images.neopets.com/neoboards/avatars/ahhhhmeepit.gif"></a> <a href="/medieval/cheeseroller.phtml"><img src="http://images.neopets.com/neoboards/avatars/cheeseroller.gif"></a> <a href="/halloween/coconutshy.phtml"><img src="http://images.neopets.com/neoboards/avatars/evilcoconut.gif"></a> <a href="/battledome/battledome.phtml"><img src="http://images.neopets.com/neoboards/avatars/valiant.gif"></a> <a href="/games/icecream2.phtml"><img src="http://images.neopets.com/neoboards/avatars/icecreammachine.gif"></a> <a href="/space/strangelever.phtml"><img src="http://images.neopets.com/neoboards/avatars/leverofdoom.gif"></a> <a href="/medieval/kissthemortog.phtml"><img src="http://images.neopets.com/neoboards/avatars/mortogkiss.gif"></a> <a href="/winter/kiosk.phtml"><img src="http://images.neopets.com/neoboards/avatars/kioskwocky.gif"></a> <a href="/halloween/scratch.phtml"><img src="http://images.neopets.com/neoboards/avatars/sssidney.gif"></a> <a href="/games/cellblock/cellblock.phtml"><img src="http://images.neopets.com/neoboards/avatars/mastervex.gif"></a> <a href="/pirates/bilge.phtml"><img src="http://images.neopets.com/neoboards/avatars/bilgedice.gif"></a> <a href="/games/betterthanyou.phtml"><img src="http://images.neopets.com/neoboards/avatars/betterthanyou.gif"></a> <a href="/faerieland/darkfaerie.phtml"><img src="http://images.neopets.com/neoboards/avatars/jhudorascloud.gif"></a> <a href="/medieval/earthfaerie.phtml"><img src="http://images.neopets.com/neoboards/avatars/illusensglade.gif"></a> <a href="/water/restaurant.phtml"><img src="http://images.neopets.com/neoboards/avatars/kelpwaitress.gif"></a> <a href="/games/neoquest/neoquest.phtml"><img src="http://images.neopets.com/neoboards/avatars/nq1erick.gif"></a> </div> <div class="module" id="games"> <h1>Games List</h1> <a href="/games/play.phtml?game_id=381"><img src="http://images.neopets.com/games/clicktoplay/tm_381.gif">Kass Basher<i>1.25 | 800 pts</i></a> <a href="/games/play.phtml?game_id=81"><img src="http://images.neopets.com/games/clicktoplay/tm_81.gif">Splat-A-Sloth<i>0.50 | 500 pts</i></a> <a href="/games/play.phtml?game_id=201"><img src="http://images.neopets.com/games/clicktoplay/tm_201.gif">Attack of the Marblemen <i>10.64 | 64 pts</i></a> <a href="/games/play.phtml?game_id=396"><img src="http://images.neopets.com/games/clicktoplay/tm_396.gif">Mootix Drop<i>1.45 | 658 pts</i></a> <a href="/games/play.phtml?game_id=532"><img src="http://images.neopets.com/games/clicktoplay/tm_532.gif"> Bouncy Supreme <i>1.09 | 1176 pts</i></a> <a href="/games/play.phtml?game_id=789"><img src="http://images.neopets.com/games/clicktoplay/tm_789.gif">The Usul Suspects <i>5.02 | 287 pts</i></a> <a href="/games/play.phtml?game_id=197"><img src="http://images.neopets.com/games/clicktoplay/tm_197.gif">Escape from Meridell Castle<i>5.01 | 200 pts</i></a> <a href="/games/play.phtml?game_id=228"><img src="http://images.neopets.com/games/clicktoplay/tm_228.gif">Petpet Rescue<i>4.85 | 237 pts</i></a> <a href="/games/play.phtml?game_id=773"><img src="http://images.neopets.com/games/clicktoplay/tm_773.gif">Crisis Courier<i>2.15 | 1886 pts</i></a> <a href="/games/play.phtml?game_id=544"><img src="http://images.neopets.com/games/clicktoplay/tm_544.gif">Snow Wars II<i>4.98 | 204 pts</i></a> <a href="/games/play.phtml?game_id=772"><img src="http://images.neopets.com/games/clicktoplay/tm_772.gif">Dubloon Disaster<i> 4.98 | 204 pts</i></a> <a href="/games/play.phtml?game_id=412"><img src="http://images.neopets.com/games/clicktoplay/tm_412.gif">Snowmuncher<i>0.32 | 3572 pts</i></a> <hr> </div> </div> <div class="sidebar"> <div class="module" id="bookmarks"> <h1>Bookmarks</h1> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> <a href="/">Link Here</a> </div> <div class="module"> <h1>Goals/Wishlist</h1> <img src="http://images.neopets.com/items/pb_darigan.gif"> Blurb on why you need the item here. Blurb on why you need the item here. <hr> <img src="http://images.neopets.com/items/pb_darigan.gif"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <hr> <img src="http://images.neopets.com/items/pb_darigan.gif"> Maecenas gravida, massa ac congue rhoncus, dolor tortor sagittis orci. </div> <div class="module"> <h1>Notepad</h1> (textarea) This is your notepad. You can use it to store: - to do list - your magma pool time - game codes you want to remember - coding/color schemes to experiment with later - reminders to transfer pets to accounts - anything you want :) (/textarea) </div> <div class="module"> <h1>Credit</h1> Template from <a href="/~thatkillsme">That Kills Me.</a> </div> </div> <hr id="tkm"> </div> Three column with modules, linear layout. This is the ultimate personal page: about me, interests, neofriends, blog, dailies, avatars to attempt for, bookmarks, wishlist, games list, and a notepad. Remember to replace the (textarea) with the HTML brackets. Has a fancy hover code for your twenty pets for you to blurb about or set to do lists for.

---

• Classic BlogPreview?

  <style> body { background: #ccc; } .sf { display: none; } p { text-align: left; } td { background: #000; display: none; } #container { font: 9pt Verdana; line-height: 20px; border: 0px #000 solid; background: #fff; width: 980px; text-align: center; float: left; } #sidebar { float: left; width: 200px; border: 0px #999 solid; font: 8pt Verdana; line-height: 16px; background: #e0e0e0; height: 100%; overflow: hidden; } .page { height: 768px; border: 1px #000 solid; } #content { float: right; width: 76%; border: 0px #999 solid; padding: 5px; } #sidebar a { display: block; color: #999; padding: 3px 0px 3px 22px; text-align: left; border-bottom: 1px #ccc dotted; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b58.png") no-repeat 9px 10px; } a { color: #007BFF; text-decoration: none; } a:hover { color: #69A5FF; } #sidebar a:hover, a.h_link:hover { background-color: #dbdbdb; color: #666; } a.h_link { font-weight: bold; padding-left: 5px !important; background-image: none !important; border-bottom: 1px #ccc solid !important; } h1 { font: normal 27pt Georgia; color: #999; text-align: left; } h1 div { background: #e0e0e0; color: #666; padding: 5px; margin: 2px 10px 5px 5px; float: left; font: 6pt Verdana; text-transform: uppercase; text-align: center; letter-spacing: 1px; border: 1px #999 solid; } h1 div span { display: block; font: 24pt Verdana; letter-spacing: 0px; margin: 0; padding: 0; border-width: 0; color: #666; } h1 span { display: block; font: 8pt verdana; border-top: 1px #ccc solid; padding-top: 1px; margin-top: 2px; color: #B3B3B3; } h2 { color: #fff; background: #333; padding: 5px 10px; text-align: right; border-right: 7px #333 solid; border-bottom: 7px #fff solid; margin: 3px 0px 10px 0px; } .icon { float: left; padding: 1px; border: 1px #ccc solid; margin: 5px; } </style> <div id="container"> <div id="sidebar" style="position: fixed;"> <a href="#home" class="h_link">Welcome</a> <a href="/">About Me</a> <a href="/">Wishlist/Goals</a> <a href="/" class="h_link">2011</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a href="/" class="h_link">2010</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a href="/">Heading Here</a> <a class="h_link">Older Entries</a> <a href="/">2009</a> <a href="/">2008</a> <a href="#cred" class="h_link">Credits</a> </div> <div id="content"> <a name="home"></a> <h2>Welcome to My Blog</h2> <img src="http://i1104.photobucket.com/albums/h327/eponarf/yj104-2.png" class="icon"><p> Sed bibendum auctor nibh, vel tempus nunc bibendum id. Pellentesque porta, est sit amet porttitor ullamcorper, augue justo dictum leo, ac viverra ipsum metus ac orci. Sed bibendum dignissim molestie. Suspendisse quis tellus quis magna congue volutpat vel in est. Duis lacus elit, venenatis eu suscipit consectetur, eleifend sit amet magna. Vivamus fringilla commodo eros, a eleifend enim scelerisque vel. Fusce semper faucibus eros, in sodales nisl aliquet at.</p> <h2>About Me</h2> <p>Start typing about yourself. Suspendisse quis tellus quis magna congue volutpat vel in est. Duis lacus elit, venenatis eu suscipit consectetur, eleifend sit amet magna. Vivamus fringilla commodo eros, a eleifend enim scelerisque vel. Fusce semper faucibus eros, in sodales nisl aliquet </p> <h2>2011</h2> <h1> <div>August <span>30</span> </div> Heading Here <span>some sort of witty subheading here. some sort of witty subheading here.</span> </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in nulla vel nulla faucibus gravida. Aenean iaculis pharetra dui, sed volutpat massa molestie ut. Aliquam porta sagittis luctus. Integer nec elit vel urna vestibulum iaculis. Phasellus nunc arcu, varius at hendrerit malesuada, ullamcorper quis libero. In scelerisque posuere nisi a convallis. Pellentesque accumsan convallis augue volutpat lobortis. Pellentesque volutpat bibendum dolor, in vestibulum orci luctus in. Nam vel commodo odio. Curabitur volutpat lectus consequat justo bibendum congue. </p> <h1> <div>August <span>30</span> </div> Heading Here <span>some sort of witty subheading here. some sort of witty subheading here.</span> </h1> <p> Cras enim leo, adipiscing eu tempor et, venenatis et sem. Aliquam erat volutpat. Sed risus nibh, blandit non sodales vitae, rutrum quis massa. Proin tempor purus nec risus sodales facilisis non in orci. Sed blandit turpis id dolor porttitor non aliquet tortor ultricies. Mauris id felis turpis, vitae sodales nulla. Nulla facilisi. </p> <h2>2010</h2> <h1> <div>August <span>30</span> </div> Heading Here <span>some sort of witty subheading here. some sort of witty subheading here.</span> </h1> <p> Sed bibendum auctor nibh, vel tempus nunc bibendum id. Pellentesque porta, est sit amet porttitor ullamcorper, augue justo dictum leo, ac viverra ipsum metus ac orci. Sed bibendum dignissim molestie. Suspendisse quis tellus quis magna congue volutpat vel in est. Duis lacus elit, venenatis eu suscipit consectetur, eleifend sit amet magna. Vivamus fringilla commodo eros, a eleifend enim scelerisque vel. Fusce semper faucibus eros, in sodales nisl aliquet at.</p> <h1> <div>August <span>30</span> </div> Heading Here <span>some sort of witty subheading here. some sort of witty subheading here.</span> </h1> <p> Sed bibendum auctor nibh, vel tempus nunc bibendum id. Pellentesque porta, est sit amet porttitor ullamcorper, augue justo dictum leo, ac viverra ipsum metus ac orci. Sed bibendum dignissim molestie. Suspendisse quis tellus quis magna congue volutpat vel in est. Duis lacus elit, venenatis eu suscipit consectetur, eleifend sit amet magna. Vivamus fringilla commodo eros, a eleifend enim scelerisque vel. Fusce semper faucibus eros, in sodales nisl aliquet at.</p> <a name="cred"></a> <h2>Credits</h2> Layout Template from <a href="/~thatkillsme">That Kills Me.</a> | Bullets from <a href="/~La_Roque">That Lunch Box.</a> | Icon from <a href="/~Psychochromia">Psychochromia</a>. </div> </div> Linear layout with the classic blog design. Navigation is hiearchial does not stick to the page as you scroll in IE. If you're one of those people who blog frequently you can replace the years with months. The save changes button, if you have a large resolution, is on the upper right hand corner.

• Neo-InspiredPreview?

  <style> a { color: #2367B5; text-decoration: none; } a:hover { color: #FFB300; } a img { border-width: 0; } .sf, td { display: none; } p { text-align: left; margin: 8px 5px; } body { text-align: center; background: #cfcfcf; } #container { margin: 0px auto -70px auto; border: 2px #747474 solid; border-width: 0px 2px; width: 1000px; background: #fff; font: 9pt Verdana; line-height: 18px; overflow: hidden; } #footer { height: 160px; background: url("http://images.neopets.com/themes/000_def_f65b1/footer_bg.png"); clear: both; } #header { height: 77px; background: url("http://images.neopets.com/themes/000_def_f65b1/header_bg.png"); margin-bottom: 5px; } .h_link { float: left; } .trans_space { width: 150px; margin-left: 5px; height: 60px; border: 0px red solid; } #template_nav img { float: left; height: 38px; } #template_nav li.nav_image, #nst { display: inline; float: left; } #template_nav li.nav_image:hover ul.dropdown { display: block; } #template_nav li ul li { margin: 0px; padding: 0px; } ul.dropdown { border: 1px #FAA819 solid; z-index: 2; top: 30px; display: none; clear: left; background: #FFF7C4; padding: 5px; list-style: none; margin: 0px 0px 0px 10px; text-align: left; } ul.dropdown li { margin: 0px; padding: 0px; } ul.dropdown a { font: bold 8pt Verdana; line-height: 14px; display: block; text-decoration: none; color: #000; } ul.dropdown a:hover { color: #FAA819; } #time { float: right; clear: right; margin: 22px 18px 0px 0px; font: bold 7.5pt Verdana; } .trans_space, .h_link img { width: 150px; margin-left: 5px; height: 60px; } .h_link { top: 8px; left: 0px; } #nst { font: bold 7.5pt Verdana; padding: 13px 0px; width: 114px; } .user { margin: 12px 8px 0px 0px; float: right; font: 8pt Verdana; display: inline; } .user a:hover { color: #2367B5; } #sidebar { width: 17.5%; float: left; font: 7.5pt Verdana; line-height: 14px; } #sidebar div.module { border: 2px #C9C9C9 solid; margin: 7px; } #sidebar div.module h1 { background: #FFD026; font: bold 8pt Verdana; padding: 4px; border-bottom: 2px #c9c9c9 solid; margin: 0px 0px 3px 0px; text-align: left; } #sidebar div.pet_stat, #sidebar div.pet_stat_bold { font: 7pt Verdana; float: left; width: 46.5%; line-height: 14px; } .pet_stat { text-align: right; padding-right: 3px; } .pet_stat_bold { text-align: left; font-weight: bold !important; } #pet { height: 295px; } #pet a { display: block; margin: 3px 0px; padding: 3px 0px; font: bold 7.5pt Verdana; border: 2px #c9c9c9 solid; border-width: 2px 0px; } #nf a { display: block; color: #333; font-weight: normal; text-align: left; border-bottom: 1px #ddd dotted; padding: 3px 0px; } #nf img { float: left; clear: left; margin: 2px 4px; } #nf a b { display: block; } #bookmarks a { display: block; font: bold 8pt Verdana; } #bookmarks p { margin: 8px 3px 3px 3px; } #tkm { padding: 3px; color: #666; text-align: left; } #content { width: 82.5%; float: left; } .module { border: 2px #c9c9c9 solid; margin: 5px 10px 5px 3px; } .column { float: left; width: 48.2%; border: 2px #c9c9c9 solid; margin: 5px 7px 5px 3px; height: 300px; } #content h1 { font: bold 9pt Verdana; color: #fff; background: #2367B5; padding: 4px 5px; border-bottom: 2px #c9c9c9 solid; margin: 0px 0px 3px 0px; text-align: left; } #sup_da img { height: 100px; margin: 5px; } #black { font: bold 9pt Verdana; color: #fff !important; background: #000 !important; padding: 4px 5px; margin: 0px 0px 5px 0px; text-align: left; } #dailies a { float: left; display: block; width: 33%; padding: 3px 0px; text-align: left; text-indent: 5px; } #dailies a img { height: 80px; width: 80px; margin: 5px 20px; } #avatars a { float: left; } #avatars a img { margin: 7px; width: 50px; height: 50px; } #games a { float: left; width: 33%; margin: 8px 0px; text-align: left; font: 7pt Verdana; } #games a i { font: normal 7pt Verdana; color: #999; display: block; } #games a img { float: left; width: 50px; height: 50px; margin: 0px 3px; } #notepad { background: #F7F4D9; padding: 5px; color: #E59C00; display: block; width: 100%; height: 90%; margin: 5px auto; border: 0; } #wishlist { margin-right: 7px; } #wishlist ul { padding: 0; margin: 0; list-style: none; } #wishlist li { list-style: none; width: 24.5%; float: left; text-align: left; margin: 4px 0px 8px 0px; font: 8pt Verdana; line-height: 16px; color: #666; } #wishlist li img { float: left; margin: 0px 8px; } #wishlist li b { display: block; color: #000; } #legal_jargon { margin: 0px 0px 0px 10px; width: 78%; float: left; text-align: left; font: 7.5pt Verdana; } #legal_jargon a, #legal_jargon a:hover { color: #000; } #legal_jargon a img { margin: 0px 5px; } #footer_img { float: right; margin-top: -10px; border: 0px red solid; } #template_nav { height: 35px; padding: 0px; list-style: none; width: 900px; margin: 9px 0px 0px 157px !important; float: left; } </style> <div id="container"> <div id="header" style="position: relative;"> <a href="/" class="h_link" style="position: absolute;"><img src="http://images.neopets.com/transparent_spacer.gif"></a> <div class="user"> <strong>Welcome, <a href="/userlookup.phtml?user=trylon">trylon</a></strong> | <strong>NP: <a href="/objects.phtml?type=inventory">700</a></strong> | <strong><a href="/">Logout</a></strong> </div> <ul id="template_nav" style="position: relative;"> <li class="nav_image"> <a href="/myaccount.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/myaccount.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/myaccount.phtml">» Control Panel</a></li> <li><a href="/preferences.phtml">» Preferences</a></li> <li><a href="/userinfo.phtml">» Edit Profile</a></li> <li><a href="/neomessages.phtml">» Neomail</a></li> <li><a href="/neofriends.phtml">» Neofriends</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> <li><a href="/space/warehouse/prizecodes.phtml">» Redeem Code</a></li> </ul> </li> <li class="nav_image"> <a href="/customise/"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/customise.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/customise/">» Customise Neopet</a></li> <li><a href="/objects.phtml?type=inventory">» Inventory</a></li> <li><a href="/closet.phtml">» Closet</a></li> <li><a href="/neohome/"> » Neohomes</a></li> <li><a href="/neohome/shed">» Storage Shed</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> </ul> </li> <li class="nav_image"> <a href="/games/arcade.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/games.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/games/arcade.phtml">» Games Room</a></li> <li><a href="/games/arcade_more.phtml?cat=top_rated">» Top Rated</a></li> <li><a href="/gamescores.phtml">» High Scores</a></li> <li><a href="/games/favorites.phtml">» Favourites</a></li> <li><a href="/keyquest">» Key Quest</a></li> <li><a href="/habitarium">» Habitarium</a></li> </ul> </li> <li class="nav_image"> <a href="/explore.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/explore.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/explore.phtml">» Map of Neopia</a></li> <li><a href="/help/tutorial/index.phtml">» Tutorial</a></li> <li><a href="/weather.phtml">» Weather</a></li> <li><a href="/pronounce.phtml">» Pronunciation</a></li> <li><a href="/neopedia.phtml">» Neopedia</a></li> </ul> </li> <li class="nav_image"> <a href="/nf.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/news.png"></a><ul class="dropdown" style="position: absolute;"> <li><a href="/nf.phtml">» New Features</a></li> <li><a href="/comingsoon.phtml">» Coming Soon</a></li> <li><a href="/ntimes/index.phtml">» Neopian Times</a></li> <li><a href="/stuff.phtml">» Merch News</a></li> </ul> </li> <li class="nav_image"> <a href="/petcentral.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/petcentral.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/petcentral.phtml">» Main</a></li> <li><a href="/calendar.phtml">» Calendar</a></li> <li><a href="/worldevents.phtml">» World Events</a></li> <li><a href="/pound/index.phtml">» Neopian Pound</a></li> </ul> </li> <li class="nav_image"> <a href="/neoboards/index.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/boards.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/neoboards/index.phtml">» Neoboard Index</a></li> <li><a href="/neoboards/preferences.phtml">» Preferences</a></li> </ul> </li> <li class="nav_image"> <a href="/objects.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/shops.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/objects.phtml">» Neopia Central</a></li> <li><a href="/market.phtml?type=wizard">» Shop Wizard</a></li> <li><a href="/market.phtml?type=your">» Your Shop</a></li> <li><a href="/auctions.phtml">» Auctions</a></li> <li><a href="/island/tradingpost.phtml">» Trading Post</a></li> <li><a href="/bank.phtml">» Bank</a></li> <li><a href="/shopping/index.phtml">» Merchandise</a></li> </ul> </li> <li class="nav_image"> <a href="/mall/index.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/ncmall.png"></a> <ul class="dropdown" style="position: absolute;"> <li><a href="/mall/index.phtml">» Shop</a></li> <li><a href="/mall/index.phtml?page=buy_nc">» Get Neocash</a></li> <li><a href="/mall/index.phtml?type=11">» Neocash Cards</a></li> <li><a href="/mall/index.phtml?page=redeem_nc">» Redeem Neocash Card</a></li> </ul> </li> <li id="nst"> 1:28:52 pm NST </li> </ul> </div> <div id="sidebar"> <div class="module" id="pet"> <h1>Meiav</h1> <img src="http://pets.neopets.com/cp/b8g29dd5/1/2.png"><a href="/customise">» Customise</a> <div class="pet_stat"> Species: <br>Health: <br>Mood: <br>Hunger: <br>Age: <br>Level: </div> <div class="pet_stat_bold"> Meerca <br><span id="pet_health">18 / 18</span> <br>delighted! <br>not hungry <br>165 days <br>1 </div> </div> <div class="module" id="nf"> <h1>Neofriends</h1> <a href="/userlookup.phtml?user=username"><img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b>reminder, blurb, or comment note here</a> <a href="/userlookup.phtml?user=username"><img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b>reminder, blurb, or comment note here</a> <a href="/userlookup.phtml?user=username"><img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b>reminder, blurb, or comment note here</a> <a href="/userlookup.phtml?user=username"><img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b>reminder, blurb, or comment note here</a> <a href="/userlookup.phtml?user=username"><img src="http://images.neopets.com/neoboards/avatars/default.gif"><b>username</b>reminder, blurb, or comment note here</a> </div> <div class="module" id="bookmarks"> <h1>Bookmarks</h1> <p><a href="/~Rei">» H.A.C.K</a> A must-read on account safety!</p> <p><a href="/~Triduo">» SLM/PB Prices</a> Shameless self plug here.</p> <p><a href="/~Joderi">» Game Ratios</a> Game ratio guide; visit every 25th of the month.</p> <p><a href="/~Soroptimist">» Soroptimist</a> Directory to everything you will ever need.</p> <p><a href="/~agiftforlife">» A Gift For Life</a> Tons of untaken petnames and usernames.</p> <p><a href="/~TheDjinni#code_c1p1">» Stylus</a> Basic HTML/CSS Guide.</p> <p><a href="/~Svid">» Loyal User Perks</a>Info about benefits of an aged account.</p> <p><a href="/~Akaunts">» Account Guide</a> What is and isn't allowed on side accounts.</p> <p><a href="/~x__loveable">» Pet Worth Guide</a> Reference for trading pets.</p> </div> <div class="module" id="tkm"> Layout design © Neopets. Adapted for petpages by <a href="/~thatkillsme">That Kills Me.</a> </div> </div> <div id="content"> <div class="module"> <h1 id="black">About Me</h1> <p><b>Type all about yourself here, yay!</b> I will, however, be using this section to discuss aspects of this layout and how to edit it properly..</p> <ul style="list-style: square; text-align: left; margin: 10px; padding: 10px 20px;"> <li>This layout, coding-wise is not pretty. Heavy edit at your own risk and peril. You need a really good understand of HTML/CSS to work with this layout.</li> <li>In the coding you see something like (div style="clear:both;")(/div). DO NOT REMOVE IT. It is crucial to keep the flow of the layout because I use floats instead of tables.</li> <li>Note the .column div height has been defined. If you have added more links/games, just go back to .column {height: 300px;} in the stylesheets and increase the height.</li> <li>I do not recommend inserting JN's item DB wishlist generation because tables are ugleh :( If you do, look for .sf, td {display: none;} and remove the td.</li> <li>This layout looks like a train wreck in IE. The dropdown list doesn't show up, and the navigation spacing is weird, causing the nst time to be cut off.</li> </ul> <p> Praesent eleifend consectetur justo non semper. Vivamus sit amet accumsan lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque placerat justo. Sed ac neque risus, eu cursus odio. Aliquam ac risus enim. Ut a justo neque, et molestie nunc. Aliquam iaculis nibh nec nisi volutpat nec venenatis neque laoreet. Duis diam nibh, imperdiet in tempor at, commodo sed orci. Praesent molestie elit lobortis odio convallis aliquam. Ut ac dolor eget ipsum consectetur venenatis ut et metus. Phasellus sed ipsum auctor mi sodales dictum. Cras et turpis id nisi vulputate ullamcorper. </p> </div> <div class="module" id="sup_da"> <h1>Super Important Dailies</h1> <a href="/lab.phtml"><img src="http://images.neopets.com/games/betterthanyou/contestant259.gif"></a> <a href="/pirates/anchormanagement.phtml"><img src="http://images.neopets.com/neopedia/278_krawken.gif"></a> <a href="/pirates/forgottenshore.phtml"><img src="http://images.neopets.com/nt/nt_images/513_forgotten_shore.gif"></a> <a href="/stockmarket.phtml?type=portfolio"><img src="http://images.neopets.com/games/clicktoplay/icon_780.gif"></a> </div> <div class="column" id="dailies"> <h1>Dailies</h1> <a href="/halloween/applebobbing.phtml">Apple Bobbing</a> <a href="/bank.phtml">Bank Interest</a> <a href="/desert/shrine.phtml">Coltzan's Shrine</a> <a href="/worlds/geraptiku/tomb.phtml">Deserted Tomb</a> <a href="/desert/fruitmachine.phtml">Fruit Machine</a> <a href="/jelly/index.phtml">Giant Jelly</a> <a href="/prehistoric/omelette.phtml" title="once a day">Giant Omelette</a> <a href="/medieval/grumpyking.phtml">Grumpy Old King</a> <a href="/faerieland/springs.phtml">Healing Springs</a> <a href="/games/play.phtml?game_id=905">Qasalan Expellibox</a> <a href="/shop_of_offers.phtml?slorg_payout=yes">Rich Slorg</a> <a href="/faerieland/tdmbgpop.phtml">TDMGPOP</a> <a href="/island/tombola.phtml">Tombola</a> <a href="/water/fishing.phtml">Fishing Vortex</a> <a href="/petpetpark/daily.phtml">Toy Chest</a> <a href="/medieval/wiseking.phtml">Wise Old King</a> <a href="/magma/pool.phtml">Magma Pool</a> <a href="/worlds/deadlydice.phtml">Deadly Dice</a> <a href="/medieval/turmaculus.phtml">Turmaculus</a> <a href="/winter/snowager.phtml">Snowager</a> </div> <div class="column" id="avatars"> <h1>Avatars to Attempt For</h1> <a href="/halloween/witchtower,pthml"><img src="http://images.neopets.com/neoboards/avatars/ednacackle.gif"></a> <a href="/winter/snowfaerie,pthml"><img src="http://images.neopets.com/neoboards/avatars/taelia.gif"></a> <a href="/games/dicearoo,pthml"><img src="http://images.neopets.com/neoboards/avatars/luckyblumaroo.gif"></a> <a href="/worlds/deadlydice,pthml"><img src="http://images.neopets.com/neoboards/avatars/deadlydice.gif"></a> <a href="/medieval/turmaculus,pthml"><img src="http://images.neopets.com/neoboards/avatars/turmaculus.gif"></a> <a href="http://www.neopets.com/faerieland/wheel.phtml"><img src="http://images.neopets.com/neoboards/avatars/wheelofexcitement.gif"></a> <a href="http://www.neopets.com/medieval/knowledge.phtml"><img src="http://images.neopets.com/neoboards/avatars/brightvale.gif"></a> <a href="http://www.neopets.com/halloween/wheel/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/misfortune.gif"></a> <a href="http://www.neopets.com/prehistoric/mediocrity.phtml"><img src="http://images.neopets.com/neoboards/avatars/mediocrity.gif"></a> <a href="/desert/extravagance.phtml"><img src="http://images.neopets.com/neoboards/avatars/extravagance.gif"></a> <a href="http://www.neopets.com/space/strangelever.phtml"><img src="http://images.neopets.com/neoboards/avatars/leverofdoom.gif"></a> <a href="/games/nq2/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/devilpuss.gif"></a> <a href="/games/tyranuevavu.phtml"><img src="http://images.neopets.com/neoboards/avatars/jarbjarb.gif"></a> <a href="/pirates/buriedtreasure/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/aishascalawag.gif"></a> <a href="/medieval/cheeseroller.phtml"><img src="http://images.neopets.com/neoboards/avatars/cheeseroller.gif"></a> <a href="/halloween/coconutshy.phtml"><img src="http://images.neopets.com/neoboards/avatars/evilcoconut.gif"></a> <a href="/battledome/battledome.phtml"><img src="http://images.neopets.com/neoboards/avatars/valiant.gif"></a> <a href="/games/cellblock/cellblock.phtml"><img src="http://images.neopets.com/neoboards/avatars/mastervex.gif"></a> <a href="/pirates/bilge.phtml"><img src="http://images.neopets.com/neoboards/avatars/bilgedice.gif"></a> </div> <div class="column" id="games"> <h1>Games</h1> <a href="/games/play.phtml?game_id=381"><img src="http://images.neopets.com/games/clicktoplay/tm_381.gif">Kass Basher<i>1.25 | 800 pts</i></a> <a href="/games/play.phtml?game_id=81"><img src="http://images.neopets.com/games/clicktoplay/tm_81.gif">Splat-A-Sloth<i>0.50 | 500 pts</i></a> <a href="/games/play.phtml?game_id=201"><img src="http://images.neopets.com/games/clicktoplay/tm_201.gif">Attack of the Marblemen <i>10.64 | 64 pts</i></a> <a href="/games/play.phtml?game_id=396"><img src="http://images.neopets.com/games/clicktoplay/tm_396.gif">Mootix Drop<i>1.45 | 658 pts</i></a> <a href="/games/play.phtml?game_id=532"><img src="http://images.neopets.com/games/clicktoplay/tm_532.gif"> Bouncy Supreme <i>1.09 | 1176 pts</i></a> <a href="/games/play.phtml?game_id=789"><img src="http://images.neopets.com/games/clicktoplay/tm_789.gif">The Usul Suspects <i>5.02 | 287 pts</i></a> <a href="/games/play.phtml?game_id=197"><img src="http://images.neopets.com/games/clicktoplay/tm_197.gif">Escape From Meri...<i>5.01 | 200 pts</i></a> <a href="/games/play.phtml?game_id=228"><img src="http://images.neopets.com/games/clicktoplay/tm_228.gif">Petpet Rescue<i>4.85 | 237 pts</i></a> <a href="/games/play.phtml?game_id=773"><img src="http://images.neopets.com/games/clicktoplay/tm_773.gif">Crisis Courier<i>2.15 | 1886 pts</i></a> <a href="/games/play.phtml?game_id=544"><img src="http://images.neopets.com/games/clicktoplay/tm_544.gif">Snow Wars II<i>4.98 | 204 pts</i></a> <a href="/games/play.phtml?game_id=772"><img src="http://images.neopets.com/games/clicktoplay/tm_772.gif">Dubloon Disaster<i> 4.98 | 204 pts</i></a> <a href="/games/play.phtml?game_id=412"><img src="http://images.neopets.com/games/clicktoplay/tm_412.gif">Snowmuncher<i>0.32 | 3572 pts</i></a> </div> <div class="column"> <h1>Notepad</h1> (textarea id="notepad") This is your notepad. You can use it to store: - to-do,reminders, & goals - your magma pool time - game codes you want to remember - copy and paste stuff for the tc, hc, or pc boards - coding/color schemes to experiment with later - reminders to transfer pets to accounts or pet trades you have arranged - anything you want :) (/textarea) </div> <div style="clear: both;"></div> <div class="module" id="wishlist"> <h1>Wishlist</h1> <ul> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> </ul> <div style="clear: both;"></div> </div> </div> <div id="footer"> <a href="/" class="h_link"><img src="http://images.neopets.com/transparent_spacer.gif" class="trans_space"></a> <img src="http://images.neopets.com/themes/000_def_f65b1/rotations/7.png" id="footer_img"><div id="legal_jargon"> <a href="/privacy.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/privacypolicy.png"></a><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/divider.png"><a href="/safetytips.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/safetytips.png"></a><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/divider.png"><a href="/contact.phml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/contactus.png"></a><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/divider.png"><a href="/aboutus.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/aboutus.png"></a><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/divider.png"><a href="/refer/index.phtml"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/referral.png"></a><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/divider.png"><a href="/help.html"><img src="http://images.neopets.com/themes/000_def_f65b1/navigation/help.png"></a> <br><br>NEOPETS and all related indicia are trademarks of <strong>Neopets, Inc.</strong>, © 1999-2011. ® denotes Reg. USPTO. All rights reserved. Use of this site signifies your acceptance of the <a href="/terms.phtml">Terms of Use</a>. </div> </div> </div> Recreation of Neo's layout, designed for a personal portal page. The code's not pretty; tackle at your own risk and fustration. Drop down navigation not IE compliant. Includes space for your about me, neofriends, bookmarks, dailies, avatars, games, and wishlist.

• Nothing Fancy Here Preview?

  <style> a { color: #5A8CAA; text-decoration: none; } a:hover { color: #92A4AF; } a img { border-width: 0; } td { background: #000; padding: 5px; } body { text-align: center; color: #444; font: 8pt Verdana; line-height: 16px; } #dailies, #games { margin: 0px auto; background: #fff; width: 1000px; } #dailies a { width: 16.66%; display: block; float: left; padding: 5px 0px; margin: 8px 0px; } #dailies a img { display: block; margin: 0px auto; } #games a { float: left; width: 20%; margin: 10px 0px; font: 8pt Verdana; } #games a i { font: normal 7pt Verdana; color: #999; display: block; } #games a img { display: block; margin: 0px auto -28px auto; } h1 { font: 22pt Calibri; margin: 15px 0px 5px 0px; padding: 5px; color: #444; clear: both; } </style> <h1>Dailies</h1> <div id="dailies"> <a href="/pirates/anchormanagement.phtml?sc9ejf2=99127"><img src="http://images.neopets.com/items/mall_giantsquid_mask.gif">Anchor Management</a> <a href="/bank.phtml"><img src="http://images.neopets.com/items/toy_bankmanager_skeith.gif">Bank Interest</a> <a href="/desert/shrine.phtml"><img src="http://images.neopets.com/items/bd_desert_deathmask.gif"> Coltzan's Shrine</a> <a href="/worlds/geraptiku/tomb.phtml"><img src="http://images.neopets.com/items/fur_geraptiku_tabletop.gif">Deserted Tomb</a> <a href="/desert/fruitmachine.phtml"><img src="http://images.neopets.com/items/food_desert7.gif">Fruit Machine</a> <a href="/jelly/index.phtml"><img src="http://images.neopets.com/items/jel_wholepinanna.gif">Giant Jelly</a> <a href="/prehistoric/omelette.phtml"> <img src="http://images.neopets.com/items/om_peas_carrots1.gif"> Giant Omelette</a> <a href="/medieval/grumpyking.phtml"><img src="http://images.neopets.com/items/toy_plushie_skarl.gif"> Grumpy Old King</a> <a href="/faerieland/springs.phtml"><img src="http://images.neopets.com/items/toy_faerie_water.gif"> Healing Springs</a> <a href="/shenkuu/lunar/"><img src="http://images.neopets.com/items/grooming_mooncomb.gif"> Lunar Temple</a> <a href="/moon/meteor.phtml"><img src="http://images.neopets.com/items/mall_crashedmeteorite.gif"> Meteor</a> <a href="/games/play.phtml?game_id=905"><img src="http://images.neopets.com/items/mall_bg_qasalanexpellibox.gif"> Qasalan Expellibox</a> <a href="/shop_of_offers.phtml?slorg_payout=yes"><img src="http://images.neopets.com/items/hall_petpet1.gif"> Rich Slorg</a> <a href="/medieval/symolhole.phtml"><img src="http://images.neopets.com/items/gar_dirt_hole.gif"> Symol Hole</a> <a href="/faerieland/tdmbgpop.phtml"><img src="http://images.neopets.com/items/toy_bluegrundo.gif"> TDMGPOP</a> <a href="/island/tombola.phtml"><img src="http://images.neopets.com/items/toy_squeezy_tombola.gif"> Tombola</a> <a href="/water/fishing.phtml"><img src="http://images.neopets.com/items/toy_adventfishingpole.gif"> Fishing Vortex</a> <a href="/petpetpark/daily.phtml"><img src="http://images.neopets.com/items/can_dubloon_chest.gif"> Weltrude's Toy Chest</a> <a href="/medieval/wiseking.phtml"><img src="http://images.neopets.com/items/plu_skeith_hagan.gif"> Wise Old King</a> <a href="/lab2.phtml"><img src="http://images.neopets.com/items/plu_madscientist_labray.gif"> Lab Ray</a> <a href="/petpetlab.phtml"><img src="http://images.neopets.com/items/plu_madscientist_kookith.gif"> Petpet Lab Ray</a> <a href="/medieval/turmaculus.phtml"><img src="http://images.neopets.com/items/toy_turmaculus_figure.gif"> Turmaculus</a> </div> <h1>Games</h1> <div id="games"> <a href="/games/play.phtml?game_id=381"><img src="http://images.neopets.com/games/pages/icons/med/m-381.png">Kass Basher<i>830 pts</i></a> <a href="/games/play.phtml?game_id=81"><img src="http://images.neopets.com/games/pages/icons/med/m-81.png">Splat-A-Sloth<i>530 pts</i></a> <a href="/games/play.phtml?game_id=1139"><img src="http://images.neopets.com/games/pages/icons/med/m-1139.png">Darigan Dodgeball<i>3230 pts</i></a> <a href="/games/play.phtml?game_id=396"><img src="http://images.neopets.com/games/pages/icons/med/m-396.png">Mootix Drop<i>690 pts</i></a> <a href="/games/play.phtml?game_id=539"><img src="http://images.neopets.com/games/pages/icons/med/m-539.png"> Chia Bomber<i> 480 pts</i></a> <a href="/games/play.phtml?game_id=500"><img src="http://images.neopets.com/games/pages/icons/med/m-500.png"> Meerca Chase<i> 1160 pts</i></a> <a href="/games/play.phtml?game_id=207"><img src="http://images.neopets.com/games/pages/icons/med/m-207.png"> Zurroball<i> 50 pts</i></a> <a href="/games/play.phtml?game_id=903"><img src="http://images.neopets.com/games/pages/icons/med/m-903.png"> Ultimate Bullseye<i> 130 pts</i></a> <a href="/games/play.phtml?game_id=197"><img src="http://images.neopets.com/games/pages/icons/med/m-197.png">Escape From Meridell Castle<i>270 pts</i></a> <a href="/games/play.phtml?game_id=789"><img src="http://images.neopets.com/games/pages/icons/med/m-789.png">The Usul Suspects <i>680 pts</i></a> <a href="/games/play.phtml?game_id=228"><img src="http://images.neopets.com/games/pages/icons/med/m-228.png">Petpet Rescue<i>260 pts</i></a> <a href="/games/play.phtml?game_id=379"><img src="http://images.neopets.com/games/pages/icons/med/m-379.png"> Meepit Juice Break<i> 1750 pts</i></a> <a href="/games/play.phtml?game_id=544"><img src="http://images.neopets.com/games/pages/icons/med/m-544.png">Snow Wars II<i>580 pts</i></a> <a href="/games/play.phtml?game_id=248"><img src="http://images.neopets.com/games/pages/icons/med/m-248.png"> Raiders of Maraqua<i> 190 pts</i></a> <a href="/games/play.phtml?game_id=258"><img src="http://images.neopets.com/games/pages/icons/med/m-258.png"> Defender Trainer<i> 280 pts</i></a> <a href="/games/play.phtml?game_id=366"><img src="http://images.neopets.com/games/pages/icons/med/m-366.png"> Turmac Roll<i> 1540 pts</i></a> <a href="/games/play.phtml?game_id=159"><img src="http://images.neopets.com/games/pages/icons/med/m-159.png"> Gadgadsgame<i> 1430 pts</i></a> <a href="/games/play.phtml?game_id=201"><img src="http://images.neopets.com/games/pages/icons/med/m-201.png">Attack of the Marblemen <i>190 pts</i></a> <a href="/games/play.phtml?game_id=885"><img src="http://images.neopets.com/games/pages/icons/med/m-885.png">Maths Nightmare<i>2860 pts</i></a> <a href="/games/play.phtml?game_id=773"><img src="http://images.neopets.com/games/pages/icons/med/m-773.png">Crisis Courier<i>7140 pts</i></a> <a href="/games/play.phtml?game_id=772"><img src="http://images.neopets.com/games/pages/icons/med/m-772.png">Dubloon Disaster<i>1560 pts</i></a> <a href="/games/play.phtml?game_id=532"><img src="http://images.neopets.com/games/pages/icons/med/m-532.png"> Bouncy Supreme <i>3850 pts</i></a> <a href="/games/play.phtml?game_id=970"><img src="http://images.neopets.com/games/pages/icons/med/m-970.png"> Let it Slide<i> 2500 pts</i></a> <a href="/games/play.phtml?game_id=305"><img src="http://images.neopets.com/games/pages/icons/med/m-305.png"> Warf Rescue Team<i> 190 pts</i></a> <a href="/games/play.phtml?game_id=358"><img src="http://images.neopets.com/games/pages/icons/med/m-358.png"> Faerie Bubbles<i> 1520 pts</i></a> <a href="/games/play.phtml?game_id=805"><img src="http://images.neopets.com/games/pages/icons/med/m-805.png"> Fashion Fever<i> 1000 pts</i></a> <a href="/games/play.phtml?game_id=507"><img src="http://images.neopets.com/games/pages/icons/med/m-507.png"> Ice Cream Machine<i> 16670 pts</i></a> <a href="/games/play.phtml?game_id=676"><img src="http://images.neopets.com/games/pages/icons/med/m-676.png"> Igloo Garage Sale<i> 1890 pts</i></a> <a href="/games/play.phtml?game_id=619"><img src="http://images.neopets.com/games/pages/icons/med/m-619.png"> Jubble Bubble<i> 850 pts</i></a> <a href="/games/play.phtml?game_id=1048"><img src="http://images.neopets.com/games/pages/icons/med/m-1048.png"> Nimmos Pond<i> 1160 pts</i></a> <a href="/games/play.phtml?game_id=587"><img src="http://images.neopets.com/games/pages/icons/med/m-587.png"> Pterattack<i> 3450 pts</i></a> <a href="/games/play.phtml?game_id=965"><img src="http://images.neopets.com/games/pages/icons/med/m-965.png"> Hot Dog Hero<i> 14290 pts</i></a> </div> <h1>Credit</h1> <p> Template from <a href="/~thatkillsme">That Kills Me.</a></p> Single column linear layout. Simple coding and appearance and thus super friendly for the HTML beginner to edit without the hassle and bloated code of tables. Includes space for dailies, game list, bookmarks, and notepad.

---

• Even More Boring Preview?

  <style> a img { border-width: 0px; } td { background: #000; padding: 5px; } body { text-align: center; font: 8pt Verdana; line-height: 18px; } a { text-decoration: none; color: #666; } a:hover { color: #aaa; } ul.nav { padding: 0; margin: 10px auto; height: 35px; list-style: none; width: 770px; text-align: left; } ul.nav a { border-bottom: 2px #ddd solid; } ul.nav a:hover { color: #666; } ul.nav li { float: left; display: inline; font: bold 13pt Arial; padding: 5px 10px; } ul.nav li ul { border: 1px #ccc dotted; border-bottom: 2px #ccc solid; background: #fff; margin-left: 5px; display: none; padding: 0px 5px 5px 5px; } ul.nav li:hover ul { display: block; } ul.nav li ul li { float: none; display: block; padding: 0px; } ul.nav li ul li a { font: 8pt Verdana; padding: 2px; border-width: 0px; } ul.nav li ul li a:hover { color: #aaa; } h1 { font: bold 10pt Verdana; padding: 2px; margin: 5px; border: 1px #d3d3d3 solid; background: #e0e0e0; } #container { width: 850px; margin: 10px auto -40px auto; } #super_da { margin: 20px 0px; } #super_da a img { margin: 5px; height: 120px; padding: 2px; } .column { float: left; width: 33%; } #da a { float: left; width: 50%; padding: 3px 0px; } #av a img { float: left; margin: 10px; } #list ul { list-style: none; text-align: left; padding-left: 10px; margin: 4px; } #list ul li { padding-left: 13px; margin: 3px 0px; background: url("http://www.websitebullets.com/bullet/222/5.gif") no-repeat 3px 8px; } #list ul li.done { background: url("http://www.websitebullets.com/bullet/859/3.gif") no-repeat 0px 4px !important; } hr { clear: both; visibility: hidden; } #games { clear: both; padding-top: 20px; margin-bottom: 20px; } #games a { float: left; width: 25%; margin: 10px 0px; font: 8pt Verdana; } #games a i { font: normal 7pt Verdana; color: #aaa; display: block; } #games a img { display: block; margin: 0px auto -28px auto; } #wishlist ul { padding: 0; margin: 0px 0px 20px 0px; list-style: none; } #wishlist li { list-style: none; width: 25%; float: left; margin: 12px 0px; font: 8pt Verdana; line-height: 16px; color: #666; } #wishlist li img { float: left; margin: 0px 8px; } #wishlist li b { display: block; color: #000; } </style> <ul class="nav"> <li> <a href="/myaccount.phtml">My Account</a> <ul style="position: absolute;"> <li><a href="/myaccount.phtml">» Control Panel</a></li> <li><a href="/preferences.phtml">» Preferences</a></li> <li><a href="/userinfo.phtml">» Edit Profile</a></li> <li><a href="/neomessages.phtml">» Neomail</a></li> <li><a href="/neofriends.phtml">» Neofriends</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> <li><a href="/space/warehouse/prizecodes.phtml">» Redeem Code</a></li> </ul> </li> <li> <a href="/customise/">Customise</a> <ul style="position: absolute;"> <li><a href="/customise/">» Customise Neopet</a></li> <li><a href="/objects.phtml?type=inventory">» Inventory</a></li> <li><a href="/closet.phtml">» Closet</a></li> <li><a href="/neohome/"> » Neohomes</a></li> <li><a href="/neohome/shed">» Storage Shed</a></li> <li><a href="/addpet.phtml">» Create a Neopet</a></li> </ul> </li> <li> <a href="/games/">Games</a> <ul style="position: absolute;"> <li><a href="/games/">» Games Room</a></li> <li><a href="/games/category.phtml?sortby=pop">» Popular</a></li> <li><a href="/games/hiscores.phtml">» High Scores</a></li> <li><a href="/games/favourites.phtml">» Favourites</a></li> <li><a href="/keyquest/">» Key Quest</a></li> <li><a href="/habitarium/">» Habitarium</a></li> </ul> </li> <li> <a href="/explore.phtml">Explore</a> <ul style="position: absolute;"> <li><a href="/explore.phtml">» Map of Neopia</a></li> <li><a href="/help/tutorial/index.phtml">» Tutorial</a></li> <li><a href="/weather.phtml">» Weather</a></li> <li><a href="/pronounce.phtml">» Pronunciation</a></li> <li><a href="/neopedia.phtml">» Neopedia</a></li> </ul> </li> <li> <a href="/nf.phtml">News</a> <ul style="position: absolute;"> <li><a href="/nf.phtml">» New Features</a></li> <li><a href="/comingsoon.phtml">» Coming Soon</a></li> <li><a href="/ntimes/index.phtml">» Neopian Times</a></li> <li><a href="/stuff.phtml">» Merch News</a></li> </ul> </li> <li> <a href="/petcentral.phtml">Pet Central</a> <ul style="position: absolute;"> <li><a href="/petcentral.phtml">» Main</a></li> <li><a href="/calendar.phtml">» Calendar</a></li> <li><a href="/worldevents.phtml">» World Events</a></li> <li><a href="/pound/index.phtml">» Neopian Pound</a></li> </ul> </li> <li> <a href="/neoboards/index.phtml">Boards</a> <ul style="position: absolute;"> <li><a href="/neoboards/index.phtml">» Neoboard Index</a></li> <li><a href="/neoboards/preferences.phtml">» Preferences</a></li> </ul> </li> <li> <a href="/objects.phtml">Shops</a> <ul style="position: absolute;"> <li><a href="/objects.phtml">» Neopia Central</a></li> <li><a href="/market.phtml?type=wizard">» Shop Wizard</a></li> <li><a href="/market.phtml?type=your">» Your Shop</a></li> <li><a href="/auctions.phtml">» Auctions</a></li> <li><a href="/island/tradingpost.phtml">» Trading Post</a></li> <li><a href="/bank.phtml">» Bank</a></li> <li><a href="/shopping/index.phtml">» Merchandise</a></li> </ul> </li> <li><a href="/mall/index.phtml">NC Mall <ul style="position: absolute;"> <li><a href="/mall/index.phtml">» Shop</a></li> <li><a href="/mall/index.phtml?page=buy_nc">» Get Neocash</a></li> <li><a href="/mall/index.phtml?type=11">» Neocash Cards</a></li> <li><a href="/mall/index.phtml?page=redeem_nc">» Redeem Neocash Card</a></li> </ul></a></li> </ul> <div id="container"> <div id="super_da"> <h1>Super Important Dailies</h1> <a href="/lab.phtml"><img src="http://images.neopets.com/games/betterthanyou/contestant259.gif"></a> <a href="/pirates/anchormanagement.phtml"><img src="http://images.neopets.com/neopedia/278_krawken.gif"></a> <a href="/pirates/forgottenshore.phtml"><img src="http://images.neopets.com/nt/nt_images/513_forgotten_shore.gif"></a> <a href="/stockmarket.phtml?type=portfolio"><img src="http://images.neopets.com/images/nigel_chia.gif"></a> </div> <div class="column" id="da"> <h1>Dailies</h1> <a href="/halloween/applebobbing.phtml">Apple Bobbing</a> <a href="/bank.phtml">Bank Interest</a> <a href="/desert/shrine.phtml">Coltzan's Shrine</a> <a href="/worlds/geraptiku/tomb.phtml">Deserted Tomb</a> <a href="/desert/fruitmachine.phtml">Fruit Machine</a> <a href="/jelly/index.phtml">Giant Jelly</a> <a href="/prehistoric/omelette.phtml" title="once a day">Giant Omelette</a> <a href="/medieval/grumpyking.phtml">Grumpy Old King</a> <a href="/faerieland/springs.phtml">Healing Springs</a> <a href="/games/play.phtml?game_id=905">Qasalan Expellibox</a> <a href="/shop_of_offers.phtml?slorg_payout=yes">Rich Slorg</a> <a href="/faerieland/tdmbgpop.phtml">TDMGPOP</a> <a href="/island/tombola.phtml">Tombola</a> <a href="/water/fishing.phtml">Fishing Vortex</a> <a href="/petpetpark/daily.phtml">Toy Chest</a> <a href="/medieval/wiseking.phtml">Wise Old King</a> <a href="/magma/pool.phtml">Magma Pool</a> <a href="/worlds/deadlydice.phtml">Deadly Dice</a> <a href="/medieval/turmaculus.phtml">Turmaculus</a> <a href="/winter/snowager.phtml">Snowager</a> </div> <div class="column" id="av"> <h1>Avatars To Attempt For</h1> <a href="http://www.neopets.com/space/strangelever.phtml"><img src="http://images.neopets.com/neoboards/avatars/leverofdoom.gif"></a> <a href="/games/nq2/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/devilpuss.gif"></a> <a href="/games/tyranuevavu.phtml"><img src="http://images.neopets.com/neoboards/avatars/jarbjarb.gif"></a> <a href="/pirates/buriedtreasure/index.phtml"><img src="http://images.neopets.com/neoboards/avatars/aishascalawag.gif"></a> <a href="/medieval/cheeseroller.phtml"><img src="http://images.neopets.com/neoboards/avatars/cheeseroller.gif"></a> <a href="/halloween/coconutshy.phtml"><img src="http://images.neopets.com/neoboards/avatars/evilcoconut.gif"></a> <a href="/battledome/battledome.phtml"><img src="http://images.neopets.com/neoboards/avatars/valiant.gif"></a> <a href="/games/cellblock/cellblock.phtml"><img src="http://images.neopets.com/neoboards/avatars/mastervex.gif"></a> </div> <div class="column" id="list"> <h1>To-Do List/Goals</h1> <ul> <li> Non complete errand</li> <li> Non complete errand</li> <li> Non complete errand</li> <li class="done"> Completed item</li> <li> Non complete errand</li> <li class="done"> Completed item</li> <li> Non complete errand</li> <li> Non complete errand</li> <li class="done"> Completed item</li> </ul> </div> <div id="games"> <h1>Games</h1> <a href="/games/play.phtml?game_id=381"><img src="http://images.neopets.com/games/pages/icons/med/m-381.png">Kass Basher<i>830 pts</i></a> <a href="/games/play.phtml?game_id=81"><img src="http://images.neopets.com/games/pages/icons/med/m-81.png">Splat-A-Sloth<i>530 pts</i></a> <a href="/games/play.phtml?game_id=1139"><img src="http://images.neopets.com/games/pages/icons/med/m-1139.png">Darigan Dodgeball<i>3230 pts</i></a> <a href="/games/play.phtml?game_id=396"><img src="http://images.neopets.com/games/pages/icons/med/m-396.png">Mootix Drop<i>690 pts</i></a> <a href="/games/play.phtml?game_id=539"><img src="http://images.neopets.com/games/pages/icons/med/m-539.png"> Chia Bomber<i> 480 pts</i></a> <a href="/games/play.phtml?game_id=500"><img src="http://images.neopets.com/games/pages/icons/med/m-500.png"> Meerca Chase<i> 1160 pts</i></a> <a href="/games/play.phtml?game_id=207"><img src="http://images.neopets.com/games/pages/icons/med/m-207.png"> Zurroball<i> 50 pts</i></a> <a href="/games/play.phtml?game_id=903"><img src="http://images.neopets.com/games/pages/icons/med/m-903.png"> Ultimate Bullseye<i> 130 pts</i></a> <a href="/games/play.phtml?game_id=197"><img src="http://images.neopets.com/games/pages/icons/med/m-197.png">Escape From Meridell Castle<i>270 pts</i></a> <a href="/games/play.phtml?game_id=789"><img src="http://images.neopets.com/games/pages/icons/med/m-789.png">The Usul Suspects <i>680 pts</i></a> <a href="/games/play.phtml?game_id=228"><img src="http://images.neopets.com/games/pages/icons/med/m-228.png">Petpet Rescue<i>260 pts</i></a> <hr> </div> <div id="wishlist"> <h1>Wishlist</h1> <ul> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <li> <img src="http://images.neopets.com/items/gif_present_xmas.gif"><b>Item Name Here</b> Rarity, Approx Price, etc. </li> <hr> </ul> </div> <hr> <h1>Credit</h1> Template from <a href="/~thatkillsme">That Kills Me.</a> </div>Includes dropdown neo navigation (not IE compliant), super important dailies, regular dailies, avatars to attempt for, to-do list, games, and a wishlist.

• Restocks & Resells Preview?

  <style> a { text-decoration: none; color: #444; } a:hover { color: #999; } table { background: #000; padding: 5px; } body { font: 9pt Tahoma; line-height: 20px; color: #666; text-align: center; background: url("http://i972.photobucket.com/albums/ae202/tiptoeboo/Backgrounds/diffgrey-1.jpg") repeat fixed; } .container { margin: 20px auto; width: 800px; border: 1px #444 solid; background: #fff; } .container p { text-align: left; margin: 10px 8px; } h1 { font: bold 10pt Tahoma; text-align: left; padding: 8px; color: #fff; background: #444; letter-spacing: 1px; margin: 0px; } .shopkeep { display: block; margin: 8px auto; } ul { list-style: none; margin: 10px 0px; padding: 0; } ul li { float: left; width: 32%; text-align: left; margin: 0px; padding: 10px 0px; border-left: 1px #ccc dotted; } ul li img { float: left; margin: 0px 8px; } hr { margin: 0; visibility: hidden; clear: both; } #nav { font: 40pt Tahoma; color: #e0e0e0; background: none; border-width: 0; } #nav a { margin: 5px 20px; } #log { background: #fff; width: 100%; text-align: center; font: 9pt Tahoma; } #header { font-weight: bold; } #log td { padding: 5px 0px; margin: 0px; } .bg { background: #d6d6d6; } #tkm { margin: 0px auto -40px auto; } #notepad { margin: 5px; width: 35%; float: right; display: block; background: #ddd; padding: 5px; height: 220px; border: 0; overflow: auto; } </style> <div class="container" id="nav"> <a href="/market.phtml?type=wizard">SW</a><a href="/auctions.phtml">TP</a> <a href="/auctions.phtml">AUC</a> <a href="/boardlist.phtml?board=6">TC Chat</a> </div> <div class="container"> <h1>Welcome</h1> (textarea id="notepad")This is a notepad which is a textarea. Use it to save your goals, copy/paste formats for the tc boards, important reminders, etc.(/textarea)<p><b>Welcome message hereth.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis quam a lorem pharetra tincidunt. Donec lectus quam, bibendum quis tincidunt ac, egestas eu eros. Mauris purus arcu, lobortis sed vestibulum sit amet, molestie ut eros. Cras molestie leo dui. </p> <p> Cras tempor, enim nec porta pellentesque, augue neque mollis orci, iaculis tristique metus neque ac est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc arcu leo, vehicula vel placerat id, pharetra in ligula. Morbi accumsan sapien libero. </p> <hr> </div> <div class="container"> <h1>The Magic Shop</h1> <img src="http://images.neopets.com/shopkeepers/w2.gif" class="shopkeep"><ul> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <li> <img src="http://images.neopets.com/items/mag_healing_green.gif"> Item Name [r99]<br>22 Feb 2011<br>sold for 200K</li> <hr> </ul> </div> <div class="container"> <h1>Reselling Log</h1> <table id="log"> <tr id="header"> <td>Date</td> <td>Item Name</td> <td>Bought At</td> <td>Sold For</td> </tr> <tr> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr class="bg"> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr class="bg"> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr class="bg"> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr class="bg"> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> <tr> <td>22 Feb 2011</td> <td>Name of item here.</td> <td>800K</td> <td>1.2m</td> </tr> </table> </div> <div id="tkm"> Template from <a href="/~thatkillsme">That Kills Me</a>. Background from <a href="/~kiarlie'">Teacake Backgrounds</a>. </div> This is the only template that includes a table lol. Designed to record your restocks/resells. In the layout you will see (hr) throughout the code -- do not remove it! It is to keep the floats from messing up.

Petpage Applications

• Linear (Background)Preview?

  <style> a { text-decoration: none; color: #3696FF; } a:hover { color: #8EC3FF; } body { overflow: hidden; background: url("http://i.imgur.com/aCWsS.png") repeat 0px -100px; } #wrapper { height: 100%; width: 100%; top: 0; left: 0; overflow: auto; z-index: 1; } td, .sf { display: none; } #nav { font: 10pt Lucida Sans Unicode; margin: 50px 0px 0px 10px; text-align: center; width: 140px; z-index: 2; top: 0; left: 0; border-top: 1px #999 dotted; } #nav a { display: block; padding: 8px 0px; text-decoration: none; border-bottom: 1px #666 dotted; color: #444; } #nav a:hover { color: #999; } .section { border: 1px #999 dotted; background: url("http://i45.tinypic.com/sqld7d.jpg") repeat; font: 8pt Verdana; line-height: 20px; margin: 25px 0px 25px 170px; width: 600px; color: #444; } #header, .section { float: left; clear: left; } #header { margin: 20px 0px 50px 170px; text-align: center; width: 600px; font: italic 54pt "Script MT Bold"; color: #444; } #header i { display: block; font: 6pt Verdana; text-transform: uppercase; letter-spacing: 2px; } p { text-align: left; margin: 10px; } h1 { font: 26pt Century Gothic; text-align: left; margin: -28px 0px -2px 0px; padding-left: 8px; color: #333; z-index: 2; } h2 { margin: 10px; text-align: center; } #pet_id { float: left; margin: 10px; border: 1px #ccc solid; padding: 1px; overflow: hidden; } #pet_id img { margin: 0px -65px -10px -90px; } .column { float: left; width: 50%; } .column p { margin: 10px; padding-left: 20px; text-indent: 0px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b58.png") 5px 7px no-repeat; text-align: left; } #customise { list-style: none; padding: 0px; margin: 0px; } #customise li { float: left; width: 24.5%; text-align: center; margin: 5px 0px; height: 130px; padding: 5px 0px; font: 7.5pt Verdana; } #customise li img { display: block; margin: 3px auto; border: 1px #ccc solid; } #pet_list { height: 310px; overflow: hidden; } #pet_list a { margin: -1px; } #pet_list a img { float: left; margin: 10px 10px 0px 10px; border: 1px #ccc solid; padding: 1px; background: #fff; } #pet_list hr { visibility: hidden; } #pet_list a span { display: none; } #pet_list a:hover span { display: block; left: 11px; top: 135px; width: 550px; height: 160px; overflow: hidden; text-align: left; color: #444; } a:hover span img { margin: 4px 8px 4px 0px !important; float: left; } .left { float: left; padding: 2px; background: #fff; border: 1px #ccc solid; margin: 5px 10px; } .right { float: right; padding: 2px; background: #fff; border: 1px #ccc solid; margin: 5px 10px; } #focal_img { left: 740px; bottom: 5px; z-index: 2; } </style> <img src="http://i37.photobucket.com/albums/e61/Renataewa/Eyrieness/sateyrie_faerie.png" id="focal_img" style="position: absolute;"><div id="nav" style="position: absolute;"> <a href="#top">Back To Top </a> <a href="#int">Introduction</a> <a href="#cha">Character</a> <a href="#sto">History/Story</a> <a href="#fut">Future Plans</a> <a href="#abo">About Me</a> <a href="#mee">Meet the Family</a> <a href="#con">Conclusion </a> <a href="#cre">Credits</a> <a href="/userlookup.phtml?user=usernamehere">My Lookup</a> </div> <div id="wrapper" style="position: absolute;"> <a name="top"></a> <div id="header"> Pet Name<i>This is a witty subtitle disclaimer thingy snarky statement here, yay!</i> </div> <div class="section"> <h1 style="position: relative;">Editing Notes</h1> <img src="http://images.neopets.com/items/plu_eyrie_faerie.gif" class="right"><p><b>1.</b> This layout is IE-proof -- the fixed nav, the fancy hover section. However, the save changes button is underneath the layout. To save changes to your petpage, highlight the "All rights reserved." at the bottom of the page with your cursor. Hit tab once, hit enter on your keyboard. Alternatively, you can disable styles; visit <a href="/~ddianc#save">/~ddianc#save</a> to find out how.</p> <p><b>2.</b> A precoded features include to floated images to the left or right simply add a class="left" or class="right" whenever you want to insert cute images to break up the monotony of the text.</p> <p><b>3.</b> Knowing how to code with anchors is important (fortunately, you don't have to figure out how to create subpages since this is a linear layout). To establish an anchor, put (a name="namehere")(/a) right before the (div class="section")(h1)Heading Here(/h1) of the section you want. And then to link to it, have (a href="#namehere")Link Here(/a). The anchor can actually be named anything -- just keep the spelling and capitalization consistent. For guides on anchors, check <a href="/~tizzep">/~tizzep</a> and <a href="/~imgsrc#multi">/~imgsrc#multi</a>. For example, note how the link (a href="#cha")Character(/a) on the left links to this section with the (a name="cha")(/a) anchor, which I placed right before the (div class="section")(h1)Character Profile(/h1). </p> <p><b>4.</b> For the background, I used a .swf bg wearable that I pulled from <a href="/~Hawiku'">/~Hawiku</a>. I ballooned the size up on photoshop and then muted the color. For best results, try to pick a relatively simple, non-distracting background. Also, feel free to replace the adoptable on the right with your own artwork (though keep the image relatively small for the 1024x768 resolutions). It works best if the image is transparent. If you're not that great of an artist, try perusing <a href="/~Akatzamara">/~Akatzamara</a> for adopatables.</p> <p><b>5.</b> For the meet the family section, in order to make it IE proof, I had to use links. Therefore, don't embed links within links otherwise it will blow up.</p> <p><b>6.</b> You will see something along the lines of (div style="clear:both;")(/a) in the coding. Do not remove it; it is crucial to keep the fluidity of the layout due to my usage of floats. Note how the (h1) has style="position: relative;" attribute. Don't remove it either. You need it to make it IE proof so the header doesn't get cut off.</p> <a name="cha"></a> </div> <div class="section"> <h1 style="position: relative;">Character Profile</h1> <div id="pet_id"> <img src="http://pets.neopets.com/cpn/Eridella/1/4.png"> </div> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. Fusce et quam dui, sit amet faucibus massa. Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. Praesent congue ultrices porta. Vestibulum ac dui eu libero venenatis pharetra ut et turpis. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae est dui. Proin at tellus at mi venenatis pellentesque at ut risus. Etiam iaculis ultricies est vel faucibus. Suspendisse auctor semper vestibulum. </p> <div class="column"> <h2>Likes</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. </p> <p>Fusce et quam dui, sit amet faucibus massa. </p> <p>Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. </p> <p>Praesent congue ultrices porta. </p> <p>Vestibulum ac dui eu libero venenatis pharetra ut et turpis.</p> </div> <div class="column"> <h2>Dislikes</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. </p> <p>Fusce et quam dui, sit amet faucibus massa. </p> <p>Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. </p> <p>Praesent congue ultrices porta. </p> <p>Vestibulum ac dui eu libero venenatis pharetra ut et turpis.</p> </div> <div style="clear: both;"></div> </div> <div class="section" style="text-align: center;"> <h1 style="position: relative;">Future Plans</h1> <h2>Customisation</h2> <img src="http://i46.tinypic.com/i57i51.jpg" id="preview"><ul id="customise"> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif">Name of Item Here</li> <div style="clear: both;"></div> </ul> <h2>Petpet</h2> <img src="http://images.neopets.com/items/clo_eyrie_pilothelmet.gif" class="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt diam eu ante dapibus molestie. Mauris auctor tempus odio, ut elementum enim viverra ut. Etiam ullamcorper ultrices leo, id accumsan tellus mattis ac. Donec mollis dapibus nisi, in luctus ante viverra vitae. Quisque nec arcu tellus, vitae congue quam. Mauris quis lobortis ante. Cras vitae metus sapien. In hac habitasse platea dictumst. Donec sit amet accumsan nisi. Phasellus libero eros, consectetur nec vestibulum vitae, laoreet sed leo. Fusce non mi et dui vulputate laoreet condimentum non diam. Aliquam aliquam nulla id nulla suscipit tincidunt. Aenean augue tortor, molestie nec porttitor at, tincidunt ac lorem. </p> <p> Vestibulum luctus mauris non ipsum posuere ut molestie nibh luctus. Integer ultricies elit in neque imperdiet dignissim. Nunc sit amet tellus eu nunc interdum congue vehicula a nulla. Pellentesque tempor, orci a dignissim aliquam, libero est fermentum est, eget eleifend arcu augue in libero. Curabitur porttitor risus eget mi vehicula non condimentum massa sodales. Suspendisse suscipit metus vitae erat porttitor fringilla. Donec ac urna ac enim volutpat porttitor. Morbi a massa augue, et sodales ipsum. Ut elit nunc, eleifend et porta sit amet, aliquam at neque. Nulla eu tortor ac erat tincidunt ultricies. Ut imperdiet tincidunt orci, dapibus varius ante tempus cursus. </p> </div> <div class="section"> <h1 style="position: relative;">About Me</h1> <img src="http://images.neopets.com/items/clo_eyrie_pilotscarf.gif" class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt diam eu ante dapibus molestie. Mauris auctor tempus odio, ut elementum enim viverra ut. Etiam ullamcorper ultrices leo, id accumsan tellus mattis ac. Donec mollis dapibus nisi, in luctus ante viverra vitae. Quisque nec arcu tellus, vitae congue quam. Mauris quis lobortis ante. </p> <p> Cras vitae metus sapien. In hac habitasse platea dictumst. Donec sit amet accumsan nisi. Phasellus libero eros, consectetur nec vestibulum vitae, laoreet sed leo. Fusce non mi et dui vulputate laoreet condimentum non diam. Aliquam aliquam nulla id nulla suscipit tincidunt. Aenean augue tortor, molestie nec porttitor at, tincidunt ac lorem. </p> </div> <div class="section"> <h1 style="position: relative;">Meet the Family</h1> <i style="padding-left: 10px;">Hover over the pet images for more info.</i> <div id="pet_list" style="position: relative;"> <a href="/petlookup.phtml?pet=Pyeraneo"><img src="http://pets.neopets.com/cpn/Pyeraneo/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Pyeraneo/1/2.png">Witty blurb or description goes here.</span> </a> <a href="/petlookup.phtml?pet=Cyanth"><img src="http://pets.neopets.com/cpn/Cyanth/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Cyanth/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=sea_king4194554"><img src="http://pets.neopets.com/cpn/sea_king4194554/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/sea_king4194554/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Meiav"><img src="http://pets.neopets.com/cpn/Meiav/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Meiav/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Tarolia"><img src="http://pets.neopets.com/cpn/Tarolia/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Tarolia/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=OceanPredator"><img src="http://pets.neopets.com/cpn/OceanPredator/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/OceanPredator/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Lunadira"><img src="http://pets.neopets.com/cpn/Lunadira/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Lunadira/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Corianth"><img src="http://pets.neopets.com/cpn/Corianth/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Corianth/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Koriyana"><img src="http://pets.neopets.com/cpn/Koriyana/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Koriyana/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Triduo"><img src="http://pets.neopets.com/cpn/Triduo/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Triduo/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=thatkillsme"><img src="http://pets.neopets.com/cpn/thatkillsme/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/thatkillsme/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Trudial"><img src="http://pets.neopets.com/cpn/Trudial/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Trudial/1/2.png">Witty blurb or description goes here.</span></a> <a href="/petlookup.phtml?pet=Eobr"><img src="http://pets.neopets.com/cpn/Eobr/1/1.png"><span style="position: absolute;"> <img src="http://pets.neopets.com/cpn/Eobr/1/2.png">Witty blurb or description goes here.</span></a> </div> </div> <div class="section"> <h1 style="position: relative;">Heading Here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt diam eu ante dapibus molestie. Mauris auctor tempus odio, ut elementum enim viverra ut. Etiam ullamcorper ultrices leo, id accumsan tellus mattis ac. Donec mollis dapibus nisi, in luctus ante viverra vitae. Quisque nec arcu tellus, vitae congue quam. Mauris quis lobortis ante. Cras vitae metus sapien. In hac habitasse platea dictumst. Donec sit amet accumsan nisi. Phasellus libero eros, consectetur nec vestibulum vitae, laoreet sed leo. Fusce non mi et dui vulputate laoreet condimentum non diam. Aliquam aliquam nulla id nulla suscipit tincidunt. Aenean augue tortor, molestie nec porttitor at, tincidunt ac lorem. </p> <p> Vestibulum luctus mauris non ipsum posuere ut molestie nibh luctus. Integer ultricies elit in neque imperdiet dignissim. Nunc sit amet tellus eu nunc interdum congue vehicula a nulla. Pellentesque tempor, orci a dignissim aliquam, libero est fermentum est, eget eleifend arcu augue in libero. Curabitur porttitor risus eget mi vehicula non condimentum massa sodales. Suspendisse suscipit metus vitae erat porttitor fringilla. Donec ac urna ac enim volutpat porttitor. Morbi a massa augue, et sodales ipsum. Ut elit nunc, eleifend et porta sit amet, aliquam at neque. Nulla eu tortor ac erat tincidunt ultricies. Ut imperdiet tincidunt orci, dapibus varius ante tempus cursus. </p> </div> <div class="section"> <h1 style="position: relative;">Credit</h1> <p>Template from <a href="/~thatkillsme">That Kills Me.</a> Bullets from <a href="/~La_Roque">The Lunch Box.</a> Adoptable on the right by <a href="/~_Alkazar_">Butters</a>. NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2012. All rights reserved. </p> </div> </div> IE-proof, non-centered, linear layout with fixed navigation and fancy hover coding to showcase your pets. Note that the save changes button is hidden. Either tab for it or disable styles (/~Ddianc#save for more info). If you want to change the background, try perusing through /~Hawiku for background swfs to edit -- you'll have to resize and edit in GIMP/Photoshop though.

• Linear (Banner)Preview?

  <style> a { color: #2E72C0; } a:hover { color: #FFB300; } body { text-align: center; background: url("http://i972.photobucket.com/albums/ae202/tiptoeboo/Backgrounds/diffgrey-1.jpg") repeat fixed; } .sf { display: none; } td { background: #000; } #container { width: 1000px; border: 0px #000 solid; margin: 0px auto; font: 10pt Verdana; line-height: 22px; color: #444; } #nav { float: left; width: 190px; } #nav a { display: block; text-decoration: none; color: #666; border-bottom: 1px #666 dotted; font: 11pt Georgia; padding: 7px; text-align: right; margin: 0px 5px; } #nav a:hover { color: #999; border-bottom: 1px #999 dotted; } #banner, #content { float: right; width: 800px; } #content { clear: right; margin-bottom: -80px; padding: 15px 0px; background: url("http://i48.tinypic.com/21obyol.png") repeat; } a.b { font-weight: bold !important; margin-top: 40px !important; } p { text-align: justify; margin: 10px; } #title { font: 36pt "Copperplate Gothic Light"; letter-spacing: 0px; margin: 30px 0px; } #title span { display: block; color: #999; font: 10pt "Arial Narrow"; line-height: 10px; letter-spacing: 2px; } h1 { font: 24pt "Copperplate Gothic Light"; margin: 15px 10px; border-bottom: 1px #999 dashed; text-align: left; } h2 { font: 16pt "Copperplate Gothic Light"; margin: 10px 5px; text-align: center; clear: both; } a img { border-width: 0px; } img.left { float: left; margin: 5px; } img.right { float: right; margin: 5px; } #focal_img { margin-top: -40px; } hr { clear: both; height: 65px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d48.png") no-repeat top center; margin: 10px 0px 18px 0px; border: none; } #pet_id { float: left; margin: 10px; border: 1px #ccc solid; padding: 1px; overflow: hidden; } #pet_id img { margin: 0px -65px -10px -90px; } .column { float: left; width: 50%; } .column p { margin: 10px; padding-left: 20px; text-indent: 0px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b58.png") 5px 7px no-repeat; text-align: left; } #preview { display: block; margin: 10px auto; } .cloth { margin: 5px; border: 0px #999 solid; } .cloth ul { margin: 0; padding: 0; list-style: none; } .cloth ul li { float: left; height: 80px; width: 33%; text-align: left; border: 0px #ccc solid; padding: 0px; font: 8pt Verdana; line-height: 18px; margin: 12px 0px; } .cloth ul li img { border: 1px #ddd solid; padding: 1px; float: left; margin: 0px 5px; } .cloth ul li b { display: block; font: bold 9pt Verdana; } </style> <div id="container"> <div id="nav" style="position: fixed;"> <a href="/" class="b">The Pet</a> <a href="#story">History/Story</a> <a href="/">Character Profile</a> <a href="/">Why This Pet?</a> <a href="/">Future Plans</a> <a href="/">Friends & Family</a> <a href="/" class="b">The Applicant</a> <a href="/">My Userlookup</a> <a href="/">About Me</a> <a href="/">Why Me?</a> <a href="/">References</a> <a href="/">Final Thoughts</a> </div> <img src="http://i162.photobucket.com/albums/t254/shingie/Untitled-1-2.gif" id="banner"><div id="content"> <a name="story"></a> <h1>Story Prologue Prose Thingamabob Here.</h1> <a href="/~Wilia"><img src="http://i907.photobucket.com/albums/ac276/venadopts/wiliadraik/darigan.png" class="left"></a> <p><b>Once upon a time, there was an ugly barnacle. He was so ugly, everybody died. The end :D </b> In all cereals, I'mma be using this section to add some notes about editing the layout and other things to be aware of.</p> <p><b>1.</b> The fixed navigation on your left does not stick in IE. Unlike the previous version, this layout is centered and non-fluid (meaning the widths don't change as browser window/resolution changes). This layout accomodates for a 1024x768 resolution or larger.</p> <p><b>2.</b> Some precoded features includes the ability to float images to the left or right simply add a class="left" or class="right" whenever you want to insert cute adoptables or images to break up the monotony of the text. Either replace the images with your own artwork or find an <a href="/~Akatzamara">adoptable listing directory</a> to decorate the page.</p> <p><b>3.</b> Knowing how to code with anchors is important (fortunately, you don't have to figure out how to create subpages since this is a linear layout). To establish an anchor, put a (a name="namehere")(/a) right before the (h1)(/h1) of the section you want. And then to link to it, have (a href="#namehere")Link Here(/a). The anchor can actually be named anything -- just keep the spelling and capitalization consistent. For guides on anchors, check <a href="/~tizzep">/~tizzep</a> and <a href="/~imgsrc#multi">/~imgsrc#multi</a>. For example, note how the link (a href="#story")History/Story(/a) on the left links to this section with the (a name="story")(/a) anchor, which I placed right before the (h1)Story Prologue Prose Thingamabob Here(/h1). </p> <p><b>4.</b> Any text not enclosed within paragraph tags will be centered. If you're going to have a long wall of text, remember to align the text to the left, since uneven lines are very jarring to read for a long time. Always keep your paragraphs short. I highly recommend viewing <a href="/~Wentiko">How to Write for the Web</a> if you don't want to bore your foster to death.</p> However, centered text on occasion can be helpful with emphasizing something (: <p><b>5.</b> Note that the #nav and #content div pixel values almost equal 1000px, which both divs are enclosed in a #container div that is 1000px wide. You can adjust the width of the #container div, but remember to adjust the #nav and #content div. Also, you can adjust the width of the #nav and #content div as well, but both should equal up to 1000px. The banner above can be of any height, but for best results make it the same width as the #content div.</p> <hr> <h1>Character Profile</h1> <div id="pet_id"> <img src="http://pets.neopets.com/cp/ogrjj5h7/1/4.png"> </div> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. Fusce et quam dui, sit amet faucibus massa. Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. Praesent congue ultrices porta. Vestibulum ac dui eu libero venenatis pharetra ut et turpis. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae est dui. Proin at tellus at mi venenatis pellentesque at ut risus. Etiam iaculis ultricies est vel faucibus. Suspendisse auctor semper vestibulum. </p> <div class="column"> <h2>Likes</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. </p> <p>Fusce et quam dui, sit amet faucibus massa. </p> <p>Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. </p> <p>Praesent congue ultrices porta. </p> <p>Vestibulum ac dui eu libero venenatis pharetra ut et turpis.</p> </div> <div class="column"> <h2>Dislikes</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. </p> <p>Fusce et quam dui, sit amet faucibus massa. </p> <p>Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. </p> <p>Praesent congue ultrices porta. </p> <p>Vestibulum ac dui eu libero venenatis pharetra ut et turpis.</p> </div> <hr> <h1>Future Plans</h1> <h2>Customisation</h2> <img src="http://i.imgur.com/TpY5d.png" id="preview"><div class="cloth"><ul> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> <li> <img src="http://images.neopets.com/items/mall_clo_50sblouse.gif"><b>Name of Item Here</b> Neocash, Rarity, blurb etc, here.</li> </ul></div> <h2>Petpet</h2> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <h2>Other Future Plans</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam. Fusce et quam dui, sit amet faucibus massa. Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros. Praesent congue ultrices porta. Vestibulum ac dui eu libero venenatis pharetra ut et turpis. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae est dui. Proin at tellus at mi venenatis pellentesque at ut risus. Etiam iaculis ultricies est vel faucibus. Suspendisse auctor semper vestibulum. </p> <a href="/~Arquiro"><img src="http://i43.tinypic.com/2uivtir.png" class="left"></a> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <hr> <h1>Friends & Family (AKA The Part To Brag About Your Current Pets)</h1> <h2>Pet Name · <a href="/">Pet Lookup</a> · <a href="/">Petpage</a> </h2> <img src="http://i162.photobucket.com/albums/t254/shingie/lunanew.jpg" class="right" style="height: 250px;"><p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <h2>Pet Name · <a href="/">Pet Lookup</a> · <a href="/">Petpage</a> </h2> <img src="http://i41.tinypic.com/eq5z07.jpg" class="left" style="height: 250px;"><p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <h2>Pet Name · <a href="/">Pet Lookup</a> · <a href="/">Petpage</a> </h2> <img src="http://i162.photobucket.com/albums/t254/shingie/sb6nac.jpg" class="right" style="height: 250px;"><p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <hr> <h1>About Me</h1> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <a href="/~Comtrya"><img src="http://i260.photobucket.com/albums/ii24/susara86/dadopt_darigan.png" class="right"></a> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <hr> <h1>References (AKA screenshots of your neofriends telling you how awesome you are)</h1> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <hr> <h1>Final Thoughts</h1> <a href="/~Lenjeu"><img src="http://i19.photobucket.com/albums/b154/Milikii/draiks/darigan.gif" class="left"></a> <p> Donec sit amet ullamcorper nibh. Integer pretium, est vel porta facilisis, tellus metus varius ipsum, at consequat tellus erat ut tellus. Praesent quis erat eget magna tincidunt porta quis ac tortor. Nam nec justo a mauris volutpat iaculis eget eu urna. Integer a libero in tellus rhoncus semper. Maecenas odio dui, sagittis et pharetra ac, malesuada eu elit. Cras adipiscing rutrum libero, non suscipit lacus tincidunt eget. Etiam felis orci, sagittis eget auctor a, mollis sed tortor. Vestibulum sem neque, suscipit ac eleifend ut, sollicitudin quis dolor. Cras volutpat ullamcorper justo ut gravida.</p> <hr> Template from <a href="/~thatkillsme">That Kills Me</a>. Background from <a href="/~kiarlie;">Teacake Backgrounds</a>. Dividers and Bullets from <a href="/~La_Roque">The Lunch Box</a>. Adoptables Linked to their respective artists. <br><br>NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/aboutus.phtml">Neopets, Inc.</a>, © 1999-2012. ® denotes Reg. US Pat. & TM Office. All rights reserved. </div> <div style="clear: both;"></div> </div> Non IE-proof, centered, linear layout with fixed navigation. Features a banner for you to replace with your own artwork. It works best if the image is transparent). Banner can be of any height but should match the width of the #content div.

• Blog-StylePreview?

  <style> a { color: #86A0B7; text-decoration: none; } a:hover { color: #96B4CE; } .sf { display: none; } body { text-align: center; } td { background: #000; } #container { margin: 0px auto; float: left; font: 8pt Verdana; line-height: 18px; background: url("http://img687.imageshack.us/img687/8268/bgpetapp.png") no-repeat; width: 1000px; height: 500px; } #content p { text-align: left; } #content { top: 8px; left: 470px; padding: 5px; height: 470px; color: #606060; width: 510px; border: 1px #999 solid; overflow: auto; background: #fff; z-index: 1; } #nav { display: block; margin: 10px; clear: both; } #nav a { float: left; width: 23%; padding: 3px 1px; margin: 1px; font: 8pt Verdana; background: #e6e6e6; color: #999; border: 1px #ccc solid; } #nav a:hover { background: #E0E0E0; } #nav hr { clear: both; visibility: hidden; margin: 5px 0px; background: none; height: 1px; } hr { margin: 15px 0px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d29.png") no-repeat top center; height: 40px; border-width: 0px; clear: both; } #title { font: 44pt "Edwardian Script ITC"; text-align: center; margin: 10px 0px; color: #333; } #title span { display: block; font: 6pt Verdana; letter-spacing: 1px; text-transform: uppercase; color: #666; } h1 { text-align: center; font: 14pt Calibri; color: #999; padding: 2px 0px 2px 0px; clear: both; margin: 0px 0px 15px 0px; text-transform: capitalize; } h2 { margin: 5px 0px; font: bold 8pt Verdana; color: #000; } #credit { font: 7pt Verdana; color: #999; clear: left; width: 1000px; text-align: right; padding-top: 5px; } #focal_img { float: right; margin: 5px 10px; border: 1px #e0e0e0 solid; } #pet_id { float: left; margin: 0px 10px 5px 0px; border: 1px #ccc solid; padding: 1px; overflow: hidden; } #pet_id img { margin: -35px -85px -35px -120px; } .column { float: left; width: 45%; border: 1px #ccc solid; margin: 5px 0px 15px 5px; padding: 5px; } .column p { margin: 3px 0px; padding-left: 20px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b58.png") 5px 7px no-repeat; } #art_viewer { margin: 3px auto; width: 90%; border: 1px #ccc solid; } #art_viewer img { height: 120px; width: 130px; margin: 2px; padding: 1px; border: 1px #ddd solid; } .pet { margin: 0px 10px 10px 0px; overflow: hidden; float: left; border: 1px #ccc solid; padding: 1px; } .pet img { margin: 0px -35px; } #family { margin: 5px auto; width: 95%; } #family hr { height: 5px; margin: 5px; } #family h2 { text-align: left; } </style> <div id="container" style="position: relative;"> <div id="content" style="position: absolute;"> <a name="top"></a> <img src="http://images.neopets.com/items/plu_kacheek_pink.gif" id="focal_img"><div id="title"> <span>Presenting the best petpage appplication ever...</span> Pet Name Here </div> <div id="nav"> <a href="#int">Introduction</a> <a href="#sto">Story</a> <a href="#cha">Character</a> <a href="#fut">Future Plans</a> <a href="#art">Artwork</a> <a href="#abo">About Me</a> <a href="#mee">Meet the Family</a> <a href="#con">Conclusion </a> <a href="#link">Feel free</a> <a href="#link">to add/delete</a> <a href="#link">links</a> <a href="#link">on your whim</a> <hr> </div> <hr> <a name="int"></a> <h1>Introduction</h1> <p>Your introduction goes here. </p> <hr> <a name="sto"></a> <h1>story</h1> <p>Begin your story here.</p> <hr> <a name="cha"></a> <h1>Character Profile</h1> <div id="pet_id"> <img src="http://pets.neopets.com/cp/zn8lthzr/1/4.png"> </div> <p> Duis id tortor mauris, vel porttitor lorem. Nam ac ligula risus, quis convallis turpis. Nulla iaculis pulvinar velit a facilisis. Sed et nisl lorem, eget consectetur turpis. Phasellus interdum pharetra elit, et varius est pulvinar in. Integer quis dignissim arcu. Pellentesque in justo et tortor consequat dictum. Aliquam justo ligula, blandit ut placerat vitae, accumsan eu diam. </p> <p> Nulla facilisi. Nunc sed sem mauris. Ut sit amet augue ac purus imperdiet viverra in vel risus. In lacinia hendrerit ipsum, et egestas odio ultrices eu. Pellentesque vestibulum metus a elit consequat mollis. Phasellus tempus velit ut lacus bibendum non elementum est pulvinar. Donec facilisis auctor nibh, eu pellentesque turpis ultrices vel. Vivamus et tristique ante. Fusce volutpat, libero eget vestibulum semper, nunc purus fermentum neque, nec faucibus ante turpis a purus. Vestibulum ut sapien sem. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus, ligula non placerat rhoncus, lacus arcu volutpat libero, ac rhoncus ante sapien in ligula. Etiam sodales egestas metus non malesuada. In hac habitasse platea dictumst. In hac habitasse platea dictumst. </p> <div class="column" style="clear: left;"> <h2>Likes</h2> <p>Lorem ipsum dolor sit amet </p> <p> consectetur adipiscing elit </p> <p> Aenean id scelerisque urna </p> <p> Etiam consequat viverra </p> <p> nulla eget laoreet turpis </p> </div> <div class="column"> <h2>Dislikes</h2> <p> pulvinar sit amet </p> <p> Fusce ante massa </p> <p> facilisis non feugiat quis </p> <p> pharetra at lectus </p> <p> nulla eget laoreet turpis </p> </div> <hr> <a name="fut"></a> <h1>Future Plans</h1> <p>Talk about your future plans. </p> <hr> <a name="art"></a> <h1>Artwork</h1> Drag and drop for full view! <div id="art_viewer"> <img src="http://images.neopets.com/backgrounds/sketch/800_greypetpets.jpg"><img src="http://images.neopets.com/backgrounds/sketch/800_hasee.jpg"><img src="http://images.neopets.com/backgrounds/sketch/800_kacheek.jpg"> </div> <hr> <a name="abo"></a> <h1>About Me</h1> <p>Start typing about yourself. </p> <hr> <a name="mee"></a> <h1>Meet the Family</h1> <div id="family"> <a href="/"> <div class="pet"> <img src="http://pets.neopets.com/cp/lj6lgno8/2/2.png"> </div> </a> <h2>Sea King the Red Jetsam</h2> <p>Blurb here.</p> <hr> <a href="/"> <div class="pet"> <img src="http://pets.neopets.com/cp/mbnhlmnz/1/2.png"> </div> </a> <h2>Sea King the Red Jetsam</h2> <p>Blurb here.</p> <hr> <a href="/"> <div class="pet"> <img src="http://pets.neopets.com/cp/nmkndh33/1/2.png"> </div> </a> <h2>Sea King the Red Jetsam</h2> <p>Blurb here.</p> </div> <hr> <a name="con"></a> <h1>Conclusion</h1> <p>Your conlusion goes here. </p> </div> </div> <div id="credit"> Layout Template from <a href="/~thatkillsme">That Kills Me.</a> | Bullets and Dividers from <a href="/~solidarized">The Lunch Box.</a> | NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. </div> The aesthetics of this template rests predominantly on your skills as an artist; replace the background image with your artwork or whatever. For your character id picture and the meet the family section, the image has already been cropped with negative margins. All you have to do is replace the image URLs from the rainbow pool or from your lookup's pet images.

---

Portfolio

• The Gallery WalkPreview?

  <style> .sf { font: 7pt Verdana; line-height: 14px; } a { color: #339CFF; text-decoration: none; } a:hover { color: #8AC6FF; } body { font: 9pt Verdana; background: #202020; color: #999; line-height: 18px; text-align: center; } #container { background: #2D2D2D; width: 1000px; color: #e0e0e0; margin: 60px auto -40px auto; overflow: hidden; padding-bottom: 20px; } #container p { text-align: left; } .section { background: #3D3D3D; margin: 0px 20px 20px 20px; padding: 8px; text-align: center; } h1 { font: 18pt Georgia; padding-left: 10px; line-height: 20px; text-align: left; letter-spacing: 1px; clear: both; color: #96FF98; border-bottom: 1px #96FF98 solid; margin: 30px 20px 0px 20px; } #blog { height: 300px; overflow: auto; } h2 { color: #fff; font: normal 16pt Georgia; margin: 30px 0px; text-align: left; display: block; } h2 span { float: left; margin: -15px 10px 10px 0px; background: #333; font: 7pt Verdana; width: 65px; padding: 5px 0px; text-align: center; text-transform: uppercase; letter-spacing: 1px; } h2 span b { font: normal 16pt Verdana; display: block; } img { border: 1px #666 solid; padding: 2px; background: #999; } .section img { display: block; margin: 5px auto; } #nav { background: #000; padding: 10px; top: 0px; left: 0px; width: 100%; } #nav a { color: #fff; font: bold 10pt Verdana; margin: 15px 0px; padding: 5px; border: 1px #000 solid; } #nav a:hover { background: #333; } #icons { height: 110px; margin-top: 20px; } #icons img { margin: 0px 25px; float: left; } b, i { color: #82BA83; } strong { display: block; margin: 12px 0px; line-height: 16px; color: #82BA83; text-align: left; } </style> <div id="nav" style="position: fixed;"> <a href="/">About Me</a> <a href="/">FAQ</a> <a href="/">Blog</a> <a href="/">Non Neo-related </a> <a href="/">Neo-related</a> <a href="/">Requests</a> <a href="#cred">Credits</a> </div> <div id="container"> <h1>Welcome to my Art Page!</h1> <div class="section"> <div id="icons"> <img src="http://i1104.photobucket.com/albums/h327/eponarf/yj103-12.png"><img src="http://i1104.photobucket.com/albums/h327/eponarf/yj103-5.png"><img src="http://i1104.photobucket.com/albums/h327/eponarf/yj101-10.png"><img src="http://i1104.photobucket.com/albums/h327/eponarf/yj101-1.png"><img src="http://i1104.photobucket.com/albums/h327/eponarf/yj102-2.png"><img src="http://i1104.photobucket.com/albums/h327/eponarf/yj104-1.png"> </div> <p>This is <b>bold</b>. This is <i>italic</i>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan euismod viverra. Etiam et pellentesque risus. Morbi et orci ut mi condimentum bibendum eu at justo. Nunc tincidunt, tellus quis porttitor consequat, nibh risus hendrerit tellus, quis scelerisque libero lectus non risus. Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam. </p> </div> <h1>About Me</h1> <div class="section"> <p>Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam.</p> <p> Etiam lacus risus, adipiscing sit amet elementum nec, placerat ut nisl. Quisque ullamcorper velit id lectus blandit lobortis. Donec varius purus eget neque lacinia hendrerit. Nulla eu elit nibh, et interdum massa. Curabitur rutrum commodo placerat. Etiam ut velit mauris, sed aliquet nisl. Nunc eu risus quam. Nulla sollicitudin iaculis velit vulputate mattis. Duis est dui, tristique sit amet dapibus vitae, sodales et metus. Aliquam erat volutpat. Ut egestas posuere sollicitudin. Suspendisse potenti. </p> </div> <h1>Frequently Asked Questions</h1> <div class="section"> <strong>This is a question of questions that ultimately make a question?</strong> <p>Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam.</p> <strong>This is a question of questions that ultimately make a question?</strong> <p> Etiam lacus risus, adipiscing sit amet elementum nec, placerat ut nisl. Quisque ullamcorper velit id lectus blandit lobortis. Donec varius purus eget neque lacinia hendrerit. Nulla eu elit nibh, et interdum massa. Curabitur rutrum commodo placerat. </p> <strong>This is a question of questions that ultimately make a question?</strong> <p> Etiam ut velit mauris, sed aliquet nisl. Nunc eu risus quam. Nulla sollicitudin iaculis velit vulputate mattis. Duis est dui, tristique sit amet dapibus vitae, sodales et metus. Aliquam erat volutpat. Ut egestas posuere sollicitudin. Suspendisse potenti. </p> </div> <h1>Blog of Updates and Stuff</h1> <div class="section" id="blog"> <h2> <span>Sept<b>21</b>2011</span>Witty statement heading here.</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan euismod viverra. Etiam et pellentesque risus. Morbi et orci ut mi condimentum bibendum eu at justo. Nunc tincidunt, tellus quis porttitor consequat, nibh risus hendrerit tellus, quis scelerisque libero lectus non risus. Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam. </p> <p> Etiam lacus risus, adipiscing sit amet elementum nec, placerat ut nisl. Quisque ullamcorper velit id lectus blandit lobortis. Donec varius purus eget neque lacinia hendrerit. Nulla eu elit nibh, et interdum massa. Curabitur rutrum commodo placerat. Etiam ut velit mauris, sed aliquet nisl. Nunc eu risus quam. Nulla sollicitudin iaculis velit vulputate mattis. Duis est dui, tristique sit amet dapibus vitae, sodales et metus. Aliquam erat volutpat. Ut egestas posuere sollicitudin. Suspendisse potenti. </p> <h2> <span>Aug<b>21</b>2011</span>Witty statement heading here.</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan euismod viverra. Etiam et pellentesque risus. Morbi et orci ut mi condimentum bibendum eu at justo. Nunc tincidunt, tellus quis porttitor consequat, nibh risus hendrerit tellus, quis scelerisque libero lectus non risus. Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam. </p> <p> Etiam lacus risus, adipiscing sit amet elementum nec, placerat ut nisl. Quisque ullamcorper velit id lectus blandit lobortis. Donec varius purus eget neque lacinia hendrerit. Nulla eu elit nibh, et interdum massa. Curabitur rutrum commodo placerat. Etiam ut velit mauris, sed aliquet nisl. Nunc eu risus quam. Nulla sollicitudin iaculis velit vulputate mattis. Duis est dui, tristique sit amet dapibus vitae, sodales et metus. Aliquam erat volutpat. Ut egestas posuere sollicitudin. Suspendisse potenti. </p> <h2> <span>Aug<b>21</b>2011</span>Witty statement heading here.</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan euismod viverra. Etiam et pellentesque risus. Morbi et orci ut mi condimentum bibendum eu at justo. Nunc tincidunt, tellus quis porttitor consequat, nibh risus hendrerit tellus, quis scelerisque libero lectus non risus. Maecenas tempor varius sem non tempus. Donec sodales eros a est condimentum auctor et at nisi. Aliquam velit metus, laoreet non sagittis vitae, accumsan quis sapien. Nullam consectetur mattis sem, non sollicitudin ipsum vulputate nec. Proin ornare ultrices enim et suscipit. Nullam eleifend lectus in purus ornare eget adipiscing elit aliquam. </p> <p> Etiam lacus risus, adipiscing sit amet elementum nec, placerat ut nisl. Quisque ullamcorper velit id lectus blandit lobortis. Donec varius purus eget neque lacinia hendrerit. Nulla eu elit nibh, et interdum massa. Curabitur rutrum commodo placerat. Etiam ut velit mauris, sed aliquet nisl. Nunc eu risus quam. Nulla sollicitudin iaculis velit vulputate mattis. Duis est dui, tristique sit amet dapibus vitae, sodales et metus. Aliquam erat volutpat. Ut egestas posuere sollicitudin. Suspendisse potenti. </p> </div> <h1>Name of Art Piece</h1> <div class="section"> <img src="http://images.neopets.com/backgrounds/sketch/800_illusen_day.jpg"> Witty remark caption commentary thing can go here; date completed, time it took, medium, etc. </div> <h1>Name of Art Piece</h1> <div class="section"> <img src="http://images.neopets.com/backgrounds/sketch/800_maraquanpetpets.jpg"> Witty remark caption commentary thing can go here; date completed, time it took, medium, etc. </div> <h1>Name of Art Piece</h1> <div class="section"> <img src="http://images.neopets.com/backgrounds/sketch/800_flotsam.jpg"> Witty remark caption commentary thing can go here; date completed, time it took, medium, etc. </div> <a name="cred"></a> Template from <a href="/">That Kills Me</a> | Icons from <a href="/~Psychochromia">Psychochromia</a> </div> This predominantly dark layout works well with making artwork look more vibrant. Precoded features include a blog and faq section. Try not to let your art images exceed 900 pixels in width otherwise it will not stay within the confines of the layout. Navigation does not stick in IE.

• 24 Piece GalleryPreview?

  <style> a { color: #3D8AFF; text-decoration: none; } a:hover { color: #7FB2FF; } table { background: #000; } .sf { display: none; } body { text-align: center; } #container { font: 8pt Verdana; line-height: 18px; color: #444; text-align: left; margin: 5px auto -47px auto; z-index: 99; width: 100%; overflow: hidden; height: 540px; } .sidebar { height: 540px; width: 125px; float: left; border-right: 1px #ccc solid; } .sidebar a { float: left; width: 47%; } .sidebar a img { height: 50px; width: 50px; margin: 3px 5px; border-width: 0px; } .sidebar a div { display: none; text-align: center; font: 8pt Verdana; width: 800px; color: #444; top: 0px; left: 130px; background: #fff; z-index: 100; } .sidebar a div img { width: auto !important; height: 500px !important; } .sidebar a:hover div { display: block; color: #444; } .prev, .next { font: 7pt Verdana; text-align: right; margin: 5px 3px; width: 43% !important; } .next { float: right !important; } #welcome { top: 20px; left: 140px; height: 510px; width: 790px; overflow: auto; font: 8pt Verdana; line-height: 18px; text-align: left; } h1 { margin: 15px 0px; font: 24pt Georgia; } </style> <div id="container"> <div id="welcome" style="position: absolute;"> <h1>Welcome to my Portfolio!</h1> <p> <b>You can put a welcome message here.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum varius sem quis varius. Sed eros arcu, elementum non tristique ut, molestie sit amet quam. Praesent odio leo, feugiat ac congue ut, ultrices et ipsum. Phasellus ullamcorper elementum lacus, eu mattis ligula semper bibendum. Suspendisse erat diam, porta quis aliquet pretium, pulvinar feugiat arcu. Mauris vitae neque lorem, at aliquet leo. Phasellus dolor tortor, varius eu vestibulum a, porta ut arcu. Proin suscipit, lacus ultricies sodales iaculis, diam orci lacinia sapien, quis volutpat nisi odio quis erat. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse gravida, justo a porta congue, quam metus pretium lacus, at tempor ligula ipsum sit amet odio. Praesent nisi neque, porta et imperdiet vel, fermentum sit amet est. Phasellus porta sem sit amet ante facilisis tristique. Aliquam tristique pharetra vestibulum. Donec a velit massa. Aliquam molestie egestas dolor, et ullamcorper orci aliquam nec.</p> <h1>hover over images on your left c:</h1> <p> Donec varius neque ante, at semper sapien. Suspendisse luctus mauris in orci porttitor non luctus tellus molestie. Vivamus in leo nisi, eu scelerisque quam. Vestibulum augue ipsum, eleifend nec lobortis in, posuere ut tortor. Curabitur semper dui eget lorem blandit et ultrices justo convallis. Nulla vitae magna diam, at blandit diam. Morbi varius, sem ac aliquet aliquam, lacus odio ullamcorper lorem, et gravida metus massa nec lectus. Nam non dolor tincidunt velit porttitor condimentum sed non tortor. Cras quis purus at mauris eleifend gravida. In hac habitasse platea dictumst. </p> <p>Layout Template from <a href="/~thatkills">That Kills Me.</a></p> </div> <a name="pg1"></a> <div class="sidebar" style="position: relative;"> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_altadorpetpets.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_altadorpetpets.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_acara.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_acara.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_flotsam.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_flotsam.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_gnorbu.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_gnorbu.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_hissi.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_hissi.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_illusen_day.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_illusen_day.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_aisha.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_aisha.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_babypets.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_babypets.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_arkmite.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_arkmite.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_draik.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_draik.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_easterpetpets.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_easterpetpets.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_flowper.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_flowper.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_gruslen.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_gruslen.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_battlefaerie.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_battlefaerie.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_kauvara.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_kauvara.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_lenny.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_lenny.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_poogle.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_poogle.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/backgrounds/sketch/800_techo.jpg"><div style="position: absolute;"> <img src="http://images.neopets.com/backgrounds/sketch/800_techo.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="#pg2" class="next">Next »</a> </div> <div style="clear: both;"></div> <a name="pg2"></a> <div class="sidebar" style="position: relative;"> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><div style="position: absolute;"> <img src="http://i162.photobucket.com/albums/t254/shingie/Boss-2.jpg"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="#pg1" class="prev">« Previous</a> <a href="#pg3" class="next">Next »</a> </div> <div style="clear: both;"></div> <a name="pg3"></a> <div class="sidebar" style="position: relative;"> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/pets/sad/usul_mutant_baby.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="#pg2" class="prev">« Previous</a> <a href="#pg4" class="next">Next »</a> </div> <div style="clear: both;"></div> <a name="pg4"></a> <div class="sidebar" style="position: relative;"> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="/"><img src="http://images.neopets.com/caption/caption_407.gif"><div style="position: absolute;"> <img src="http://images.neopets.com/caption/caption_407.gif"><br>Witty subtitle runs here. Time it took, medium, art materials used, date completed, etc.</div></a> <a href="#pg3" class="prev">« Previous</a> </div> </div> Hovering over the tiny images on the left will make its respective bigger image appear. To accomodate for people with 1024x768, try keep your images around 500px in height. Even though the link is an anchor that takes you nowhere, do not remove it. That component is crucial to make it IE-proof. You can, however, replace the link destination to anything you wish. In IE, the welcome message disappears when you click on the next anchor links and doesn't appear unless you're on the first page.

• Graphic Maker'sPreview?

  <style> a img { border-width: 0; } a { color: #007BFF; text-decoration: none; } a:hover { color: #0061BD; } body { font: 0px Verdana; } .sf { display: none; } td { background: #000; display: none; } #header { background: #363636; padding: 40px 20px; display: block; font: 18pt Verdana; line-height: 0px; color: #fff; } #header span { color: #5C5C5C; } #nav { background: #d9d9d9; text-align: center; padding: 2px 0px; } #nav a { color: #9c9c9c; font: 14pt "Times New Roman"; padding: 0px 5px; margin: 0px 20px; text-transform: uppercase; text-decoration: none; } #nav a:hover { color: #696969; } #content_container { font: 12pt Verdana; line-height: 24px; color: #666; overflow: hidden; padding: 0px 10px; height: 77%; margin-top: 3px; } .subpage { height: 100%; overflow: auto; text-align: center; } #credit { font: 7pt Verdana; padding: 5px 5px 0px 0px; text-align: right; color: #999; } #banner img { width: 275px; margin: 5px; } #button img { margin: 2px; } p { text-align: left; } #stats { float: right; margin: 18px 0px 7px 7px; padding: 5px; background: #ddd; } #layout_viewer { float: left; background: #fff; width: 75px; } #layout_viewer a { float: left; display: block; width: 45%; font: 18pt "Century Gothic"; } #layout_viewer a:hover { background: #ccc; } #layout_viewer a span { display: none; left: 80px; top: 0px; font: 12pt Verdana; text-align: left; color: #666; background: #fff; } #layout_viewer a:hover span { display: block; } span img { height: 500px; } </style> <div id="header"> Welcome to My Portfolio! <span>| Image-heavy, please allow time for loading. Thanks for your patience</span> </div> <div id="nav"> <a href="#home">Home</a> <a href="#buttons">Buttons</a> <a href="#banners">Banners</a> <a href="#fancy">Layouts</a> <a href="#misc">Misc. Graphics</a> </div> <div id="content_container"> <a name="home"></a> <div class="subpage"> <div id="stats"> <b>Statistics</b> <br>Buttons: 94 <br>Banners: 15 <br>Layouts: 8 <br>Misc Graphics: 5 </div> <p><b>Welcome to my portfolio! Type out a welcome message here.</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non purus venenatis dolor malesuada vestibulum vitae sit amet urna. Suspendisse potenti. Mauris dapibus metus id dui ullamcorper adipiscing. In sem augue, venenatis ut molestie sed, bibendum dapibus dui. Praesent tincidunt convallis mi, ut lobortis augue iaculis pellentesque. In magna lacus, mollis quis suscipit sit amet, iaculis non nulla. Morbi et nunc pharetra dolor dignissim bibendum. Ut ut risus nisi, ac ullamcorper sapien. Quisque nec lacus turpis, id hendrerit quam. Suspendisse eu urna ut ante hendrerit lacinia. Nullam quis nisl at arcu dignissim tincidunt non eget massa. Ut sed lorem augue, sed commodo elit. Nullam sapien nulla, rhoncus in sagittis ut, interdum at urna. Nunc ut elit tortor, sit amet venenatis urna. Maecenas viverra nunc eu est accumsan quis sagittis ligula vehicula. Aenean in turpis nec urna ornare consequat. Fusce metus urna, egestas vitae sodales sit amet, interdum eget metus. Phasellus consequat arcu tortor. Sed luctus, dui sit amet aliquet viverra, mauris urna pretium libero, ut aliquam ligula urna et urna. </p> </div> <a name="buttons"></a> <div class="subpage" id="button"> Buttons here. Look back for the stylesheets for #button img { declaration here } and make appropriate modifications. </div> <a name="banners"></a> <div class="subpage" id="banner"> Banners here. Look back for the stylesheets for #banner img { declaration here } and make appropriate modifications. </div> <a name="fancy"></a> <div class="subpage" style="position: relative;"> <div id="layout_viewer"> <a href="#na">1 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span> </a> <a href="#na">2 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">3 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">4 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">5 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">6 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">7 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">8 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">9 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">10 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">11 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span> </a> <a href="#na">12 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">13 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span> </a> <a href="#na">14 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">15 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">16 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">17 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">18 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">19 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> <a href="#na">20 <span style="position: absolute;">Witty Caption here<br><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"></span></a> </div> <br><br> Hover over the numbers <br>to preview the layouts :3 </div> <a name="misc"></a> <div class="subpage"> Misc Graphics here. </div> </div> <div id="credit"> Content © <a href="/userlookup.phtml?user=usernamehere">username</a> | Layout Template from <a href="/~thatkillsme">That Kills Me</a> | NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. </div> Multipaged and anchored. Designed to showcase a variety of graphics, from buttons to banners to layouts. The layout-viewer is a fancy hover code that showcases each layout. For the layout-viewer, even though the link is an anchor that takes you nowhere, do not remove it. That component is crucial to make it IE-proof. You can, however, replace the link destination to anything you wish.

---

UFT/UFA

• UFT StandardPreview?

  <style> a { color: #007BFF; text-decoration: none; } a:hover { color: #63AFFF; } body, .sf { text-align: center; background: #ccc; } td { background: #000; } .sf { font: 8pt Verdana; } #container { border: 1px #999 solid; background: #fff; width: 800px; margin: 10px auto -60px auto; padding: 5px; font: 8pt Verdana; line-height: 16px; text-align: center; } #title { padding: 10px 20px; z-index: 100; background: #333; color: #fff; margin: 10px 10px 10px -40px; display: inline; float: left; font: 38pt "Century Gothic"; letter-spacing: 1px; } .column { width: 45%; float: left; border: 1px #999 solid; padding: 5px; margin: 0px 10px 10px 10px; font: 7.5pt verdana; line-height: 14px; background: #e0e0e0; text-align: left; } .column img { float: left; border: 1px #ccc solid; background: #fff; padding: 1px; margin: 1px 5px 1px 1px; } .column h1 { padding: 5px 10px; margin: 2px -15px 5px 0px; width: 195px; background: #333; color: #fff; font: normal 8pt Verdana; float: right; text-align: right; } #tkm { display: block; clear: both; text-align: center; } #container p { text-align: left; } #seeking { border: 1px #999 solid; margin: 5px auto; width: 97%; clear: both; text-align: center; } #seeking img { border: 1px #ccc solid; padding: 1px; margin: 2px; } #seeking h1 { font: bold 8pt Verdana; text-align: center; } hr { visibility: hidden; clear: both; } </style> <div id="container"> <div id="title" style="position: relative;"> My UFT Pets </div> <p> <b>You can type out a brief welcome message here, if you'd like.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. Nunc vitae urna sit amet lorem pharetra porttitor. </p> <hr> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div class="column"> <h1>Xazo the Blue Ogrin</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna ante, dapibus sit amet pharetra pulvinar, scelerisque ut neque. Proin eu dapibus erat. Maecenas tempus fermentum augue eget pharetra. In hac habitasse platea dictumst. </div> <div id="seeking"> <h1>Dream Pets / Seeking in Particular</h1> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"><img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png"> </div> Layout Template from <a href="/~thatkillsme">That Kills Me.</a> </div> Linear, with pets displayed two at a time. Yes, the headers jut ouf the box; if you don't want that, remove the negative margin. Be careful not to use any additional images for each #column div, for images are automatically floated to the left unless specified with an id.

• UFT JumboPreview?

  <style> td { background: #000; } a { color: #2D9DFF; text-decoration: none; } a:hover { color: #7AC1FF; } a img { border-width: 0px; } .sf { display: none; } body { text-align: center; font: 8pt Verdana; line-height: 18px; color: #444; } #container { width: 1000px; margin: 0px auto -30px auto; background: #fff; } p { text-align: left; } h1 { font: 32pt "Lucida Sans Unicode"; padding: 20px 0px; margin: 0px 0px 20px 0px; color: #666; background: #ddd; border-bottom: 5px #ccc solid; } h2 { font: 16pt "Lucida Sans Unicode"; color: #999; text-decoration: underline; margin: 5px 10px; } ul.pet_list { list-style: none; padding: 0; margin: 0; } ul.pet_list li { float: left; width: 50%; margin: 20px 0px; color: #666; text-align: left; } ul.pet_list li span { overflow: hidden; float: left; margin-right: 10px; border: 3px #ddd solid; } ul.pet_list li img { margin: 0px -50px; } #tkm { color: #999; clear: both; margin: 0px auto -45px auto; padding: 10px 0px; } </style> <h1>Pets Up For Trade</h1> <div id="container"> <p><b>Hello world!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit venenatis semper. Praesent commodo porta ipsum, sit amet suscipit nunc condimentum in. Cras nec odio metus. Aliquam erat volutpat. In turpis lacus, sagittis sit amet adipiscing non, malesuada ac nunc. Aliquam leo nulla, congue sed rutrum fermentum, posuere eu nisl. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer eget erat massa. Fusce tempus purus id neque lacinia mollis. Duis rutrum porta ultricies. Nunc consequat posuere ornare. Phasellus sed molestie erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p> Pellentesque tincidunt tortor sed lectus vehicula et molestie est convallis. Etiam ac elit purus. Vivamus in ligula ut sem facilisis tempus. Nulla scelerisque velit quis eros aliquam luctus. Donec in nisl vel nisl accumsan fermentum nec et lacus. Curabitur magna nunc, volutpat et ullamcorper at, volutpat nec tortor. Donec ac mauris non erat mollis hendrerit eget at sem.</p> <ul class="pet_list"> <li> <a href="/petlookup.phtml?pet=Meiav"><span><img src="http://pets.neopets.com/cp/8gnbo844/1/4.png"></span><h2>Pet Name</h2></a> Gender: Female <br>Age: 177 days old <br>Level: 5 <br>Hit Points: 43 / 43 <br>Strength: immense <br>Defence: armoured <br>Movement: GREAT (21) <br>Intelligence: above average <br><br>Comments/Notes: --- </li> <li> <a href="/petlookup.phtml?pet=Meiav"><span><img src="http://pets.neopets.com/cp/8gnbo844/1/4.png"></span><h2>Pet Name</h2></a> Gender: Female <br>Age: 177 days old <br>Level: 5 <br>Hit Points: 43 / 43 <br>Strength: immense <br>Defence: armoured <br>Movement: GREAT (21) <br>Intelligence: above average <br><br>Comments/Notes: --- </li> <li> <a href="/petlookup.phtml?pet=Meiav"><span><img src="http://pets.neopets.com/cp/8gnbo844/1/4.png"></span><h2>Pet Name</h2></a> Gender: Female <br>Age: 177 days old <br>Level: 5 <br>Hit Points: 43 / 43 <br>Strength: immense <br>Defence: armoured <br>Movement: GREAT (21) <br>Intelligence: above average <br><br>Comments/Notes: --- </li> <li> <a href="/petlookup.phtml?pet=Meiav"><span><img src="http://pets.neopets.com/cp/8gnbo844/1/4.png"></span><h2>Pet Name</h2></a> Gender: Female <br>Age: 177 days old <br>Level: 5 <br>Hit Points: 43 / 43 <br>Strength: immense <br>Defence: armoured <br>Movement: GREAT (21) <br>Intelligence: above average <br><br>Comments/Notes: --- </li> </ul> <div id="tkm"> Template from <a href="/~thatkillsme">That Kills Me.</a> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. ® denotes Reg. US Pat. & TM Office. All rights reserved. </div> </div> Linear layout, pets are placed side-by-side. To get the large version image url of your pets, copy the image URL from your lookup of the pet you want; in the URL, near the end it should say *mqlt3c/1/2.png* -- change the 2 to 4. Images have already been cropped with negative margins. Put an (hr) after every two pets (note how it is in the coding) to prevent the floats from messing up.

• UFA ClassicPreview?

  <style> a { color: #35669E; text-decoration: none; } a:hover { color: #4482C9; } #bar { background: #333; top: 50px; left: 0px; z-index: -1; height: 135px; display: block; width: 100%; } .sf { display: none; } body { text-align: center; background: #BFBFBF; } td { background: #000; } #container { margin: 5px auto; font: 9pt arial; line-height: 18px; border: 0px #000 solid; width: 1000px; } p { text-align: left; } h1 { text-align: right; color: #999; margin: 15px 10px 10px 0px; font: normal 16pt Arial; } #sidebar { float: left; border: 0px #ccc solid; padding: 5px; width: 37.5%; margin: 5px; color: #5c5c5c; } #content { float: right; border: 5px #ccc solid; background: #fff; padding: 5px; width: 57%; margin: 5px; text-align: left; height: 500px; overflow: auto; } hr { visibility: hidden; } #title { color: #fff; font: 26pt Georgia; padding: 10px 20px; text-align: right; margin: 55px -10px 35px 0px; } #title span { font: italic 12pt Georgia; color: #6d6d6d; display: block; margin: 0px 0px 0px 20px; text-align: right; } #tkm { margin-top: 30px; text-align: center; font: 8pt arial; color: #666; } #rules p { margin: 5px 0px; padding-left: 30px; background: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/b58.png") no-repeat 15px 7px; } #rules { width: 95%; margin: 5px auto; background: #E3F1FF; padding: 5px; } .pet { border: 1px #ccc solid; background: #fff; float: left; margin: 2px 5px 5px 0px; padding: 1px; } h2 { margin: 5px 0px; padding: 5px 0px; font: bold 9pt arial; text-align: center; text-indent: 5px; background: #e0e0e0; letter-spacing: 1px; clear: both; border: 1px #ccc solid; } </style> <div id="bar" style="position: absolute;"> </div> <div id="container"> <div id="sidebar"> <div id="title"> My UFA Pets <span>I can't eat muffins in an agitated manner.</span> </div> <p><b>You can put a welcome message here, if you'd like.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet mollis mauris, et placerat arcu gravida sit amet. Duis lacinia scelerisque aliquam. Maecenas viverra dapibus orci, ac luctus odio ultrices nec. Aliquam sed justo velit, eget volutpat odio. Aliquam mi risus, volutpat in rhoncus ac, feugiat nec velit.</p> <p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt vestibulum condimentum. Morbi et congue libero. Praesent tincidunt consequat urna, eu pretium dolor rutrum vitae. Vivamus sapien odio, malesuada sit amet vestibulum vitae, gravida sit amet velit. Morbi auctor, odio vel hendrerit suscipit, lacus dolor lobortis ligula, eget elementum orci mi id ligula. </p> <p id="tkm">Layout Template from <a href="/~thatkillsme">That Kills Me.</a> | Bullets from <a href="/~solidarized">The Lunch Box.</a></p> </div> <div id="content"> <h1>The Rules, Yo: Pancakes and Ducks</h1> <div id="rules"> <p><b>Every time you use a paragraph tags between the rules div, it appears like a bullet.</b> Bullets from the Lunch Box. Yay.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet mollis mauris, et placerat arcu gravida sit amet. Duis lacinia scelerisque aliquam. </p> <p>Maecenas viverra dapibus orci, ac luctus odio ultrices nec. </p> <p>Aliquam sed justo velit, eget volutpat odio. Aliquam mi risus, volutpat in rhoncus ac, feugiat nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt vestibulum condimentum. Morbi et congue libero. </p> <p>Praesent tincidunt consequat urna, eu pretium dolor rutrum vitae. Vivamus sapien odio, malesuada sit amet vestibulum vitae, gravida sit amet velit. </p> </div> <h1>Contact Me</h1> <p>Aliquam sed justo velit, eget volutpat odio. Aliquam mi risus, volutpat in rhoncus ac, feugiat nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt vestibulum condimentum. Morbi et congue libero. </p> <p>Praesent tincidunt consequat urna, eu pretium dolor rutrum vitae. Vivamus sapien odio, malesuada sit amet vestibulum vitae, gravida sit amet velit. </p> <h1>The Pets Up For Adoption</h1> <h2>Xazo the Blue Ogrin</h2> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png" class="pet"><p> </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat. </p> <p> Curabitur lorem quam, faucibus at dictum ut, hendrerit eu eros. Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat.</p> <h2>Xazo the Blue Ogrin</h2> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png" class="pet"><p> </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat. </p> <p> Curabitur lorem quam, faucibus at dictum ut, hendrerit eu eros. Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat.</p> <h2>Xazo the Blue Ogrin</h2> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png" class="pet"><p> </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat. </p> <p> Curabitur lorem quam, faucibus at dictum ut, hendrerit eu eros. Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat.</p> <h2>Xazo the Blue Ogrin</h2> <img src="http://pets.neopets.com/cp/qsklbkdz/1/2.png" class="pet"><p> </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat. </p> <p> Curabitur lorem quam, faucibus at dictum ut, hendrerit eu eros. Duis fermentum, nibh sit amet scelerisque laoreet, ipsum massa molestie justo, nec facilisis velit leo a erat.</p> </div> <hr style="clear: both;"> </div> Blog-style (I think?). Welcome message falls to the left. Precoded features include the rules section, where you can replace the image bullets through the stylesheets. Pets are showcased one at a time. Not designed to hold a lot of pets.

---

• Three-in-OnePreview?

  <style> td { background: #000; } a, #permies a b { color: #2D9DFF; text-decoration: none; } a:hover, #permies a:hover b { color: #7AC1FF; } a img { border-width: 0px; } .sf { display: none; } body { text-align: center; font: 8pt Verdana; line-height: 18px; color: #666; } #container { width: 1000px; border: 1px #bfbfbf solid; margin: 0px auto; height: 500px; } p { text-align: left; margin: 10px 8px; } h1 { font: 16pt "Lucida Sans Unicode"; } h2 { font: 12pt "Lucida Sans Unicode"; color: #999; text-align: left; margin: 5px 10px; clear: both; } #nav { width: 1000px; margin: 20px auto -3px auto; text-align: right; } #nav a { font: 16pt "Lucida Sans Unicode"; padding: 5px; margin: 0px 5px; } #sidebar { float: left; width: 19.9%; background: #e0e0e0; border-right: 1px #bfbfbf dashed; height: 500px; } #content { float: left; width: 80%; height: 500px; overflow: hidden; } .page { height: 100%; overflow: auto; } #content ul { list-style: none; padding: 0; margin: 0; } #content ul li { float: left; width: 33%; margin: 15px 0px; text-align: left; font: 7.5pt Verdana; line-height: 16px; color: #666; } #content ul li span { float: left; margin: 0px 10px; overflow: hidden; } #content ul li span img { margin: -10px -30px -10px -20px; } #content ul li b { display: block; font: bold 8pt Verdana; color: #444; } #dreams img { margin: 5px; } #permies a { float: left; width: 25%; padding: 5px 0px; margin-bottom: 10px; color: #999; text-align: left; font: 7.5pt Verdana; } #permies img { float: left; margin: 0px 5px; } #permies b { display: block; font: bold 8pt Verdana; margin: 3px 0px; } #tkm { font: 7pt Verdana; color: #999; clear: both; margin: 0px auto -45px auto; padding: 5px 0px; } </style> <div id="nav"> <a href="#uft">Up For Trade</a> <a href="#dre">Dream Pets/Seeking</a> <a href="#per">Permies</a> </div> <div id="container"> <div id="sidebar"> <h1>Hello there!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin semper enim sed condimentum. Nunc imperdiet dignissim tristique. Sed sit amet nisl nulla, at vestibulum arcu. Sed in luctus nisl. Fusce dignissim urna at eros dapibus dignissim. </p> <p>Nunc accumsan vulputate massa, ut euismod risus vulputate eget. Maecenas commodo imperdiet risus vel pellentesque. Etiam sollicitudin nulla nec nibh volutpat eu rutrum dui pretium. Nam ac libero sagittis justo blandit convallis a et libero.</p> </div> <div id="content"> <a name="uft"></a> <div class="page"> <ul> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> <li> <span><img src="http://pets.neopets.com/cpn/pyeraneo/1/2.png"></span> <b>Pet Name Here</b> Gender: -- <br>Seeking: -- <br>OTB: -- <br>Comments/Notes: -- </li> </ul> </div> <a name="dre"></a> <div class="page" id="dreams"> <img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"><img src="http://pets.neopets.com/cp/q7vrlktq/1/2.png"> </div> <a name="per"></a> <div class="page" id="permies"> <h2>Account Name</h2> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <h2>Account Name</h2> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <h2>Account Name</h2> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <h2>Account Name</h2> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <h2>Account Name</h2> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> <a href="/petlookup.phtml?pet=Pyeraneo"> <img src="http://pets.neopets.com/cp/kjjox7kd/1/1.png"><b>Pet Name Here</b> Female</a> </div> </div> </div> <div id="tkm"> Template from <a href="/~thatkillsme">That Kills Me.</a> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2011. ® denotes Reg. US Pat. & TM Office. All rights reserved. </div> Anchored and multi-paged. Has three sections: pets uft, dream pets, and permanent pets. Sidebar to the left is meant for your welcome message.

---

Link Back

<a href="/~thatkillsme"><img src="http://i52.tinypic.com/2efn8kn.gif"></a> <a href="/~thatkillsme"><img src="http://i276.photobucket.com/albums/kk30/mewy888/customsorrp/thatkillsme.gif"></a> <a href="/~thatkillsme"><img src="http://i52.tinypic.com/2n1rp5h.gif"></a><a href="/~thatkillsme"><img src="http://i52.tinypic.com/2w2naqr.gif"></a><a href="/~thatkillsme"><img src="http://i255.photobucket.com/albums/hh146/lady_kemii/neo/thatkillsmebutton.png"></a><a href="/~thatkillsme"><img src="http://i40.tinypic.com/m95742.gif"></a>

---

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2011.® denotes Reg. US Pat. & TM Office. All rights reserved.
Privacy Policy Safety Tips | Contact Us | About Us | Press Kit | Terms and Conditions