what is the significance of... Options

[dreamsbecomereal...]

step three in making a div/overlay layout? here's the code that i hav 4 that step.

CODE

<div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="<a href=" /><img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a><br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vaW1nNjA0LmltYWdlc2hhY2sudXMvY29udGVudC5waHA/cGFnZT1ibG9ncG9zdCZmaWxlcz1pbWcyMjgvOTc2MS9iYXNrZXRiYWxsdmw5LmpwZw==" title="QuickPost"><img src="http://imageshack.us/img/butansn.png" alt="QuickPost" border="0" /></a> Quickpost this image to Myspace, Digg, Facebook, and others!"&gt;
</div>

[Mickey]

Yes, you can have as many layout images as you want. If you want your yellow boxes to be the same size, please post your code so it's easier for me to help.

That code wasn't the one that added 5 little boxes. Those are what you call DIV scrollboxes. They're the same as for the layout image. It's used to place content on your page, so that's where you would put your information. By changing a DIV scrollbox's attributes, you can have it look how you want:

CODE

<div class="content" style="position: absolute; left:50%; margin-left:0px; top:0px; width:0px; height:0px; overflow: auto;"><center>
CONTENT HERE
</div>

To change its positioning, change the margin-left and the top pixels. To change its height and width, change the height and width pixels. It's basically replacing the 0's. Just don't mess with left:50%; because that helps to have your profile look right on other resolutions.

To add information to a DIV scrollbox, just replace the text that says CONTENT HERE with your information.

[dreamsbecomereal...]

Yes, you can have as many layout images as you want. If you want your yellow boxes to be the same size, please post your code so it's easier for me to help.

That code wasn't the one that added 5 little boxes. Those are what you call DIV scrollboxes. They're the same as for the layout image. It's used to place content on your page, so that's where you would put your information. By changing a DIV scrollbox's attributes, you can have it look how you want:

CODE

<div class="content" style="position: absolute; left:50%; margin-left:0px; top:0px; width:0px; height:0px; overflow: auto;"><center>
CONTENT HERE
</div>

To change its positioning, change the margin-left and the top pixels. To change its height and width, change the height and width pixels. It's basically replacing the 0's. Just don't mess with left:50%; because that helps to have your profile look right on other resolutions.

To add information to a DIV scrollbox, just replace the text that says CONTENT HERE with your information.

ok. well here's my entire code. idk which part put the yellow boxes up though.

CODE

<style>
.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}
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>

body {
background-color: CC3300;
background-image: url("http://i282.photobucket.com/albums/kk243/superstarborn11/HSM3-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FF9900;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 999966;
scrollbar-face-color:CC3300;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:FF9900;
scrollbar-3dlight-color:CCCC99;}

table, tr, td {background-color: transparent; border: 2px; padding:2;}
table table {border: 2px;}
table table table table{border: 2px;}

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea
{font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}



{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:12px; color: 000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}


{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:10px; color: FFCC00; font-weight:none;border:1px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase; letter-spacing: 2px;}
a:active{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }

</style>




<style>a.links:link, a.links:active, a.links:visited {font:bold 12pt Arial; color:FFFF00; letter-spacing:-2px;}
a.links:hover {font:bold 20pt Arial; color:FF3300; background-image:url("http://carondelet.net/Music/music%20notes.gif"); background-repeat:repeat; background-position:center; letter-spacing:-2px;}
</style>

<div style="position:absolute; top:250px; left:50%; margin-left:-350px; height:200px; width:200px;">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjgwMjkyMjU" class="links">PICS</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2ODAyOTIyNSZN
VRva2VuPWEwNjI5MTBhLTliNmItNGU4MS1iNTJmLTMwZTVlYmYxYTBjYw" class="links">COMMENT</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjgwMjkyMjUmTXlUb2tlbj1lZWQ4NjAyNS1jYTBkLTRiOGQtYjM1OC1mMDVmZ
RiNzcyNjI" class="links">MESSAGE</a>
</div>


<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="1" width="1" style="width:1px; visibility:visible; height:1px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>


<div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" />
</div>

[dreamsbecomereal...]

ok. well here's my entire code. idk which part put the yellow boxes up though.

CODE

<style>
.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}
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>

body {
background-color: CC3300;
background-image: url("http://i282.photobucket.com/albums/kk243/superstarborn11/HSM3-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FF9900;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 999966;
scrollbar-face-color:CC3300;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:FF9900;
scrollbar-3dlight-color:CCCC99;}

table, tr, td {background-color: transparent; border: 2px; padding:2;}
table table {border: 2px;}
table table table table{border: 2px;}

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea
{font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}



{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:12px; color: 000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:10px; color: FFCC00; font-weight:none;border:1px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase; letter-spacing: 2px;}
a:active{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }

</style>
<style>a.links:link, a.links:active, a.links:visited {font:bold 12pt Arial; color:FFFF00; letter-spacing:-2px;}
a.links:hover {font:bold 20pt Arial; color:FF3300; background-image:url("http://carondelet.net/Music/music%20notes.gif"); background-repeat:repeat; background-position:center; letter-spacing:-2px;}
</style>

<div style="position:absolute; top:250px; left:50%; margin-left:-350px; height:200px; width:200px;">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjgwMjkyMjU" class="links">PICS</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2ODAyOTIyNSZN
VRva2VuPWEwNjI5MTBhLTliNmItNGU4MS1iNTJmLTMwZTVlYmYxYTBjYw" class="links">COMMENT</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjgwMjkyMjUmTXlUb2tlbj1lZWQ4NjAyNS1jYTBkLTRiOGQtYjM1OC1mMDVmZ
RiNzcyNjI" class="links">MESSAGE</a>
</div>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="1" width="1" style="width:1px; visibility:visible; height:1px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
<div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" />
</div>

also, do u hav n e suggestions 4 the pixels on the content?