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

[casaundradonald]

I hope I am doing this right....

CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>



<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{

body {background-color:1f5079;background-image: url("http://i26.tinypic.com/3354bnr.jpg");background-position: top left;background-repeat: repeat;background-attachment: fixed;}

background-color:transparent;
scrollbar-arrow-color:fb4c6b;
scrollbar-track-color:fb4c6b;
scrollbar-shadow-color:fb4c6b;
scrollbar-face-color:fb4c6b;
scrollbar-highlight-color:fb4c6b;
scrollbar-darkshadow-color:fb4c6b;
scrollbar-3dlight-color:fb4c6b;
font-family:tahoma;
font-size:8pt;
color:white;
border:white;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 1px dashed FFFFFF;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:FFFF00;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;border:0px solid FFFFFF; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF; border:0px solid FFFFFF;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000; border:0px solid FFFFFF;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000;border:0px solid FFFFFF;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;border:0px solid FFFFFF;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: CCFFFF;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:FFFFFF;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:FFFF00;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>


<style type="text/css">
b, strong {background-color: dda387;
color: white;
font-family:Georgia;
font-size:8pt;
letter-spacing:1pt;
font-weight:bold; }
i,em{
background-color:transparent;
color:7e6657;
font-family:Georgia;
font-size:8pt;
letter-spacing:0pt;
font-weight:normal; }
u{
background-color: transparent;
color:7e6657;
font-family:Georgia;
font-size:8pt;
letter-spacing:1pt;
font-weight:normal; }

</style>

<style>
body table td div form {display:none !important;}
</style>

<style>div table div div select {position:absolute !important; top:-200px !important; left:0px !important; }</style>


<div class="bg" style="position: absolute; left:180px; top:150px; width:800px; height:600px; overflow: hidden;">
<img src="http://i32.tinypic.com/15z59o7.jpg">
</div>




<div class="content" style="position: absolute; background-color:transparent; left:180px; top:150px; width:800px; height:600px; overflow: auto;"><center>
<html>
<html>
<head>
<title>numbaaatwo</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="http://i32.tinypic.com/15z59o7.jpg" width="800" height="600" border="0" alt="" usemap="#numbaaatwo_Map">
<map name="numbaaatwo_Map">
<area shape="rect" alt="Click for Everything!!" coords="459,417,788,582" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zNTQzOTAwNTgmTXl0
2tlbj0yQ0I0RTM4OS0wNDRDLTQ4RTItOTRGQzI1OUU5OTNBMzE1MDE4NDAwNzA=" target="_self">
<area shape="rect" alt="My site Pets!" coords="42,535,150,565" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODQ1ODUmTXl0
2tlbj00RTFEMUVFNi1BNzkyLTRFOUEtOTFCOEM4Q0YwNUQ2RjFDNTQ3NTA4NjIy" target="_self">
<area shape="rect" alt="Popular's Signs!" coords="32,494,119,527" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Must Read!!" coords="32,439,118,479" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMTIwNzkzNDAmTXl0
2tlbj0wNDI0MDY2OS02MTZFLTQ4OTktODc4NEZGN0E1RjNEODJFQzI1ODE2NDgz" target="_self">
<area shape="rect" alt="SFS?" coords="42,403,108,431" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODUzMjQmTXl0
2tlbj1COENFRjU3My04Njc2LTQxOUUtOEQ1REFGMTY5ODA5REYyQzY0MTY3MDU=" target="_self">
<area shape="rect" alt="Delete :(" coords="42,354,119,390" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmNvbmZpcm1kZWxldGVmcmllbmQmZnJpZW5kSUQ9MjExMTg3NjM5" target="_self">
<area shape="rect" alt="Comment Popular!" coords="23,304,141,328" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTIxMTE4NzYzOSZN
VRva2VuPTdhOTJjOGJiLWUyNjQtNGJlOC1hZjlmLWU4OTMyYTEwMTI5" target="_self">
<area shape="rect" alt="Message Popular!" coords="42,265,120,294" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Add Popular!" coords="42,216,109,253" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Home" coords="23,167,142,208" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" target="_self">
</map>

</body>
</html>
</div>



<div class="content" style="position: absolute; left:260px; top:260px; width:150px; height:150px; overflow: auto;"><center>

grr
</div>