So, you're totally bored with all that table layout stuff... well now you're ready to move onto divider layouts!Aka Div layouts. These are VERY easy to code, probably easier to code than table layouts (well for most of us lol).
First you have to make the top banner. The width of the banner will be the size of your layout, so you should try making your banner big. I sized mine at 850x500. Once you think you've finished your top banner, we have to blur it into a color at the bottom*. So select the selection tool and select the whole bottom of your image (make it approx. 20 pixels high). Now in your program, make a very strong guassian blur. I'm not very specific because I can't tell you how to do this in each program xD. If you don't know how to do the guassian blur, go to your program's help topics.
*=You do not have to do these steps; this just makes your layout look more proffessional. Also, you cannot do this in MS Paint and your program must have a decent square selection tool to use and must be able to guassian blur.
After you complete your top banner, save ;D. Here's how my top banner looks like (textures from feel.hironeko.net; click the image to view full size, don't worry about that thing at the bottom; you don't need that.)
Use the eyedropper tool and choose the solid color at the bottom of your top banner.
Now create a new file and make it ten pixels high and make the width the same width that your top banner was. To resize the file in paint, go to Image >> Attributes. Use your program's fill bucket tool (if you use Paint Shop Pro, hold ctrl down and click on the solid color at the bottom of your top banner) and then color the background of the new file. Now you have to create the navigation bar(s) and the content area. Choose your paintbrush tool, make the brush a square one with a size with a height that's taller than the file. Select a color that is slightly darker than the background color, then draw a straight down line wherever you want your sidebar to be. Make it as thick as you want; remember that this will be your sidebar. Do this for your content space as well (you may want to make it bigger there). If you want, make a 2nd sidebar. IMPORTANT: Remember that these line thingies or whatever you call them (xD) HAVE to touch the bottom and top of the file. Here's how my background looks like (this is called a background btw; click image to view whole size)
Now you need to upload the two images you just made to your image host ;D. Okay, we now get to code! YAY. -notreally-. But don't worry, coding is easy. First, insert this code into the top of your code::
This is to insure that your top banner is at the absolute top left of the page. It's hard to explain, so I won't (it's not that important anyways.........). Remember to put your own css in there too =D. Now we have to insert the image in there. Add:
...And replace URLHERE with your top banner's URL. Alrighty, time for the background:
...And of course, replace URLHERE with your background's URL. We're done with the design now, so now we have to position where the content will go...
Yesh, now for the most annoying part. Paste the folllowing code 2-3 times, depending on if you have 2 nav bars or not. If you have 1, paste it 2 times, and if you have 2, paste it 3 times.
So now we have to position these so they are in the right place. If you make the left number higher, it goes right. If you make the top number higher, it goes down. The height and width determine how big the div is going to be. Set them to the appropriate size for your scrollbars and content boxes ;D. It will take a while, but it /is/ worth it =D.
And now your done!!! Grats ;D.
~Nicolette