Making a DIV Overlay Layout, Step by step Options

[Mickey]

^Try using different positioning codes. For Firefox, use margin codes regularly. Then for Internet Explorer, add an underscore before another margin-left attribute. It should look like this:

CODE

margin-left:#px; _margin-left:#px;

Then you would replace the pound symbols with the appropriate number.

[bhulan]

^^THANKS,i'll try!
:DD

[Mickey]

Sure, no problem.

[shanahk]

PLEASE HELP ME

Something is wrong with my div but i dont kno what? *I'm new to this*

here is the link to the profile!

Click here!


and here are the codes in my 'about me' section:

CODE

<style>table table table {padding:1px; background-color:000000; background-image: url("");border-top:1px;border-bottom:1px;border-top-color:333333;border-bottom-color:333333;border-left:1px;border-right:1px;}body{background-image:url("http://i246.photobucket.com/albums/gg92/itsirrational/famous1.png"); background-repeat:repeat; background-attachment:fixed; background-color:fff;}table table table {border: 0px solid; border-color:000000; padding:0; background-color:fff;}{border:1px;}table td td {width: 0px;}TD TD {text-align: center;}TD TD TD {text-align: center;}TD TD TD TD {border-top: 0px solid; width: 1%; text-align:center;}TD TD TD TD TD {border-top: 0px solid black; text-align:center;}TD TD TD TD TD TD {border: 0px solid;}TABLE, TD {padding: 0px; text-transform: lowercase; width:350px;}TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE {padding: 0px; text-transform: uppercase;height: .01%; width: 100%;}TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}table td div div font {visibili-ty:hidden;di-splay:none;}table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table table {border: 0px; text-align: justify; padding: 0px;}body{margin-top:10px;margin-right:0px;}td.text td.text table table table td a img {width:50px;}td.text td.text table table table td div img {width:50px;}td.text td.text table table td img {width:50px; max-width:50px; width:auto;}td.text td.text table table td div img {width:50px;}* html td.text td.text table table td img {width:50px;}* html td.text td.text table table td a img {width:50px;}* html td.text td.text table table td div img {width:50px;}... {display:none; visibility:hidden;}body div table table{width:450px !important;}body div table table br{display:none !important}img, a:link img, a:active img, a:visited img{filter: !important}strong table table table{padding:0px; height:auto}body div table table br{display:none !important}td.text td.text table table td {padding:0;}td.text td.text table table br {display:inline;}div td font {visibility:hidden;}.navbar {visibility:hidden;} .navigationlinks{position:absolute; top:120px; left:50%; margin-left:-400px; width:800px; height:40px; color:000000 !important}a.navigationlinks, a.navigationlink:link, a.navigationlinks:visited{color:000000 !important;}body table table div font a, body table table div div {visibility:visible;}tr{background-color:transparent}table, td {background-color:transparent; border:1px; border-width:0px;}.navigationbar{display:none;}div table tr td form{display:none;}div td img{display:none; visibility:hidden !important; width:0px !important}</style><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><img src="http://itsirrational.com/images/layouts/credit-1.gif" border="0" /></a></center></style><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><img src="http://itsirrational.com/images/layouts/irl.gif" border="0" /></a></center><style>td.text td.text table table table td a img {width:100px;}td.text td.text table table table td div img {width:80px;}td.text td.text table table td img {width:260px; max-width:260px; width:auto;}td.text td.text table table td div img {width:80px;}* html td.text td.text table table td img {width:260px;}* html td.text td.text table table td a img {width:90px;}* html td.text td.text table table td div img {width:80px;}a:link, a.man:link, a.text:link, a:visited, a.man:visited, a.text:visited, a:active, a.redlink:active, a.redlink:visited, a.redlink:link {text-decoration:none; font-size:9px; color:000000; font-weight:normal; font-family:century gothic; cursor:url("http://www.freewebs.com//tiny.cur");}a.navbar:link, a.navbar:visited, a.navbar:active{font-size:9px;color:000000;text-decoration:none;font-family:century gothic;line-height:19px;cursor:url("http://www.freewebs.com//tiny.cur");}a.navbar:hover{font-size:9px;color:ffffff;text-decoration:none;font-family:century gothic;line-height:19px;cursor:url("http://www.freewebs.com//tiny.cur");}a:hover, a.man:hover, a.text:hover, a.redlink:hover {color:f8549e; font-size:9px; text-decoration:none; font-family:century gothic; line-height:9px; letter-spacing:1px; cursor:url("http://www.freewebs.com//tiny.cur");}td, .whitetext12, a, body, table, body, td, li, p, div, li, h1, h2, lol, p, br, .text, .blacktext12, .blacktext10, .btext, .lightbluetext8, .orangetext15, legend, b, strong, .redtext, textarea {font-size:9px; font-family:century gothic; font-weight:normal; text-transform:lowercase; line-height:9px; color:000000; letter-spacing:1px;}.blacktext10{width:150px; text-align:right; border-style:solid; border-width:1px; border-color:000000; color:000000; background-color:f8549e; line-height:12px;}.redbtext{font-size:9px; line-height:9px; color:000000; font-family:century gothic;letter-spacing:1px;}.lightbluetext8 {font-size:9px; background-color:4a4949; border: 1px solid black; letter-spacing:1px; line-height:12px; display:block;}.blacktext12 {background-color:ededed; display:block; font-size:9px; font-family:century gothic; font-weight:normal; border:1px solid black; line-height:13px; letter-spacing:1px; border-right:0px;}.orangetext15 {background-color:4a4949; font-size:9px; color:000000; font-weight:normal; border: 1px solid black; display:block; line-height:12px; border-right:0px;}.whitetext12 {background-color:ededed; font-size:9px; color:000000; border: 1px solid black; line-height:12px; font-weight:normal; display:block; border-left:0px;}.nametext {text-align:left; display:block; font-family:century gothic; font-size:25pt; color:000; font-weight:normal; text-decoration:lowercase; letter-spacing:-3px; margin-top:16px;margin-bottom:6px; border-bottom:5px; solid black; background-color:f8549e; border:1px solid; border-color:000000; padding-left:4px; border-left:0px;}u {color:000000; border-bottom-style:dashed; border-bottom-width: 1px; border-bottom-color:4a4949; line-height:12px; text-decoration: none; font-size:9px; letter-spacing:1px;}big {color:f8549e; line-height:30pt; font-size:25pt; font-weight:normal; font-family:century gothic; letter-spacing:-2px;} i {font-weight:italics;font-family:century gothic; font-size:9px; }img {border-width:0px;}</style><style>td.text td.text table table table td a img {width:50px;}td.text td.text table table table td div img {width:50px;}td.text td.text table table td img {width:50px; max-width:50px; width:auto;}td.text td.text table table td div img {width:50px;}* html td.text td.text table table td img {width:50px;}* html td.text td.text table table td a img {width:50px;}* html td.text td.text table table td div img {width:50px;}</style><style>div table td font {display: none;}</style>

</div>
<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.yellowtext,.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>

</div>
<style>
.comments {position:absolute; left:50%; top:960px; _top:363px; margin-left:-430px; _margin-left:-430px; width:415px; _width:70px;}
.friendspace {display:none;}
.friendscomments {margin-top:-80px;}
table.friendsComments img {max-width:365px}
table.friendsComments a {max-width:90px}
</style>

and here is the code that is in my 'i'd like to meet' section:

CODE

<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.yellowtext,.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><div class="content" style="position: absolute; top:10px; left:px; width:200px; height:300px; overflow: auto;">
<div style="background-attachment:scroll;">TEXT/IMAGES/SURVEYS WHATEVER HERE</div>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0zMDg1MjU4NzImTXlUb2tl
j03YjljOGRkNi0zZjkyLTQ1ZTktOTI2YS03ZjRjZGMyNmI3YjE="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/add2.png" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zMjUxOTQ3NDAmTXlUb2tlbj03YjljOGRkNi0zZjkyLTQ1ZTktOTI2YS03ZjRjZ
MyNmI3YjE="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/msg2.png" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTMwODUyNTg3MiZN
VRva2VuPTdiOWM4ZGQ2LTNmOTItNDVlOS05MjZhLTdmNGNkYzI2YjdiMQ=="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/cmnt2.png" /></a>
</div>
<div class="comments"><table><tr><td><table><tr><td></div>

[bhulan]

hey,i cannot make it.

Can anybody check whats wrong with my div layout?

here the code(i take the code from div layout createblog and i edit little bit.

ABOUT ME:

CODE

<style>body{
background-color: 000000;
scrollbar-arrow-color:000000;
scrollbar-track-color:ffffff;
scrollbar-shadow-color:fff;
scrollbar-face-color:fff;
scrollbar-highlight-color:fff;
scrollbar-darkshadow-color:fff;
scrollbar-3dlight-color:fff;}
</style>

<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 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;}
table, tr, td{
background-color:
transparent; border: 0px;
}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
body div table td form{display:none!important;}
body{
background-color: ffffff;}

.div{
position: absolute;!important;
left: 15%;!important;
margin-left:-170px;!important;
top: 100px;!important;
z-index: 0;}

.nav{
position: absolute;!important;
left: 15%!important;
margin-left:-170px;!important;
top: 100px;!important;
z-index: 0;}


.section1{
position: absolute;
left: 16%;!important;
margin-left:78px;!important;
top: 350px;
z-index:5;
width: 124px;
height: 114px;
overflow: auto;}

.welcome{
position: absolute;
left: 38%;!important;
top: 243px;
z-index:5;
width: 132px;
height: 63px;
overflow: auto;}

.mustadd{
position: absolute;
left: 22%;!important;
top: 645px;!important;
width: 110px;!important;
height: 24px;
overflow:;}

.ulzzang{
position: absolute;
left: 35%;!important;
top: 510px;!important;
z-index:5;
width: 180px;
height: 71px;
overflow: auto;}

.sitemodel{
position: absolute;
left: auto!important;
margin-left:130!important;
top: 335px!important;
z-index:5;
width: 104px;
height: 77px;
overflow: auto;}

body,table, td, li, p, div
{
font:normal 12px verdana;
color:000;
font-weight:none;
border:0px;
text-transform: none;
line-height:12px;}

textarea{
background-color: transparent;
width: 150px;
height: 50px;
color: fff;
font:10px small fonts;
text-transform:uppercase;
border: solid 1px 000;}

a:active,a:visited,a:link,a{
color:ad1907;
font-size:12px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;
}
a:hover{
color:000;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;}

.standard b, p b, B, strong {
font-family:verdana;
font-size:9px;
color:ad1907;
font-weight:none;
border:0px;
text-transform: none; }
</style>

<style>td td object {position:absolute; left:0px; top:0px; display:block; width:0px; height:0px;}</style>

<style>.r{}</style>






<style>td td embed {position:absolute; left:50%; margin-left:250px; top:400px; width:295px; height:51px; } td td td embed { position:static; width:auto; height:auto; }</style>

Who I'd Like to Meet:

CODE

<div class="nav">
<img src="http://i158.photobucket.com/albums/t105/poyo07/Untitled-3-3-1.jpg" usemap="#navibar_Map" />
<map name="navibar_Map">

<area shape="rect" alt="Message" coords="88,137 214,177" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zOTExODg2NDEmTXlUb2tlbj00MjhlN2ZiYS04ZmNkLTQyNjEtYmI2ZC0yNGNiN
g3MmYzZDM=" />
<area shape="rect" alt="album" coords="753,130 870,163" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zOTExODg2NDE=" />
<area shape="rect" alt="comment" coords="99,587 261,614" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM5MTE4ODY0MSZN
VRva2VuPTlmNmZhODdkLTg2Y2EtNDA2OS05Y2EyLWMyMGM1MThjNmJlNw==" />
<area shape="rect" alt="home" coords="689,495 985,525" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />
</map>
</div>

<div class="section1"><br /><center><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>contest done</option><option>-------------------</option><option>not yet,soon.</option></select><br /><br /><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>symbol</option><option>-------------------</option><option>★-next contest.</option><option>♥-done contest</option></select><br /><br /><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>contest<33</option><option>-------------------</option><option>best Smile★</option><option>cutest Pout</option><option>cutest Eyes</option><option>cutest Gif</option><option>cutest Hearts sign</option><option>cutest NG</option><option>cutest upside down</option><option>cutest Shocked/suprised</option><option>cutest w/ stuffed animal</option><option>cutest w/ glasses/shade</option><option>cutest covered face</option><option>moremoremore!</option></select><br /><br />

</center> </div>

<div class="welcome"><br /><center>
<sub>Hye,nice to meet you guys.AND Welcome To WONDER ULZZANG contest site.im the owner of this Site,FARAH.i made this site because i love design stuff and graphic.haha:).I know im not so good with it.but i'll learn.haha :D.and i need your help and support me,and enter my contest (>.<).<sub></center>
</div>


<div class="mustadd"><br />
<marquee width="154%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=422513431">Woah Ulzzang</a>-
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tLzI3ODg0MTY1Ng==" target="_blank">Happy Virus Cafe</a>-<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTI5MTcyNjUzMg==" target="_blank">Best Ulzzang</a>

</marquee>
</div>


<div class="ulzzang"><br /><center>
Ulzzang is Korean slang that means "the best face". In South Korea, some people take pictures of themselves and post them on the internet, whether on their own sites or sites specially created for ulzzangs. Voting, chatting, etc can be done on some sites. Some people may get famous and might earn celebrity status and get adored by fans.<br /><br />------------------------<br /><br /><font size="3">Some real ULZZANGS</font><img src="http://i158.photobucket.com/albums/t105/poyo07/080320_270copy_19385.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/145.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/bnyh.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/jroo8.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/lee-yee-ji.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/minaIMG_1985.jpg" border="0" alt="" />
</center></div>

<div class="sitemodel"><br />
<center>Site Models
Site models will be chosen every ONCE a month.
We are now choosing our own site models, so if you're lucky enough -
You'll get asked by us if you would like to be one.
Whether you refuse to be one or not, it's okay.
<br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MzkxMTg4NjQx">Click to Be SITE MODEL!</a></center>
</div>











<style>.r{}</style>
<style>.r{}</style>

[xdanky]

I have the Div image.
I'm getting the css coding.
but...how do i position?

help.

[Mickey]

Look for these bits in your coding:

CODE

top:#px; left:50%; margin-left:#px;

Edit the top and margin-left values.

[xdanky]

i didnt code it out yet
i have the div overlay image, tje only problem is IDK how to postion

what do i need to know where to postion??
do i download something
help

[loveofmusic23]

The tutorial was very helpful and I liked doing this for the first time. So kudous on that. The only issue I'm having is the fourth step for the other divs? I need help understanding what exactly you mean by

CODE

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

What do you mean by DIV CONTENT. I'm new at this and I'm making a page for a friend so I need help making it perfect. It's a myspace profile here is the link.

http://profile.myspace.com/index.cfm?fusea...endID=442184154

Reason for edit: Please use [code] tags when posting codes. - Mike

[trapsuperstar904]

Alright, So I've never really made a myspace layout before.
Standard or DIV, however I wanted to learn.
DIV I find more interesting, so I took your tutorial.
I know the basic knowledge.
But I got a couple questions.

I dont really understand the third step.
Not that I dont get it, I got it done.
I just dont see the point in it.
Can you explain that to me maybe?

And this is my first try, and I've been at it for about an hour.
http://profile.myspace.com/index.cfm?fusea...endID=397985554

Below this image, Im going to put scroll boxes for about me, who id like to meet.
Etc, with beer pong balls in between for links pics, add, etc.

But, theres like 3 mini rectangles by my home and stuff.
I dont know how to get rid of them. :(

Nevermind.
I got it all pretty much figured it out.
:)

More than welcome to check it out.
:)

However, I never did get rid of those odd rectangles.
I just used my image to cover them up..
They we're right by my home so I might
Have to come back for help if I make another one.
:)

Reason for edit: posts merged. please don't double pst. thanks. -nat

[msclumsieee]

Ok so i made a layout on myspace... i dunno because i have never directly made a overlay layout that had links from photoshop and placed it on myspace.. i usually make it and make transparent boxes and try and position EACH AND EVERY one to its rightful place.. which takes forever and a day. so heres the html that i got from photoshop and i would like to post it on myspace....

CODE

<html>
<head>
<title>myspace</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (myspace.psd) -->
<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="12">
<img src="images/myspace_01.gif" width="1024" height="47" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="images/myspace_02.gif" width="903" height="21" alt=""></td>
<td colspan="3">
<a href="http://www.myspace.com/msclumsieee">
<img src="images/myspace_03.gif" width="100" height="16" border="0" alt=""></a></td>
<td rowspan="6">
<img src="images/myspace_04.gif" width="21" height="721" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/myspace_05.gif" width="100" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/myspace_06.gif" width="632" height="339" alt=""></td>
<td colspan="2">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/message.gif" width="103" height="20" border="0" alt="Message Me"></a></td>
<td rowspan="4">
<img src="images/myspace_08.gif" width="18" height="700" alt=""></td>
<td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=25881">
<img src="images/Add.gif" width="52" height="20" border="0" alt="Add"></a></td>
<td rowspan="4">
<img src="images/myspace_10.gif" width="26" height="700" alt=""></td>
<td colspan="2">
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/Friends.gif" width="85" height="20" border="0" alt="friends"></a></td>
<td rowspan="4">
<img src="images/myspace_12.gif" width="27" height="700" alt=""></td>
<td>
<a href="http://blog.myspace.com/msclumsieee">
<img src="images/myspace_13.gif" width="60" height="20" border="0" alt="Blog"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_14.gif" width="103" height="319" alt=""></td>
<td rowspan="3">
<img src="images/myspace_15.gif" width="52" height="680" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/myspace_16.gif" width="85" height="680" alt=""></td>
<td rowspan="3">
<img src="images/myspace_17.gif" width="60" height="680" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/myspace_18.gif" width="442" height="361" alt=""></td>
<td colspan="2">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=25881">
<img src="images/photos.gif" width="283" height="267" border="0" alt="Photos"></a></td>
<td rowspan="2">
<img src="images/myspace_20.gif" width="10" height="361" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_21.gif" width="283" height="94" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="442" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="190" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="72" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Reason for edit: please put codes in codeboxes. thanks :) -natalia

[Mickey]

Use just this bit:

CODE

<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="12">
<img src="images/myspace_01.gif" width="1024" height="47" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="images/myspace_02.gif" width="903" height="21" alt=""></td>
<td colspan="3">
<a href="http://www.myspace.com/msclumsieee">
<img src="images/myspace_03.gif" width="100" height="16" border="0" alt=""></a></td>
<td rowspan="6">
<img src="images/myspace_04.gif" width="21" height="721" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/myspace_05.gif" width="100" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/myspace_06.gif" width="632" height="339" alt=""></td>
<td colspan="2">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/message.gif" width="103" height="20" border="0" alt="Message Me"></a></td>
<td rowspan="4">
<img src="images/myspace_08.gif" width="18" height="700" alt=""></td>
<td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=25881">
<img src="images/Add.gif" width="52" height="20" border="0" alt="Add"></a></td>
<td rowspan="4">
<img src="images/myspace_10.gif" width="26" height="700" alt=""></td>
<td colspan="2">
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/Friends.gif" width="85" height="20" border="0" alt="friends"></a></td>
<td rowspan="4">
<img src="images/myspace_12.gif" width="27" height="700" alt=""></td>
<td>
<a href="http://blog.myspace.com/msclumsieee">
<img src="images/myspace_13.gif" width="60" height="20" border="0" alt="Blog"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_14.gif" width="103" height="319" alt=""></td>
<td rowspan="3">
<img src="images/myspace_15.gif" width="52" height="680" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/myspace_16.gif" width="85" height="680" alt=""></td>
<td rowspan="3">
<img src="images/myspace_17.gif" width="60" height="680" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/myspace_18.gif" width="442" height="361" alt=""></td>
<td colspan="2">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=25881">
<img src="images/photos.gif" width="283" height="267" border="0" alt="Photos"></a></td>
<td rowspan="2">
<img src="images/myspace_20.gif" width="10" height="361" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_21.gif" width="283" height="94" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="442" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="190" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="72" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>

Put it inside a DIV so you can position it wherever you like:

CODE

<div style="position:absolute; top:500px; left:50%; margin-left:-400px;">
Insert codes for sliced images here.
</div>

Replace the top and margin-left values with the appropriate numbers and replace the text in between the <div> tags with the code I first posted. Lastly, upload the images you sliced separately then look for these:

CODE

images/myspace_01.gif
images/myspace_02.gif
images/myspace_03.gif
images/myspace_04.gif
images/myspace_05.gif
images/myspace_06.gif
images/myspace_07.gif
images/myspace_08.gif
images/myspace_09.gif
images/myspace_10.gif
images/myspace_11.gif
images/myspace_12.gif
images/myspace_13.gif
images/myspace_14.gif
images/myspace_15.gif
images/myspace_16.gif
images/myspace_17.gif
images/myspace_18.gif
images/myspace_19.gif
images/myspace_20.gif
images/myspace_21.gif
images/spacer.gif

Replace them with the URLs of the images you uploaded.

[msclumsieee]

Thank you! :)

[Mickey]

No problem.

[HellsBeauty]

I'm having problems with a DIV layout.. I can't hide the music player.. Ive tried moving it up but it gets all screwed up... myspace has a "hide" featuer for the player but when you hide it it doesn't work.. any help? oh here is my page so you can see what I mean
http://profile.myspace.com/index.cfm?fusea...endid=101543659

[viviangoesrawr]

OMG THANK YOU SO MUCH!!!

[tink919]

OK so i spent about 34 hours on a layout making it perfect and blah blah
OK i need a little help i put the layout on my friends profile to test it because she is never on it and doesn't use it so we use it as a test so we don't mess up our profiles
well, i put it on hers (safari browser) and when i checked it on Firefox it was totally different and looked like s**t so i was wondering what exactly is stopping it from being viewed in a different browser?
and maybe some help with the codes to why the background keeps going to center top when i specify it to go to bottom center

please help

my myspace http://www.myspace.com/youngsizzdoitbig
my yahoo iloveyou7107@yahoo.com
my MSN numba1_st33l3rfan@hotmail.com

if you wish to see the myspace profile we test on, so you could help me, her myspace is http://www.myspace.com/tiffyboo9688

thank you for all your help in advance

[schizo]

^The coding is a total mess. I would recommend maybe trying this tutorial or another one before trying to fix what you have. Generators are never a good idea, especially when it comes to divs.

[renee31313]

what does a div layout look like? and can you use it on myspace?

[manny-the-dino]

^Examples of DIVs can be found here and yes you can use it on Myspace.

[rudy559]

WhAT if YOU oNLy
WAnt liKE 2 Or 3 bOXeS
AND tHATS iT
AND yOU jUST WAnt
to ChAnGE THE COlOR??
BASiCALLy A pLAiN
Div lAYouT????

[jude108]

Okay, so I made this DIV layout earlier today, and I on the bottom table I want to have an image map (you'll see the words that I want to link), and I'm just really stumped on how to do this.
I tried, and I completely messed up my profile soo... any help?
Here's the link to my DIV image, for your references: http://i41.tinypic.com/qs1v21.jpg

[xxrawralexxrawrx...]

w0w im gonna soundz soo stupid
how do i get an image as a link when i make the profile like this
i know slices in photoshop and stuff but i was hoping there was another way or somethinguggh click to see how it looks on muhh profile
i was gonna put the lyt on the site but with the links in text it looks stupid
PLZZ HELP ME
IM SOO STUPID
(((btw yewr tutorial iz relly good it helped alot)))

[Mickey]

Use this code:

CODE

<a href="LINK"><img src="URL" alt="" /></a>

Replace LINK with the link you want the image to go to. Replace URL with the url of the image you want to use.

[xxrawralexxrawrx...]

+thxx