A lot of times in creating a layout I want to get rid of certain things. I have provided you with codes to get rid of anything that you might want to get rid of.
Let's Get Started
Now, I know this is exciting but you're going to have to calm down! Otherwise we'll get nothing done :-P All right, I've had quite a few people ask me to how to create layouts using DIV positioning as opposed to the old-school table way. Let me explain the difference...
In the "Old-School table way" you have to go through shit-tons of coding just to get the boxes to be where you want. You have to do colspan, valign, and all of that crazy stuff.
Using DIV Positioning you can put the DIVs where you want in your stylesheet, and you just have to do a simple code in the actual set up.
Understanding the difference between DIV ID's and DIV Classes
Before we begin we need to touch on DIV IDs and DIV Classes. If you don't know the difference you're going to have a difficult time coding.
Let's start off with a definition.
DIV ID - A DIV ID is something that is only going to be used once in coding. In your stylesheet you will start it off with a '#'.
DIV Class - A DIV class is something that you will use on multiple ocassions in a layout. It's generally used for headers in the anchor/div boxes. It will start off in the stylesheet with a '.'
First Take Into Accout
First, I want you to think about how many boxes you want. The width and height of the boxes, and where you want them to be. Here's an example of what I usually do.
Now that we have the first stepping stone laid down, let's move on to the more difficult part. *For those of you that are paying attention, I'm intentionally leaving the header section out.* We're going to code the first box!
Hold it right there! It looks all good right? Wrong! You want to code it so that it is positioned somewhere.
Here's a helpful tip. When you're doing this next part, envision the upper left hand corner. Everything is moved around that upper left corner. You're going to want to include the distance away from the top "top: 0px;" and from the left "left: 0px;" Let's move on...
Did you notice anything different?
Besides the overflow: hidden;?
Right - the left is 150px instead of the 0px from the staff nav. You need to pay attention to the width of everything, otherwise you'll have over-lapping boxes, and it would be shear HTML chaos! This is why I recommend starting off with boxes that are just hundreds instead of all of the crazy half hundreds you get in there. Stick to the easiest numbers to add.
**Here's another helpful tip.**
If you're going to be doing an anchor box, you can put
There I opened up the Container DIV and the Staff Navigation DIV.
For those of you who have the amazing memory and remember how I started the Anchor DIV, and gave you another code to put in with it as well... I'm about to show you the beauty of that code.
I just saved you a lot of time, and trouble with positioning and all of that jazz. Oh, and lots of frustraion. So, I want some thank you's! :-P I'm only kidding. But, on a serious note, this is the beauty of that code. Let's see if you can figure it out before I point it out to you...
Application text goes here.
Accepted text goes here.
Rejected text goes here.
There you go! You created your first DIV Positioned layout! I hope you enjoy it and found it useful =]
I know that it made coding a hell of a lot easier for me. Just because you've been so awesome, I'm going to include a mini tutorial on how to create a header using DIV Classes.
First and foremost, you have to figure out what you want your DIV Class to do. I want mine to serve as a header. So, remember when I was telling you about the difference with Div ID and Div Class? That will come in handy.
In your style sheet, you want to start it off with a '.' as opposed to a '#'.