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

[freeflow]

ok i did all the steps including the slice thingy for the links...but my question is were do i put the code for the layout with the working links?

Read the frst part of the tutorial. Take that code you would use for the image. Instead of <img src="urltoimage"> you put the slice code.

alright i did that and it still didnt work. do i have to do something to the slice code to fix the problem first

I was assuming you edited it already. Take all the images they give you and upload them. Then place them in the code where it says.

i STiLL DON'T GET THiS.iTS STiLL CONFUSiNG TO ME

Post a topic and be a lot more specific of what you don't get. Also if you never made a regular default layout. I suggest you learn that first.

I am so sorry, but i am still extremely confused.
I have read and re-read over the tutorial and I don't understand how things work. Ive been told to give up on trying but I want to learn how to do it right.

http://img403.imageshack.us/img403/3868/untitledoz7.jpg
they are the links to the layout that i would like to use. If someone could please, please h elp me make it that would be greatly appreciated.

Make a topic. To do that, the links, you have to go through image mapping/image slicing. If you search this forum maybe some of those will help you better. Programs you can use are imageready and cutemap. Their are others though.

The tutorial is great! I was able to follow step by step, although i have a minor problem =] my image seems to be small for an image size of 1000 pixels by 2000 pixels[im planning on changing the size anyway]. someone told me it might be my resolution, but i dunno what resolution i have to have so my image comes out the size i want it to be.

What do you mean smaller? Thats a huge size sorta. If it doesn't fit full screen it means you have a bigger resolution than that. So you need to figure out your res. There are tutorials all over google depending on what type of computer you have (windows or mac). But remember if you make it bigger people w/ smaller resolutions can possibly get a scrollbar.

i dont know what a DIV is! or FRIENDID! i dont know any of this stuff! i need help!

^ Then don't read the tutorial. Read the one that is for a default layout.

I feel so stupid. lol. Idk why it's not working for me...

http://profile.myspace.com/index.cfm?fusea...9a-4327864e4270
it worked when I used it in the bbzspace div generator, but i wanna submit it on here

I suggest you post a topic , because there are many possible reasons why it may not work. Or you can pm me and I can probably help you out. :] It almost works looks like you just need to get text in the boxes and I can help you with that through pm or you can make the topic.

This has helped me soo much!!
Thank you!!
Thank you!!
Thank you!!

I have one question though... How can I change the bold so when something is bolded it isn't yellow?
:/

^ http://www.createblog.com/scripts/download.php?id=48