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. :)
- This guide is easier if you have some HTML and CSS knowlege.
- When doing CSS, remember that it goes inside of the style tags. So, you should have one end, and one beginning, with the CSS in between.
- I show the code in the guide, and on the right side of it, I have whether you are looking at HTML, CSS, or both. If you are looking at only CSS, I do not give you the style tags, so you must remember that that section of code will go in between them.
- When you see this:
it means that I am saying something important, so be sure to read it! - The most important thing to remember is that you must read this guide. Just copying and pasting will only get you so far but actually reading it will help you understand what the codes are doing.
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:
<div id="container"> <div id="header"> header </div> <div id="sidebar"> sidebar </div> <div id="content"> content </div> <div id="footer"> footer </div> </div>The code defined:
- HTML - START CONTAINER: The container div is what ALL of our content will be in (sidebar, actual content, and footer). Think of it like a bag that you throw everything into, it holds it all there. Notice how I indented the divs that are inside of the container div, I did this to hopefully show you how it is holding everything.
- HTML- HEADER: The header div will house our top banner image.
- HTML- SIDEBAR: The sidebar div will be just that, our sidebar! Links and stuff usually goes here.
- HTML - CONTENT: The content div is where our content will go. So, if your petpage is about you and your pet, that is where all of that fun stuff will go!
- HTML- FOOTER: The footer div is where our footer will go, this is usually neomail links and such. this div is also important in making our layout work how we want.
- HTML- END CONTAINER: The last line of code is the end of our container div. See how everything else is INSIDE of it?
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:
<style type="text/css">
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;
}
</style>
<div id="container">
<div id="header"> header </div>
<div id="sidebar"> sidebar </div>
<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
The code defined:
- CSS- OPEN CSS: The first line of code is the opening of the stylesheet (CSS).
- CSS- BODY: The next lines deal with the body tag. Here, with the text-align property, we are telling all of the text on the page to align center (don't worry, we fix it later!) in order for the whole page to align centered in IE.
- CSS- #CONTAINER: This is where we will be modifying the container div. First, adding the "margin: 0 auto" makes our page centered in Firefox. The "margin-top: 30px" makes our layout not flush up agaisnt the Neopet's top banner on all petpages. In the next line, we change it so our font isn't centered. Next we set the width of the container then give it a border. the last line is the background color of our container.
- CSS- #HEADER: This is where we change our header information by giving it a height and a background color.
- CSS- #SIDEBAR: For the sidebar, we first add the "float: left" in order to make our sidebar stay on the left side of our container. Next, we add the width we want. Finally, we add our padding (the space inside of our box, we want this so our text isn't flush agaisnt the side of your boxes) then our background color.
- You do not need a height to your content or sidebar divs! Your page will get taller as you type more. OR if you added the height to the content and sidebar divs, and you wanted it to scroll, you would add "overflow: auto" to make your boxes scroll.
- Pay attention to your widths and padding numbers, for your whole layout, they are extremely important! More explanation soon!
- Remember, you only need one set of style tags!
- Remember, the CSS (style tags and everything in them) goes above the HTML tags!
- CSS- #CONTENT: First, we add "float: right" to make our content div stay to the right. If you wanted your sidebar and content divs switched, you would simply switch these values. Next, we add a width (I am sure you are wondering how we got this number, I will explain, promise!). And finally, we add our padding and background color.
- CSS- #FOOTER: The "clear: both" is really important in this div. What is does, is make the footer div basically move down a line and be at the bottom of both our #content and #sidebar divs. If we didn't do this, then the footer div would just go underneath the content div. I advise you to just leave the "clear: both" off at first, so you can see what happens, then make sure to put it back in! Next, we do our padding and background color, and in this div, I wanted my text to be centered again, so I added that too.
- CSS- END STYLE: This is where we end our styling.
- HTML: Again, we still have our original HTML from above. Notice that we did not do anything to it. This is because CSS is doing all of our styling, and our HTML is used for structure! :)
Your page should now look like this:
Just some extra info...
- I know I said no colors..but, I really meant not the colors you want to be using. The colors on this one are just basic colors I threw in while coding it so you can see where the differ divs start and stop. I suggest you do the same thing. I also suggest you do it with colors that contrast a lot, so it is easy to see what each div is doing.
- There is a border around the container div, you don't need this in the end, but again, I did it to make seeing what is happening in the layout easier. But, I like borders. :P
- Also, notice how you do not see the purple background of the container; this is okay. More will be explained about this later.
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:
- Here, we are just adding a background image to our header. We removed the "background-color:blue" because we don't need that anymore. Also we are telling it not to repeat. You can use shorthand for this, I just didn't so it was easier to understand if you didn't know shorthand. Don't forget, if you make your image height larger than 100px, to change it.
- Don't forget, you already have the header div defined in your CSS so you are only adding the bolded text to your CSS and not adding the whole thing!
- Also, in the HTML, you can take out the word "header." You don't need it anymore.
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:
<div id="content">
<h1>This is the main heading of my page!</h1> 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!
<h2>This is a sub heading</h2> 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!
<h2>This is another H2 subheading</h2> 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!
</div>
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:
- The first line of code has both the H1 and H2 tags together, seperated by commas. I did this, because each of these will be reciving the styling of "padding: 0; margin-bottom: 7px;." Since they are both getting the same thing, we combine them. What the padding and margin properties are doing, are styling what the headers already have with them. Like I said, they are big and ugly with a lot of space around them at first, so we are shrinking that down. We took away all padding, and just left a margin of 7px for the bottom, so that the text below it is not flush agaisnt it and it still stands out.
- The next couple lines are just styling the headers. I can change the color that my text is by using the "color" property. This can be used for any text as well!
- Be creative!
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
<div id="sidebar">
<h3>Navigation</h3> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a><br>
<h3>About the Page</h3> Just some fake text to go here. How fun! :D Whee. Typing typing typing typing text!
</div>
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:
- First, we just changed the background color of our sidebar. Now it matches our container background, so we have it look like it reaches the whole way to the bottom of the layout.
- Next, we styled ALL the links, since we only used "a." This took away the underline from all links, as well as made them all bold. We also changed the color, which will affect the active, visted, and hover links. We will be changing how the hover works though.
- Here, we change what the color of our links are on hover.
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:<a name="page_anchors"></a>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!
<a href="#page_anchors">Page Anchors</a>
Do not put your the tags that tell your page where to relocate (<a name="page_anchors">) around any text, or else it will make it blinky and take on the attributes of your other links. Ew!
Right
<a name="page_anchors"></a>
Wrong
<a name="page_anchors">TEXT</a>
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!
<TEXTAREA> 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! </TEXTAREA>
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:
- First, we add a background color. Next, We gave our textarea a height and width...and then by adding "overflow: auto" we made it a scrolling box! Then we added a border and we are done! Don't forget, you can change the font of this if you wanted to too, I just didn't.
The final product
Here is the finished product! I am sure yours looks 100% better than mine too!
More tips
- Be creative! Play with the codes and make them your own.
- Google is a great place to find tutorials on how to do something!
- CSSish has a lot of codes on it that may help you be more creative with your pages, as well as maybe understand the CSS aspects of layout making better.
- All of my webpages are created using this same format; I add things here and there, but this is my base for all I do. I am not saying mine are great, I am just saying, a lot can be done with it, so be creative!
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!