Welcome to my slice of Neopets! :D I have two different guides for you to enjoy: CSS Basics and How to Make a Petpage Layout! I have also added links within each petpage to help you navigate you way through! I hope you enjoy the guides and that they help!

You must read the whole petpage! The code for a whole page is not at the end. This page is for learning, so you have to read it to do it. Sorry to dissapoint!


this layout

Unfortunately because Internet Explorer loves giving me a hard time, this layout looks best in Firefox. There isn't too much of a difference, but there is enough that it makes me go "arrrg!" So, please, view this page in Firefox, you should be using that browser over IE anyways. :P

link back

I hope you enjoyed my guide and I would love it if you would please link back to it and tell all your friends! Go on, use the button below, you know you want to!


Since 11/17/07:

places you should go

How to Make a Petpage Layout

After hearing many people complain that they didn't know how to make a petpage layout, and after having many people steal my own petpage layouts, I have decided to write a tutorial on how to make your own! :) The petpage we will be making will be a 2 column layout with a header image. It will be very basic, but I hope that with explaining the basics, it will help you on your way to make the petpage layout you always wanted!

I suggest you read CSS Basics before beginning, it will help you with some of the terms I use and will probably come in handy in others ways too!

How to read the guide

This gude isn't super confusing, but I thought I'd give you a few quick tips on how to read it as well as some general tips, so you aren't confused. :)

Creating the Layout

The first thing we have to do is design the basic layout of our page, using HTML then CSS. We are only to be worrying about the structure right now, so this means just positions and sizes, no colors. The first thing we must do is write out the HTML (structure) for the layout and it's super simple. The HTML code is:

header sidebar content footer The code defined:

Your page will be really simple right now, and just look like this:

Just some extra info...

Note: I will only be working with sections of the coding now, so you won't get such big chunks anymore! :) This means, you will be modifying your current code (above) when you see bolded code or adding new codes in when you don't have the codes shown or when you see text you don't have, add it in.

Pixel Perfect (widths and paddings)

Okay, this is where it may get a bit confusing, and I am so sorry about it. I am going to try my best to explain! Here it goes.

So, you make a page, and you want the container to be 800px wide. Then, you make your sidebar 200px and your content 600px, cause that equals 800px. But, you put it in and it is all overlapping and moving weird! What happened?!

Well, this is where knowing how to add and subtract pays off. Since we are doing a fixed layout (meaning the layout is set in pixels, so all screen sizes see it the same) we must worry about our padding sizes in relation to our widths to make it all work.

So, you make your container 800px. you definitly want your sidebar at 200px, so set it like that. you also give it a padding of 10, which effects ALL sides of it (top, right, bottom, and left), meaning you added 40pixels of padding all together. However, since we are only worried about the WIDTH of our divs, we just need to remember 20px of padding (left and right). So, all together, the sidebar took up 220px of pixels of our 800px allowed.

So, 800px-220px = 580px. We now have 580px left for the width for our content. But, don't rejoice yet. We want to add another 10px of padding all around for our content, so that is another 20px of width! So, now we only have 560px left for our content!

Phew, that was a lot of math! So, an overview: Remember your pixels and widths! Keep track of what you are using, so you can easily get your divs's widths correct and it will all be smooth sailing from there!

Wait a minute! I know I said smooth sailing, but, that's only if you aren't using evil Internet Explorer! You MUST know this pixel perfectness is only true with Firefox and other standards compliant broswers! Firefox and the others read paddings correctly while Internet Explorer does not! So, unfortunatly, there will be about 40px (your padding) in between your two colmuns in Internet Explorer, while there will not be in any other browser. I have no idea how to fix it, and it shows up in my pages too (like this one)...we just have to deal and hope all those Internet Explorer users come over to our side! Basically, you need to do it this way though, because if you do it so it only works for Internet Explorer, then it will be ruined in all other broswers...but if you do it for the better broswers, you only have some white space in IE but the page isn't ruined completely.

Adding a Header Image

This is the fun part, making a spiffy header image for your page and adding it in! First, make sure you header image is the same width (in this case 800px) as your container div. The height is easier to change, so in the end, just make sure it matches up with your coding. The code to add the image in is pretty simple too!

#header { height: 100px; background-image: url('URL of your image'); background-repeat: no-repeat; } The code defined:

Below is a preview of what your petpage should look like now:

Adding HTML Headers

I am gonna show you how to add text headers (like where I have a new header, saying "Adding text Headers and Content") and just a bit of content to help make them stand out. You want to use HTML headers instead of doing something with the font tag, because they are SO much easier (and follow the standards). So, let's do it then!

First, add the headers and content to your page with HTML:

This is the main heading of my page! This is just some text, to fill in the gaps. Wow, I love typing, it is so so so so much fun! Hehehe! Aren't you having fun? I sure am! Hehehe!
This is a sub heading I used H1 has my main heading, and H2 as my subheading, because it is very easy to remember H1 comes first and H2 second. Also, again, it is standards compliant! Also, you can keep adding more headings (up to H6) if you need them!
This is another H2 subheading Sometimes, you might also want to use H1 as your main heading, and H2 as your subheadings for content, and H3 as your subheadings for your sidebar -- that is how I do it!

Now, if you looked at this on your page without the CSS in it, you'll notice they are big and ugly with lots of space around them. With CSS, we will make them pretty!

Time to style them as well as get rid of the ugly background color of our content div. #content { float: right; width: 610px; padding: 10px; background-color: #fff; } h1, h2 { padding: 0; margin-bottom: 7px; } h1 { font-family: Georgia; font-size: 23px; font-style: italic; color: #9a045d; } h2 { font-size: 15px; color: #595156; border-bottom: 1px solid #595156; } The code defined:

This is how your page should be looking:

Styling the Sidebar

Time to modify that sidebar to match, eh? Won't be too hard, lets just add some text, mock links, and some H3 headers. Also, of course, make the background color to match our container! I am not going to provide the CSS for the headers though, you know how to do that. :P

Navigation Link 2
About the Page Just some fake text to go here. How fun! :D Whee. Typing typing typing typing text!

Pretty simple, right? Let's style the links and change the background of the sidebar:

#sidebar { float: left; width: 150px; padding: 10px; background-color: #fbc9e6; } a { text-decoration: none; color: #6f6f6f; font-weight: bold; } a:hover { color: #504b4b; } The code defined:

This is how your page should be looking:

Text Areas

A lot of people ask about how to do text areas, so I am gonna add one to my page..I am gonna style it too! Here is the HTML (I am gonna add it to my content div):

Note: The HTML tag for text area should be: text _ area. Obviously, don't put in the space between the words and the underscore. Neo is taking out the underscore and making it capital on this page, so make sure to add it in yours! If you don't it should still work, but on the Edit Pet Page page, you will see your layout there too, and it becomes really annoying!

Put the text you want people to easily copy here, such as for linking back to your page! You use it for adding premade HTML things, like link backs!

Now I am gonna style it so it is pretty and goes with my page!

TEXTAREA { background-color: #fbc9e6; width: 150px; height: 75px; overflow: auto; border: 1px solid #c20674; } The code defined:

The final product

Here is the finished product! I am sure yours looks 100% better than mine too!