Making a DIV Overlay Layout, Step by step Options

[*This Confession*]

Note:This thread was updated and cleaned out on Febuary 26, 2007. Try to quote the post you are helping. Also please if you don't understand any of the steps, then please post a topic and don't reply in this one. If you just have one simple question (on a step or two) feel free to post it here.

Making a div

Version 1.0

Level : Step By Step
Written By: This Confession - Infinite.-Intercourse. Insurmountable

First:

Hiding your profile.

If you would like to have comments in your div. Please use this code.
http://www.createblog.com/scripts/script.php?id=376

If you wouldn't like comments to show use this code to hide your profile.
http://www.createblog.com/scripts/script.php?id=368

This will hide your whole profile, except for the ad.
Do not hide your ad, its against myspace rules. =]

Also yes, this coding and all of the coding can go in to your about me or who I'd like to meet


Second:

Customizing your profile.
http://www.createblog.com/forums/index.php?showtopic=84325

I suggest using the 3rd one down, it explains what all parts do and such.
But mostly all you need to do is do the background color, scrollbar colors, border colors.
and link colors and text properties.

Third:

Making your div's. [the fun part ]

Putting up your main image.
Upload it at http://www.imageshack.us

and then put it into this

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

Change the top and left to position where the image is.
And change the width and height to the same as the image.

I suggest making the top about 160-170px
So its right under the navigation bar more than likely.
Really Just mess with the numbers and such and you'll get the hang of it

Forth:

Other Div area's

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
CONTENT FOR DIV.
</div>

You can have as many of these as you want,
this is for all your other content.
Change the left and top for the positioning once again, you may want to make a estimate
and then just go check and see how much further it is away. Thats what most people do,
Just have patience and you'll be fine.

Change the width and height for how big it is. Most of the time I just crop out one of the places
in photoshop off the image and then get the image size so I can see how big it is instead of roughing it.

PS- you can get rid of the <center> Its just there to center your text if you want it to be centered.

Fifth

Final Touches

For this you may just want to make some final touches
Putting the comments in to your div.
http://www.createblog.com/scripts/script.php?id=74

For the comments in to your div, a lot of people have problems with it.
Make sure you don't have anything that hides stuff, such as bottom links or
top links or it won't work. [it sucks but you get use to it]

Also, if your using the myspace player. Then you may want to hide it so it isn't peeking through any of your divs and covering some important stuff.
http://www.createblog.com/scripts/download.php?id=409


Any other questions, just ask
But please if you have your problem on a myspace, then please provide a link and make sure your profile isn't private, if your profile is private then you won't recieve any help.

Positioning made easy?

quick lesson on "position: relative"

top: -45px = moves up 45px
top: 45px = moves down 45px
left: -15px = moves left 15px
left: 15px = moves right 15px

quick lesson on "position: absolute"

top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page
left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page
margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px
margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px




further explanation to someone that asked
http://www.createblog.com/forums/index.php?showtopic=157773

This post has been edited by micron: May 2 2008, 04:13 AM

[*Insurmountable*]

^Yea I've been meaning to really update this tutorial maybe i'll get to it in the future.

How To Image Map with Divs

Ah heres the full version, you need to go to the link below and read that as well:
*Most of this is for if you have photoshop, if you don't have photoshop tell me and i'll re-write a bit of this to help you
Ello again

Alright these are called Image maps.
Need an Example? Look at this layout as an example
http://www.createblog.com/layouts/preview.php?id=20372
*they do look like normal links, although their part of the image

When I first started using image maps I used this tutorial:
http://www.myspaceprodesigns.com/tutorial/map/

Make sure to use server side for myspace.

If you don't understand it then I'll be more than happy to explain how to use image maps throughly.
If you do have any questions read over this: I wrote this for another person with the same question as you

Ello, since i'm currently talking to you on aim about this and i can't send coding through aim I'll post it here for you
This is your actual image maps, remember those coords you needed to get that I said was going to be wayyy easier using photoshop for? Well here is where you'll put them in. As you can see for a rectangle the points are like this when image mapping:

Now pretend like there is an imaginary rectangle around each link on your image: http://i7.tinypic.com/6aitczq.gif
Now take the little point and go over the top left corner, you'll get two coords that look like this in photoshop:

The x is your x1
and the y is your y1.
Now go to the bottom right corner of your imaginary rectangle that these two points will be your x2 and y2.
Now do this step over and over for each link

In the code below it should be pretty easy to figure out that you now know which coord is which. Just go in the code below and fill out each one of these:

Each is going to be different for each link.
LOCATION- You can keep track of which link is which by writing "Home" or "Message" or any of your other link names.
x1,y1,x2,y2 - Well I hope you know what to write in the place of those
LINK- This is where you place the actual link for each one of these.

CODE

<div class="navigation">

<img src="http://i7.tinypic.com/6aitczq.gif" width="448" height="465" border="0" alt="" usemap="#navibar_Map">
<map name="navibar_Map">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">
</map>
</div>

Your almost done:
All of this is in a div, which I'm sure you know what that is. All you need to do is position this div right where your existing links are. So pretty much your overlaying a image over your existing image but this div has all your links in it

CODE

.navigation {
    width:450px;
    height:470px;
    overflow-x:hidden;
    position:absolute; z-index:2;
    background-color:transparent;
    border:0px solid;
    border-color:white;
    margin-left:255px;
    margin-top:458px;
    text-align:justify;
    visibility:visible;
}

Just fill this out like you would any other div and put it with your other divs
Any other questions or concerns feel free to post them in here