|
|
Stuff that various people asked for (very poorly written tutorials lolol)! I learned this all from w3schools pretty much. It's a great place! This is just what I do, not "how to code" type stuff. If you want to be able to really make a great layout, take the time to read through w3schools and the below links. So yeah, anyway, here we go:
Something like Zia's page looks kind of crazy awesome and complicated at first, but is actually really simple and easy! I'm totally lazy, so I let images do most of the omg-that-looks-cool work with my layouts. XD idk if that is a good thing or not though lololol. I forgot where I picked up this style layout, Maybe sunnyneo a looooong time ago, hmmm. /ramble
Okay so first let's take a look at what is going on:
This layout is just 4 sections, a header image (glorifying the world's most annoying draik), a content area (where we a forced to read about the insufferable girl, ugh), a navigation area (gotta get out of that awful place quick!!), and finally, the background area, with, uh.. the background... on it. yeah. background.
The header and the background make up the visible layout, while the content and navigation areas are behind the scenes (they 'hold' text in them). Let's work on the visible layout first:
Yay! Here's Zia's header and the image tiled for her background. This is all there is to it! These are the exact images on her page (full size, just scaled down here; drag and drop if you want to see full size). They are PNG files, so feel free to save them if you need a to use them as a sort of template to start with. I totally don't mind. ^(ouo)^
To make the tiled background, just take a chunk from the bottom of your header, crop it and there you go! (Be sure to check/edit it to make sure it tiles smoothly. Horribly tiled backgrounds KILL EVERYTHING |D) I'll have a little tutorial that helps with stuff like this after this thing here.
Okay, have your header and your background ready? let's code B) In order to get the stuff on the page and manipulate it the way we want, we will use divisions which in html are called divs. They are magical and once you figure them out you will never use tables ever again. Tables are awful hahaha (and that is saying something coming from me; it took me like 8 years to let my tables go and see the light, man ;_;). Oh no I think I just realized Zia's page code is so old an horrible it still has tables in it DDD8. lol. OKAY BACK ON THE TRAIN HERE.
Here's a place to start. A style sheet (CSS, instructions for the computer so it'll make the page pretty), and a div (HTML, the actual stuff)! c: Both are empty and useless right now. XD ( remove my double slashes and comments lol, hehe. )
Okay, let's put our images in it:
Cool, basically background-repeat is how you want the background to repeat ( uh lol ); it can be set as repeat (which is the default), no-repeat (no repeating at all), repeat-x (repeat, but only horizontally), and repeat-y (only vertically, what we want in this case);
Next I gave the div an id (an id instead of a class because there is only one header image and we'll only use the id once. Classes are for things you use multiple times in the code, like special text or making image thumbnails pretty). I have named our div headerImage so it is easy for us to tell what it is for! In the css, #idName means id, .className means class. in the html, just put id="idName" (or class="className" for classes) and you are golden.
Here on neo we aren't allowed to put position in the css, so we have to get around it by using inline styling. Basically its the css stuff, just crammed into the html code using style="stuff here woo. Position: absolute makes it so that our headerImage div is placed 14 pixels down from the top and 0 pixels over from the left. (You can also specify bottom:--px and right:--px instead, or percentages I think. w3schools will tell you all the insane stuff you can do with styling)
Why is the header top:14px; instead of 0? I personally like to keep the default neopets header link back thingie around if I can. 14 pixels makes room for it so you can still see it, otherwise the header will go on top of it.
Try it out now! It's the beginnings of a cool petpage layout~ ( and don't forget to delete my //comments. )
Header and Background sections down, now for Content (and Navigation if you wish). They're just two more divs, so let's add them in:
Replace all the 1337's with numbers that will actually work lol. xD Again, top and left are for the absolute positioning so you can put the divs wherever. Width is specified so that the div has a maximum width. That way your text won't go everywhere. Don't bother specifying a height unless you really really feel like it for some reason.
And there you go! that's the basic shell of it, everything else is using random css and html stuff to make things all snazzy.
You can make Blog style layouts like this too, the only difference in the coding involves specifying the height of your divs when you need to! c: (that is if you make your layouts image based like me lol)
There are so many ways you can make all kinds of layout asdkjgkasdgj. xD
While coding pages like Zia's is great and all, absolute positioning is kind of annoying and limiting. It's also a pain to get "right" in a wide variety of screen/widow sizes and browsers and ARRG EVERYTHING. Nowadays I like messing around with a thing called relative positioning. It's kind of weird to get the hang of at first (and I still find ways to mess it up because I'm dumb lol) but once you get the hang of it, relative positioning is REALLY GREAT! 8D
First, let's say you want your layout to always be centered like how I've got Reg's layout. It's made up of the same basic components as Zia's. The only differences are an additional div box and a different method of handling the background. The additional div is pretty much a Container. The Container contains or holds all the parts of his layout (In Reg's case, excluding his navigation because that is fixed, which is another story for another day XD). As for the funky background stuff, just look at the code and it'll become clear hopefully.
First, the body background has been changed to a just a color. We moved the image background for the content to the content div and the image background for the nav/other section to the navigation div. (* If you don't want to split the content and nav backgrounds into two images, you can just make one additional div with the sole purpose to hold the background image as it's background. You'll just have to specify it's height or else you won't be able to see it, which gets a little weird because you'll end up with a height of like 5000 px or whatever idk one day I'll figure out a better way. run on sentence ohhh yeah. ) Do whatever you feel like lol.
Notice how the background image css stuff has moved from body to content and navigation! Because these sections are overlapped by however tall your header image is, don't forget that you'll have to put that same amount of space (either make a little div and specify the height or put a bunch of br tags or something lol) before your start typing your text or else you won't see it.
Then I added in layoutContainer. Css margins are really cool, look them up! because I don't want to take all the time explaining here |D margin-left and margin-right set to auto will center the div so it is always in the middle. c: margin-top:14px; puts a 14px tall space at the top of the div. I bet you can guess what margin-bottom does. XD There are shorthand versions of things in css so you don't have to type the word margin a billion times, but I bet you can figure them out with the internet at your disposal. c:
Notice how the width of my layoutContainer is the widths of the content and nav divs added together (plus any space in between the two).
Now everything remains as absolute positioning EXCEPT the new layoutContainer. Set that one to position:relative;. That tells the computer, "hey! position everything inside me relative to me. Basically for the stuff inside the container: (0,0) becomes the top left corner of the container rather than the top left corner of the whole screen. COOL! Mess around with it to figure it out. (remember to take my //comments out XD) NOTE: you can change the header's top: to 0 now because the container takes care of bumping everything down 14 pixels for the neopets bar. c: if you need to move everything, you only have to move the container! Woo.
Thats pretty much all there is to it~
COMING SOON: fixed stuff. Like Luke's Layout here.
Here's some stuff to help make your content text-y things nice looking too. c:
Let's say you want images in your text, but you want the images to be next to your paragraphs, and have the text wrap around them all cool like. First put these two classes in your style sheet up top:
The float attribute shoves the thing to either the left or right (no center!). Then the other stuff on the page wrap around it! The margin stuff makes it so the text isn't right up on the image (It puts space between the image and your text, always put space around things! it looks much cleaner!!). You can specify more margins if you want, I usually just specify the side the text will be against. Let's apply our classes to images and paragraphs.
There! the text wraps around. Don't forget to give your image either the left or right class! (and since it is a class you can use it as many times as you want as opposed to an id) Try it out! and figure out all the weird stuff that happens when you float things. Don't go all Pennywise on me though. :C
Okay, let's make your fonts looks much much better! First let's put some attributes in the body part of our css. (I ripped this from Reg's page looool)
Okay, font-family is the name of the font you want to use, (and in my opinion, the most important part of a layout). Notice how I have 3 font's listed, along with the word sans-serif at the end. The computer reads Century Gothic first, if the computer doesn't have a font called Century Gothic (a mac won't typically) it will try to find AppleGothic, then if neither fonts are found, it makes the fonts Arial. If for some unholy reason it can't find arial, the computer will pick a sans-serif font to render the text in. Not every computer has the font you want to use, even if that font is "default" for your computer. You have to specify multiple fonts that look very similar to each other in order to make sure your fonts are display right! Fonts will make or break your layout so you should take them seriously. I took this particular font stack from a wonderful, awesome place called artsiteframework. (search for 'artsiteframework font stacks' and it's probably the first one).
Fonts that are more than one word go in single quotes with the comma outside them. Then separate your font names with commas!
Font-size and color should be self-explanatory XD Use #pt (technically if you want to be a good typographer use #em but I don't looool oops. [ 14px is 1.33em ]) instead of #px. Avoid using really bright colors for fonts in large quantities. A bright link might be okay, but no one wants to read paragraphs of neon yellow. ;_;
TO MAKE A LIGHT COLORED FONT ON A DARK BACKGROUND EASIER TO READ: increase the spacing between the letters just a bit with this (making the font-size bigger helps too):
Trial an error it to make it absolutely perfect! 1px is usually good enough though.
now LINKS~
That's how you make the links the same as the body. I added in text-decoration: none; to keep the links from becoming underlined, and font-weight: 500; makes the links slightly more bold than the rest of the text. Check those attributes out on w3schools to see what all you can do with them!
a:hover makes it so that when you hover the mouse over the link, it changes the font color to white (#ffffff)! You can do all kinds of crazy things with :hover, but we'll come back to that later on.
WOO! Now your page's text will be beautiful! Let's add in some Headers why don't we? Header tags look like this and they are sooooo great.
here's what they look like:
But the default headers are kind of boring, lets make them better with css!
Those things should be pretty self-explanatory by now, if not, theeeeeeennnnnn..... w3schools! 8D -shot- There's so much you can do with headers, you can give them image backgrounds, and layer them on top of other header tags (if you manipulate their margins with negative pixels.) The best way to figure all that stuff out is to mess with it and try it out!!
Last but not least, let's make our paragraphs of text easier to read:
There! Now your paragraphs will be indented 20px (you don't have to do that if you don't want to). Your text will also be justified, so the rags of your paragraphs will be nice and even like on this page. *_* You can adjust text-align to left,right, or center as well if you need to, but justify is... very very nice looking IMHO. XD
There! your pages will look nice now once you get all that up and going. c:
Okay so you want to make your navigation all snazzy! I'll regurgitate what my favorite code place that starts with a w would tell you: lists! First let's put all your navigation links in a list. This example is again, ripped off Reg's page xD
Your whole list is contained in the ul tags, each item in the list is contained within li tags. c: It looks like this so far:
Lets make it look like an actual navigation though XD
hmmm, that got rid of this stuff:
lets make the links look like button things:
alright, here's what that did:
The .navigation li a part looks crazy and weird, huh? It's just telling the computer "okay go to the navigation class, then find all the li tags in that class, then find all the a tags in each li tag; got that? Apply this css to what is in those a tags you found." I hope that made sense. If not, just smile and nod and it'll click someday. XD
Cool! a vertical navigation!! The display:block; makes it so each link is in a box shape. Change it to display:inline; (the default for display) and see what happens. The width:58px; part tells the block how wide to be in case that matters to you. Then we've got all of our text-styling in there. Margin is the space around/outside of each link block, while padding is the space that's in the inside between the edge of the box and the text. In this case I've set each to 3px on all sides. Mess around with them to see what they're all about! You can add margins and padding to pretty much everything for nice looking layouts *___*. And of course, you can pick what you want the background of your links should be, it can be a color, or even an image!
This is all well and good if you want a vertical nav, but what if you want the link blocks to be side by side instead of on top of one another? It's super easy! just add one more thing in....
Sweeeeet, instant navigation stuff! *____* We just told each list item to float left. because they are all floating left, they wind up in a line next to each other! yay.
wahoo. navigation. let's make cool things happen when we hover over each link:
I think we are pretty much done here!
Oh, and because Mystic asked, here's how I did the navigation on Luna's page. It's a little different because neo wouldn't allow the li stuff in the css for a while for whatever odd reason.
First, the links are all in their own div called navHold. I used this so I could put them all where I wanted on the page with absolute positioning.
I made the links look like blocks by giving them padding and a border and stuff. The thing is, each box is a different width depending on how long the words are in each link. display:inline; makes it so the links are shown in a line. c:
You only see the words when you hover over the link because normally, the words are the same color as their background, giving you the illusion that there are no words XD Then when you hover over the link, the words change color and you are able to see them. c:
From the above sections you should have a basic idea of the css :hover thing. You can put it on the end of pretty much anything! Let's make something happen when we hover over an image. We'll make a class and apply that class to an img so not all our images are affected. (.imgClassName:hover)
When you hover over an image using the hover_img class, a border appears!
So maybe we want something cooler to happen, like when you over over an image, the image changes to a different one, or make when you hover over something, a box pops up to tell you stuff...
For images the easiest way is to put both the images (the first one and the one you want to change it to) together as one image like so (the first image you want on top). This one image is 150 x 300, but we're gonna treat it like it's two 150 x 150 images. c:
Then use this code here to only show the first half. (We are going to make an empty div [with the id of happyFace , lol] and then set the image as the div's background.)
Then add this hover code so that the background of the div moves up to only show the second image!
Yay! it works.
* Using one image instead of two images is a nice way to do this because then both images load at the same time. If they are two separate images, the second may not load until you actually hover over the div, and there's this weird second of nothing that happens. XD
Even more fancy, let's make a box appear when we hover over an image. First, check out this code:
Can you guess what's going on here? Here, hover over the aisha and see:
Here is a paragraph full of really great information or something, maybe it's a story blah blah blah? The Thing about floating stuff is, everything wraps around it. It's pretty great. But you have to account for the "space" the floating stuff takes up yourself, because since it's floating the code will no longer do it for you, so I have to make this paragraph long enough to wrap completely around the image, or if I didn't have enough words, I could put some kind of space holder like an empty div or something. That way the floating stuff won't float on top of other stuff I don't want it to float on top of. Also, only the stuff I want to wrap around the floating thing will wrap around the floating thing. OMG this is the most confusing poorly written thing ever. I'm so sorry, it's complicated, and it's one of those things you have to mess around with until you get it.
Okay, explanation time: There is a lot of "floating" going on here. but we're gonna ignore that for a sec.
First, I made a div to hold everything and gave it the .hoverHold class. The class specifies the div's height and width as 150px x 150px (the same size has just the image!).
The span html tags allow you to group the stuff inside them and call that stuff collectively as a "span" element. In the css we can tell the span inside the hoverHold classed div to do stuff by saying .hoverHold span. We're telling this span to be hidden with the css visibility attribute!
now, when we hover over the hoverhold div, we want the span to do something, so we say .hoverHold:hover span. Here we change the span's visibility to visible and it appears!
but that's not all, we want everything to be in the right spot, which is where all the floating stuff comes in. First, .hoverHold div is floating left to let the paragraph wrap around it. then inside hoverHold div, we put the alien aisha image, but we want the box to pop up next to the picture, rather than under it, so we make that float left too. Now we put in our span, and we make the span float left so that it ends up next to the image. (To get a bunch of things side by side, make them all float to the left or float to the right! :B).
Now we just want the text to pop in a nice looking box, so we make a div called boxPopup and style that. Then we put the text inside it. To make boxPopup float on top of everything, we gave is position:absolute; in the html, but we didn't specify a location, so it just pops up where it's at in the code. Since we've already got everything's position worked out with the float:lefts;, the boxPopup is already in the correct spot! YAY now we end all of our tags and woop, cool hover thing.
Hovering over the image is actually just an illusion. You are actually over hover the hoverHold div, it just looks like you are hovering over the image because 1) they are in the same spot and the image is inside the div in the code, 2) the div and the image are the same size, even though there's span stuff in the div too. You don't have to accommodate the size of the span stuff in the hoverHold div's height/width because the span is floating.
annnd that's it!
uhhh, pretty self-explanatory, just a few little weird things! This is here because I know someone will want to know how. XD
Now an example of using it:
There we go! c: NOTE: what you link to always ends up at the very top of the screen when you click ( unless the page itself never scrolls). Sometimes weird things happen because of this when you're doing fancy petpage stuff, so ALWAYS make some anchor links to test out while you are making your layout. You don't want to get to the end and realize that when you add in the links everything messes up!
OKAY, here's a method you can use in photoshop when you want to make a background that tiles seamlessly. C: Let's start by making something that just needs to tile vertically, not both vertically and horizontally.
Here's my image, as you can see, it does not tile very nicely, you can totally tell where one image stops and one starts again! YUCK! but luckily it's an easy fix, lets go into photoshop and DO THIS:
Go to wherever your photoshop puts all it's filters and find the filter called offset (it's usually underother). Any Photoshop with filters should have it, even Photoshop elements. Unless you have CS5 and are using the images above, I cannot help you find your offset filter. You need to ask the help section, or just look around the many menus until you find it. Don't be afraid to click stuff in Photoshop, you aren't going to break it or your computer (well unless you try to run like 8 filters at the same time, then you might crash it lolol). If photoshop freezes, just be patient and wait for it to unfreeze, if it's been more than 10 minutes, restart photoshop and try again. THIS SHOULDN'T HAPPEN WHEN USING OFFSET because it's a very simple filter XD I'll stop talking now bluh.
A screen similar to this should pop up! make sure wrap around is selected!
Now since we want this BG to tile vertically, slide the vertical slider thing (or type in a number of pixels) to offset the image by. There! now you can see where the ugly seam happens! Now just fix it in Photoshop so that you can't see the seam anymore and BAM! Seamless background. c:
What if you want to make the background tile up and down AND to the side? Easy! Offset and do both at the same time:
It's a bit overwhelming when you try to do both at the same time though, so start with either vertical or horizontal only, correct that, then move to the other one, then correct that. THEN go back and check the one your corrected at first because you might have messed it up again while correcting the second! Once you are sure it's all seamless, yay!
Yay, mostly seamless background (original image from hubblesite, part of Carina Nebula *u*) that took me about 20 minutes to de-seam. Unfortunately it still looks kind of tile-y because the image is just... small. If I had started with a say... 600px x 600px Carina Nebula section, it would be less obvious...
First, locate a wizard.
coming soon |D
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® 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