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]

HELP what is a friend id? and how do i find mine?
I am SO lost. [b]


^
http://www.createblog.com/forums/index.php?showtopic=149841



uh, I used the code to be able to have the comments shown on my page, but my background is black and I can't see the text on the comments, is there a way to change the text-color on my comments?

Pm me your code or make a topic


hi i have a question. you know on some div layouts, they have a base? like um ... a picture that is the layout and everything else is added on.

the one i`m trying to use never shows up.

i`m able to hide my profile, but for some reason it won`t show what i want to put on it
i`ve tried all sorts of codes, but it still won`t show


^ You have to put it in a div and position it somewhere.


Okay, well I did read the html and I did choose to show it. I don't think you understood my question?..Can I get it into a seperate scrollbox and position it? Or do I need the 'expertise'..to be able to.

Make a topic and explain it a little more and post your entire code and we'll help you there. K?


[i]Oh, I figured out how to upload my background. I saved it as a png. file. It didn't seem to take away any of the quality at all and it made the file size much smaller. Umm...is there a reason why I shouldn't save it as a png. though?
[/i]
Actually pngs are really good. The only problem I can think of is that sometimes the file size is huge but pngs are just as good as jpg and gif. mmhm.


no matter how many times i reread the tutorial, i come out being even more confused than i already was...

i get past the first step, no problems. The second as well.

I can write stuff on my page, but how do I put them in a table, not just randomly positioned on my page. I'd show an example but after so much frustration, I just deleted my backgrounds.
It'd probably help if I were doing this when I'm not hopped up on pain killers is my guess, but that will take a few days and I want to do this while I actually have time!

Make a topic. And explain a little bit better. (Only because this may take a lot of posts to understand) Thankyou . Or you can pm me and I can explain.


Putting Comments and Friends in your div.
http://forum.myspace.com/index.cfm?fuseact...oupID=100636674

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/forums/index.php?showtopic=122380
Both link doesn't work.


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


I'm having a problem viewing the link on how to add both your friends and your comments to your div layout.

Everything else I've needed I've been able to see and get to work, but I just can't get the friends/comments set up.

can anyone possibly give me the info that was in the original posted link on how to do this? (this is the one that doesn't work for me)

Any help is greatly appreciated. I'm going nuts over here. *lol*

Just use this to hide your profile and it will allow the comments/friends to show up:
http://www.createblog.com/scripts/download.php?id=347


so i just made a template in photoshop

http://i13.photobucket.com/albums/a289/Fle...plate1final.jpg
I just dont know where to even begin with my div code to make this work.

Start with the begining of the tutorial and you will get it.


>< i dont get it what are you supossed to do?? im reading all this stuff and im getting confused can someone help mee?? im stupid with all this ode and postinging and stuff...what does overflow and content mean??why do you need paint??? >< help me???

Make a topic because if theres a lot we need to explain to you then I suggest making one. Overflow:auto; adds a scrollbar to your div. Content as in <div class="content" is the name of the div. Content as PUT YOUR CONTENT HERE means put your text/information here. You need paint/photoshop/psp/gimp/gimpshop if you want to make a design. You can get examples of designs in your layout section. You can see some of the div layouts with designs there. If you just want plain tables basically just a whole plain thing then you don't need paint or any of the other programs listed.


THANK YOU SO MUCH! YOUR SUCH A BIG HELP!!!! i can make regular layouts but i just started making DIV lays ! <333 buuuuut the hiding the music player link isnt working... could u please update/fix it ? thanks much!

Updated.