Make Your Own Div
This tutorial is going to revolve around you having a graphic design program (Paint shop pro, photoshop, gimp, something...)
and a basic knowledge of code. With these things you can make your own div layout.
Start with an image
Ok. The base of your DIV layout is going to be an image. This image is what your DIV layout is going to look like.
It is important that it has clear, clean areas for text boxes. It needs to have areas designated for certain things.
This being said, here is the image I will use as an example for this tutorial.
This is an image I just threw together in photoshop. As you can see there are clear areas for text to be displayed.
View our DIV layouts for examples of other DIV layouts and images. You must have this image uploaded to a hosting
website, or, basically, you need to make sure the background image can be linked. I just uploaded mine to Photobucket.com
and the image URL is http://i77.photobucket.com/albums/j71/inlovingdemise/DIVBGExample.gif.
Bare Bones-- Part 1
Next we're going to start the code that goes in the About Me. This is the code that states where the text boxes will be,
where the image will be, what the CSS will be for text, links, etc. Let us start with this; (Feel free to copy this into
your own myspace, or some other means, so that you can work with it.)
Ok. Don't get ahead of yourself at all. These beginning stages are the most important. The first line of code
basically cuts off a lot of the default myspace layout. The second piece of code, the first style tag, puts
the music player in the top left corner of the screen. The last piece of code sets the background color. It is important
to keep that code looking like that. When you go to change the background color, change both to the same thing.
Right now mine are both on ffffff, otherwise known as white.
Here is the next piece (add it right with the rest of the code we've been looking at.);
For now we're not going to put actual code in these. Inside this tag are the DIV layers. As you can see, I have my
about me, movies, background image, and books layer.
Add this on, now.
This is more hiding code. It will hide all of the default myspace layout.
Bare Bones-- Part 2
Ok, now for the I'd Like to Meet code. I will just give it to you in one big chunk because its easy to understand.
Ok. Again, top stuff is hiding code. Now we have all of the div tags. These are the pieces of code that
make the div layers come to life. Inside these div tags you will put content. My first div is the background
image (See the link?), the second is about me, third movies, fourth books. At the end there is more hiding code.
Break
You now have the bare bones of a div layout going on. The next steps are adding the boxes which text will be in,
positioning them basically, and adding the CSS for how text will look.
Position-- Background DIV
On top of the DIV image are boxes that your text, links,
and content will be in. Before we add those boxes, lets position our DIV image to somewhere that we like.
<![CDATA[.background {background-color: transparent;}]]>
Remember that? We need to put code in there to put the background image where we want it. If you were to look at it
right now, it might not be where you want it.
Okay. In the end this is the code I have. The background is set to transparent, because thats how I roll. Visibility is set to visible for safty's sake, and the z-index
allows that div layer to be on the bottom, so when we put text boxes on, they will be on top of it.
Now for positioning. The positioning is absolute. Then we have the percentage things. I set mine to that so that if someone resizes their browser, the image will
move with it. Hard to explain, so you'll have to 1) trust me or 2) mess around until you understand. I won't spend too much time on this.
Now, the margin-left and margin-top actually tell where the background image will be. With this you have to eyeball it and just put a number in as I have, save,
refresh, look; repeat until you get it right and the background image is aligned how you want it.
Position-- The Content Boxes
This is going to work exactly how the background div layer worked. You will have to position the boxes and save, view, and alter continuously until you get it right.
<![CDATA[.aboutme { background-color: transparent;}]]>
Remember that code? I'm sure you do! This is the div layer for the about me content box. We're going to do the same thing with this as we did with the background
layer, but we're going to add a few more things on it.
This looks very similar to the other code. But now we have a width and height added to it and a changed z-index. Simple on the index; you have to have it higher than 0 or it might hide behind the div layer with the background image.
The width and height. I'm going to start hoping you are catching onto things, so I'll touch on this and you can figure out the rest, like I did way back in the day. You make the box to fix inside your designated about me
area. Don't make it too big or too small. Constantly save and look to see how it is going. Here is a great hint that I use; change the background color to a color not on your layout. Right now it is on transparent, so you can't
see where its going. But if you make it red or something, you will be able to see it as you move it. So change the margin-left and margin-top codes until that box is under the about me.
At this point my code will not be accurate to my layout. I'm too lazy to actually do that.
Ok, so just do that with all of the boxes, like this;
Add CSS!
Ok. At this point you should have the background layer taken care of. You should also have all the content boxes in place and everything. Now you need to put the CSS in that says how your
font will look, links, etc. I'm going to COMPLETELY assume you know how to do this. I will copy and paste my CSS from a previous DIV layout I made, and I'll point some stuff out.
Okay, the first CSS (font, td, a, body, etc) is what all the general fonts look like. The next ones, b, i, u, and s are the bold, italic, underlined, and
strikethrough texts. Next I have what the links look like, active, hover, and whatnot. You'll put this up with your I'd like to meet code. For example,
you could put it after the div layers, before the hide code, etc. Make sure that you don't put one set of style sheets inside another. Like this;
<![CDATA[<style>
omg a style sheet
<style>
omg another style sheet inside of a style sheet!
</style>
</style>]]>
Put your content in...
<![CDATA[
<div class="aboutme">
My about me is so cool. It talks about me.
</div>
<div class="movies">
28 Days Later
Silence of the Lambs
</div>
<div class="books">
Tithe
Anita Blake series
The Resort
</div>
]]>
Done!....?
Okay, so everything should be looking good at this point. You should have your CSS going on to make it look pretty, and your content boxes with stuff in them.
But feel free to go look at our div layouts and their
code as a ref. This whole tutorial was very brief and assumes you have logic and some previous skills. Please email us at inlovingdemise@Yahoo.com
and we'll help you out, if we can, with some small DIV questions.
|