my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

VampireFreaks .^. Website Tutorials | Submited Jun 4, 2012

Written by: Skem9 Admin

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.


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.



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, 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.

Header: Width = 600px, Height = 150px, Overflow = Hidden.
Navigation: Width = 150px, Height = 100px, Overflow = Hidden.
Anchor: Width = 300px, Height = 300px, Overflow = Hidden.
AnchorNav: Width = 150px, Hight = 200px, Overflow = Hidden.
VFNav: Width = 150px, Height = 100px, Overflow = Hidden.
Staff: Width = 150px, Height = 300px, Overflow = Hidden.
Application: Width = 250px, Height = 100px, Overflow = Auto.
Accepted: Width = 100px, Height = 100px, Overflow = Auto.
Rejected: Width = 100px, Height = 100px, Overflow = Auto.

In case you couldn't tell, it's for an application cult.

Now, I want you to look at this, and see how wide/tall it will be.
This particular set up will be 600px (width) x 550px (height).



This is where it begins to get fun. You're going to start off your stylesheet. For those of you who don't know what a stylesheet is

<style type="text/css">
your html here
</style>



The first thing that you're going to want to do is design the outline, or the container if you will. There are two things that you need to know before you move on any further.

In positioning these it's either going to be "relative" or "absolute". The container DIV is always relative, and everything else is always absolute. Got it? Now let's move on.

So, back to designing that container. My container was 600px x 550px, so my container code will look like...

#container{
width: 600px;
height: 550px;
position: relative;
}




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!

#staffnav{
width: 150px;
height: 100px;
position: absolute;
}




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...

#staffnav{
width: 150px;
height: 100px;
position: absolute;
top: 150px;
left: 0px;
}




Now that that is done and over with you can do all sorts of nifty stuff like add the background color, or even a border!

#staffnav{
width: 150px;
height: 100px;
position: absolute;
top: 150px;
left: 0px;
background-color: #222;
border: 1px solid #00ccff;
}




Now we're in business! Let's move onto the next box which will be the anchor!

#anchor{
width: 300px;
height: 300px;
position: absolute;
top: 150px;
left: 150px;
background-color: #222;
border: 1px solid #00ccff;
overflow: hidden;
}




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

#anchor div{
width: 300px;
height: 300px;
overflow: auto;
}




This makes it a lot easier instead of writing out all of the code in an anchor box.

Now let's keep on truckin'!

<style type="text/css">
#container{
width: 600px;
height: 550px;
position: relative;
}
#staffnav{
width: 150px;
height: 100px;
top: 150px;
left: 0px;
overflow: hidden;
background-color: #222;
border: 1px solid #00ccff;
}
#anchor{
width: 300px;
height: 300px;
top: 150px;
left: 150px;
overflow: hidden;
background-color: #222;
border: 1px solid #00ccff;
}
#anchor div{
width: 300px;
height: 300px;
overflow: auto;
}
#anchornav{
width: 150px;
height: 200px;
top: 150px;
left: 450px;
position: absolute;
overflow: hidden;
background-color: #222;
border: 1px solid #00ccff;
}
#vfnav{
width: 150px;
height: 100px;
top: 350px;
left: 450px;
overflow: hidden;
position: absolute;
background-color: #222;
border: 1px solid #00ccff;
}
#staff{
width: 150px;
height: 300px;
top: 250px;
left: 0px;
overflow: auto;
position: absolute;
background-color: #222;
border: 1px solid #00ccff;
}
#application{
width: 250px;
height: 100px;
top: 450px;
left: 150px;
overflow: auto;
position: absolute;
background-color: #222;
border: 1px solid #00ccff;
}
#accepted{
width: 100px;
height: 100px;
top: 450px;
left: 400px;
overflow: auto;
position: absolute;
background-color: #222;
border: 1px solid #00ccff;
}
#rejected{
width: 100px;
height: 100px;
top: 450px;
left: 500px;
overflow: auto;
position: absolute;
background-color: #222;
border: 1px solid #00ccff;
}
</style>




All right - that was simple now wasn't it! And it only gets easier.

Let's get the boxes so that you can put information in them now.

In your "Profile Section" or "Description Section" start putting the DIV ID's in place. If you need an example, you can find it below.

<div id="container">
<div id="staffnav">
<a href="http://www.vampirefreaks.com/main.php">Main</a><br>
</div>




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...

<div id="container">
<div id="staffnav">
<a href="http://www.vampirefreak.com/main.php">Main</a><br>

</div>
<div id="anchor">
<div id="welcome">
Welcome Text Goes Here

</div>
<div id="rules">
Rules text goes here.

</div>
<div id="contests">
Contests Text Goes Here.

</div>
<div id="winners">
Winners Text Goes Here.

</div>
<div id="banners">
Banners Text Goes Here.

</div></div>




Oh my! Did you see what used to be like three hours of coding turn into three minutes worth of it? Yeah? I'm glad :-P

So after you're done with all of that you can actually start piecing the rest of it together.

<div id="container">
<div id="staffnav">
Staff Navigation Stuff.

</div>
<div id="anchor">
<div id="welcome">
Welcome text goes here.

</div>
<div id="rules">
Rules text goes here.

</div>
<div id="contests">
Contests text goes here.

</div>
<div id="winners">
Winners text goes here.

</div>
<div id="banners">
Banners text goes here.

</div></div>

<div id="anchornav">
<a href="#welcome">Welcome</a><Br>
<a href="#rules">Rules</a><br>
<a href="#contests">Contests</a><br>
<a href="#winners">Winners</a><br>
<a href="#banners">Banners</a><br>

</div>
<div id="vfnav">
VF's Nav Stuff

</div>
<div id="staff">
Staff stuff goes here.

</div>
<div id="application">
Application text goes here.

</div>
<div id="accepted">
Accepted text goes here.

</div>
<div id="rejected">
Rejected text goes here.

</div>



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 '#'.

For example

.header{
font-family: georgia;
color: #fff;
font-size: 11px;
line-height: 12px;
text-decoration: none;
text-transform: lowercase;
text-align: right;
}



There is your first DIV Class.

Now, where do you put these strange things?

I normally put them at the top of a box that I created as a DIV ID. For example

<div id="staff">
<div class="header">Staff</div>
Staff stuff goes here.

</div>



Got it? Good! I'll talk to you all later!


Picture..
Skem9 Admin ~ 06/24/12, 7:10am
naw, you cant do anything like that on myspace anymore.. this tutorial works for vampirefreaks.com though [smile]
Picture..
User Picture.. ~ 06/05/12, 2:49am
does myspace still use Div Overlays? man I use to make a crap load of overlays