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

[leib92]

i need help putting pictures on a div layout can neone help??

[MzYennie]

Ok so I made the layout and code and everything.
but when i put it in to my myspace none of words show or anything!
besides my navigation and picture.
What did i Do wrong?
and how do i hide the bottom links? there in the way >.<

heres my profile
http://profile.myspace.com/index.cfm?fusea...iendid=69733435

[schizo]

Are you sure there aren't any typos and that you put ending div tags at the end of everything? If you can't find anything, please post your code so we can look at it and spot the error.

You didn't put ending div tags at the end of your sections. Make sure you put </div> before starting a new one.

This script hides the bottom links. Hiding the Contact Myspace and Report Abuse links are against the Terms of service, so make sure you put them somewhere else if you use that.

[dsinc]

This tutorial is really great.
Im trying to learn divs, but ive hit a wall.
when adding my div the image doesn't show, though the content does.
Ive played around with it using all forms of the image code from both imageshack and photobucket and nothing works.
everytime I go back to my code it has usurped the <Img src and replaced it with dots.

the problem is here:
<a href="http://img388.imageshack.us/my.php?image=fordivforumrl0.png" target="_blank"><img src="http://img388.imageshack.us/img388/448/fordivforumrl0.th.png" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a>


my extra page that play around with is here:
http://profile.myspace.com/index.cfm?fusea...endid=390345245

If you could help me, Id be really grateful, thanks.

[DespisedandBelov...]

Really great tutorial...it help me out alot! If you can plz help me..I just made a div layout on photoshop and I just follow your instruction and everything work out how I want it but now I don't know what 2 do...I need help with my msg, add comment, add friend, ect buttons..and how to put stuff on my custom div...please check out my myspace page to understand what I mean http://www.myspace.com/despised_and_beloved

[schizo]

dsinc: Could you please take your test profile off of private or give us your entire code? Thanks.

DespisedandBeloved: The tutorial explains exactly how to make more sections for content. What part of it do you not understand? Please be more specific.

[DespisedandBelov...]

I know this sounds stupid but is there anyway I could ruler it to the location i want so it can be perfect..but my other problem is how to get the button to work too....I know you use this

CODE

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

But how do I get exactly to those button and get them to work? sorry I don't know how to explain it better

[schizo]

For me, it's easiest to just play with the numbers until it's lined up perfectly. Once you get close, just adjust the numbers with smaller increments to get it right.

You should probably use an image map for those links. I have a tutorial here that will explain.

[DespisedandBelov...]

thank you!!! I got the first part done and I'm starting to understand how to do it...thanks you that all I needed

[JazzyCullenzWTF]

OK! SO im trying to submit a layout to createblog but like idk if there is a specific way/code where you can center a pic in all screen resolutions..
or am i supposed to like..
idk
help? ):

[xstartemple]

Thank you guys sooo much for putting this up! Your the best, I understood everything, but one thing, I just need to code to hide the bottom where it says about,faq and all that to hide it? Like I just get the hide bottom links and it hides?
o.O

[LoveLikeRain]

hey...umm....you can make the entire layout in photoshop, then put it up, and just position where the text and links go, right?

[schizo]

OK! SO im trying to submit a layout to createblog but like idk if there is a specific way/code where you can center a pic in all screen resolutions..
or am i supposed to like..
idk
help? ):

Add left:50% to the section for the div positioning and use margin-left:#px; to actually position it. If you get it centered in your resolution that way, it will be centered for everyone else as well.

Thank you guys sooo much for putting this up! Your the best, I understood everything, but one thing, I just need to code to hide the bottom where it says about,faq and all that to hide it? Like I just get the hide bottom links and it hides?
o.O

There's a code for hiding the bottom links in the scripts section. Just type "bottom links" in the search bar and something should come up. It's against Myspace TOS to hide certain links like Contact Myspace and Report abuse, so make sure you add them somewhere.

hey...umm....you can make the entire layout in photoshop, then put it up, and just position where the text and links go, right?

Yep.

[taz20]

I understand everything, but how to I link my pic words that I already made on my overlay?

Attached File(s)

 OVERLAY.jpg ( 114.79K ) Number of downloads: 9

 

[schizo]

^ You need to use an image map. I have a tutorial on how to do that here.

[taz20]

Thank You!!!

[XXXnunu]

this seems like big help because everyone keeps saying 'thanks' and stuff, but im a beginner.i was wondering if you can show it like..
more detailed, because im very confused and im trying to learn how to code

i know how to html/css.
but i dont know how to code the div image's.

i just really want to learn. :(

this helped a bit though, thanks.
i hope you make more.

&where do i put code at? which codes should go in About me & which should go in Who Id like to meet.

should i do

CODE

<style>
body {
background: url('.IMAGEURL');
background-position:repeat;
background-color:000000;
line-height:;
cursor:;}

</style>

(i put this code in about me, of course i do <nav. div. )

but i just wanted to know where to put things, its all confusing x-x

Reason for edit: don't forget to add codeboxes, dear :) -nat

[schizo]

You could put it in your About Me or Who I'd Like to Meet. It doesn't really make a difference.

As for a more detailed tutorial, I don't really know how much more detailed it can be. I've written one here that's slightly different. I don't know if it will help, but you could try.

[dokidoki]

I can create a layout just fine. What I'm having trouble with is centering it. I want it to be centered relative to the browser window, so that no matter if you have a widescreen or 15" monitor,m it will always be centered.

[Mickey]

When you position a DIV, have this for the left margin attributes:

CODE

left:50% margin-left:-400px;

The 50% will put the left edge of your DIV in the center, and the -400 will pull it in to the left so the center of that DIV is in the middle. Of course, the margin-left pixels varies according to the width of whatever you're trying to position. Usually, the width divided by two is what it should be.

[Fitznblend]

^ You need to use an image map. I have a tutorial on how to do that here.

Hi,

I have attempted this but the links aren't clickable? (The hand icon doesn't show when rolled over the area.)

I have noticed that myspace completely takes out the # in the usemap="#map" when this is previewed/submitted.

Should this affect anything at all?

I'm currently trying to make a band profile using the article from http://views-under-construction.blogspot.com.


Where it asks to start custom content... I've just inserted an image with the image map details.

[Mickey]

Yeah, that might be it. Try this instead:

CODE

<img name="NAME" src="IMAGE" border="0" usemap="#NAME" alt="" />

<map name="NAME">
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
</map>

That still has a pound symbol but it works on someone else's layout, for some reason.

[Fitznblend]

Weird. This didn't work so I just resorted to slicing them.

Thanks

[GabyArtz]

kool

[bhulan]

hye im new here.and i want to ask something.

urmm can any body help.

my div scroll box is going wild.
okay,when i edit or change the margin-left,width using IE(window vista),
and i view my profile using mozilla firefox.its come out like this.
how should i do with it so the srollboxs thing will keep constant in position.



PLEASE HELP ME!