Welcome

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!

navigate

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!



Visitors

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:

Now let's add the CSS to make it actually look like a layout! The code for the layout with both the CSS and HTML:

body { text-align: center; } #container { margin: 0 auto; margin-top: 30px; text-align: left; width: 800px; border: 1px solid black; background-color: purple; } #header { height: 100px; background-color: blue; } #sidebar { float: left; width: 150px; padding: 10px; background-color: orange; } #content { float: right; width: 610px; padding: 10px; background-color: yellow; } #footer { clear: both; padding: 10px; text-align: center; background-color: green; } header sidebar content footer The code defined:

Your page should now 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:

Changing the Font of Your Page

This is pretty simple, I am not even gonna define the codes used. To change the font of your whole page, do this:

body { text-align: center; font-family: Verdana; font-size: 13px; } To change the font in just one of your divs, do this: #footer { clear: both; padding: 10px; text-align: center; background-color: green; font-size: 11px; font-weight: bold; }

Adding a background

Here, you can either choose to add a background color or a background image. I chose to just do a color in mine, but images are great too!

body { text-align: center; font-family: Verdana; font-size: 13px; background-color: #6f6f6f; }

This is how your page should be looking:

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:

Sidebar Problems?

Woah, stop right there! What is up what that purple and why isn't our sidebar background color going the whole length of our layout like the content div is? This is where the color of our container background comes in very handy! We are going to make the container background color, the SAME color that our sidebar is going to be. This way, even if the length of our sidebar is shorter than the length of our content, it will still have the look of it going the whole length of the layout.

Here's the code:

#container { margin: 0 auto; margin-top: 30px; text-align: left; width: 800px; border: 1px solid black; background-color: #fbc9e6; }

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 1 Link 2 Link 3
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:

Adding Page Anchors

Page anchors are the links that work within your page. You know what I am talking about, I have them here...they take you to a specific place on a page. They are super easy!

Put this where you want your page to relocate to: Put this where you want to have it linked at, such as in your sidebar navigation we just made! It is just like any other link! Page Anchors

Do not put your the tags that tell your page where to relocate () around any text, or else it will make it blinky and take on the attributes of your other links. Ew!

Right

Wrong

TEXT

Styling the Footer

Almost done! All we have left is the footer, how exciting! All we really need to do now is just change its background color. You can do that on your own, so do it! :) I changed my footer's background color and font color (using the "color" property").

Here is how mine looks:

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!

More tips

Thanks!

Thank you for using and visiting my petpage! I hope that everything was helpful to you and that it was all explained well; I try my best. If you feel that I did not add something on this page that should have been added, please feel free to neomail me and I will let you know if it would be good to add it (I am only adding basic things, sorry).

Or, if you have any comments about the page, neomail me for that too! :) However, I most likely will not help you directly with your petpage unless I am in a good mood or see you around the boards needing help, I'm sorry, I just do not have the time to help with every question.

Thanks again, and please, tell all your friends!




Heads Up! You're about to leave Neopia!

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



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

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



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

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



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

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions