Help - Search - Members - Calendar
Full Version: Making a DIV Overlay Layout
Forums > Resource Center > Support Center > MySpace Support
Pages: 1, 2, 3
CHIINASTEE
May 25 2008, 04:31 PM
how do i get the bottom links on
BrandonJohn
May 26 2008, 03:58 AM
How do i put scrolly boxes ontop of my div image?
I have the div image (image map) in my 'I'd like to meet' section and i have the scrolly code in my about me
CODE
<div class="content" style="position: absolute; left:000px; top:000px; width:384px; height:265px; overflow: auto;"><center>
<style type="text/css">
div.myspace-scroll-box {
height:265px;
width:384px;
font:12pt Arial;
overflow:scroll;
}
</style>
<div class="myspace-scroll-box"><center>Then i have the text here</div>

And its not showing up over the div, but sometimes it shows up underneath the div image.
If anyone can help send a message to my myspace the friend id is
272109343
jasonblue
Jun 5 2008, 09:28 AM
Please no advertising - Thomas
CastleBlackFire
Jun 5 2008, 09:12 PM
Is there a way to have your music player thingy show in a DIV layout? _unsure.gif
CastleBlackFire
Jun 6 2008, 09:50 PM
i most definately do not know how to do that...

sad.gif
Jayneshia
Jun 7 2008, 07:55 PM
Well okii i folled ALLLL steps including skippin # 2 tongue.gif lol
okii well how do you write in these boxes heres my profile
http://profile.myspace.com/index.cfm?fusea...e4-b4e63fae8c03
how do you add stuff in those boxes??
HELPPPPP _unsure.gif
EmoSakura90
Jun 11 2008, 12:59 PM
stubborn.gif
kay, i go the image map where i want it and it looks awesome, but whenever i try to code my it, the text won't show up.

did i skip something?

help please cry.gif
nadi95
Jun 12 2008, 06:03 PM
ok i basically got most of the things down the problem is that i can't get the content into the right place like i have a section like for about me but i cna't get w.e. i want into that section and like the clickable link lights up and i dn't want that to hppen heres my myspace link : http://profile.myspace.com/index.cfm?fusea...endid=381944410
if theres anyway u can help me and make it better plzz do
keishagirl14
Jun 16 2008, 08:51 PM
dats it im not eva tryin ta make a div layout again dis sucks man mad.gif
flowsosikk
Jul 9 2008, 08:20 PM
what about for bands? =[
Emoyoface
Jul 10 2008, 06:24 PM
Okay this is sorta like a myspace/website problem. Like for some myspace layouts,there boring. I see sites that have website layouts and there AMAZING. I try to put it into myspace but it turned up all screwy. If someone could re-do the codes that would be great.
CODE
<style text="text/css">
body,tr,td {font-size: 7pt; font-family:century gothic; color:#000000;
background:none; transparent;
scrollbar-base-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #c00000;
scrollbar-3dlight-color: #c00000;
scrollbar-darkshadow-color: #c00000;
scrollbar-shadow-color: #c00000;
scrollbar-arrow-color: #c00000;}
B {font-size: 7pt; font-weight: bold; COLOR: #ff4040; font-family:
century gothic}
I {font-size: 7pt; font-weight: italic; COLOR: #ff4040; font-family:
century gothic}
U {FONT-WEIGHT: bold; font-family: century gothic; COLOR: #ff4040;
TEXT-DECORATION: underline; font-size: 7pt; BORDER-BOTTOM: #ff4040
double 1px;}
HR {COLOR: #ffffff; height: 3px; width: 150px;
}


}
a:{color: #fb3337; text-decoration: none; font-family: century gothic;
font-size: 7pt}
a:link{color: #fb3337; text-decoration: none; font-family: century gothic;
font-size: 7pt}
a:visited{color: #fb3337; text-decoration: none; font-family:
century gothic; font-size: 7pt}
a:active{color: #fb3337; text-decoration: none; font-family: century gothic; font-size: 7pt}
a:hover{color: #000000; font-family: century gothic; font-size: 7pt; background color: #fb3337;}




BODY { background: #ffffff url() repeat-y}

.head {font-family: courier new; font-size: 11pt; color: #c00000; background-color:transparent; text-align: left; font-weight: normal; border-bottom: 3px double #c00000; }



</STYLE>



<body rightmargin="0" rightmargin="0" leftmargin="0">
<table cellpadding="0" cellspacing="0" border="0" background="http://img213.imageshack.us/img213/9700/geefrank2dk3.jpg" height="2000" width="581" align=left style="position:absolute; left:0; top:0;">
<tr>
<TD valign="top" height="394" width=581><IMG SRC="http://img222.imageshack.us/img222/9393/geefranker9.jpg"></TD>
</tr>
</table>


<table cellpadding="0" cellspacing="0" border="0" height="1000" width="465" style="position:absolute; left:50; top:570;" align=left>
<tr>
<TD valign=top align=left>


<div class="head">The News I Heard.</div>

<b>Bold</b><br>
<i>Italic</i><br>
<u>Underline</u><br>
<a href="http://www.quizilla.com/users/crueldade" target="_blank">Linkage</a><br><br>
<p>
Updates go here. =]

<BR><BR>

<div class="head">The Last Line.</div>

<u>Title:</u> <a href="LINK TO FIRST PART" target="_blank">Title</a><br>
<u>Featuring:</u> A boy<br>
<u>Status:</u> Active? Hiatus? Complete?<br>
<u>Title Credit:</u> I'd say this is pretty obvious as to what you put here.<br>

<BR><BR>

</TD>

</tr>
</table>


<table cellpadding="0" cellspacing="0" border="0" height="250" width="220" style="position:absolute; left:585; top:460;" align=left>
<tr>
<TD valign=top align=left>

<div class="head">Just a Ghost.</div>

Put some random stuff about you.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">You'll Kill My Enemies.</div>
List your friends here. If you have any, that is.
<br>
I'm kidding. But seriously.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">Here Comes the Sound.</div>

Music time! Upload your favorite song and go grab a music player from <a href="http://www.createblog.com">CreateBlog.com</a> and play some tunagggge.
<br>
Just make sure the music player is no wider than 215px or it will mess this up.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">Something to Say.</div>

Go snag a <a href="http://www.cbox.ws" target="_blank">cBox</a> and put it here. Just make sure the cBox is no wider than 215px, or it will mess this up.<BR>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">A Coffin Your Size.</div>
<center>
Layout by <a href="http://www.quizilla.com/users/crueldade" target="_blank">Alli</a><br>
at<br>
<a href="http://www.freewebs.com/beautifulchaoslayouts" target="_blank">Beautiful Chaos Layouts</a>.
<br>
</center>
</TD>

</tr>
</table>

ANAMONEY
Jul 14 2008, 03:03 PM
I HAVE THE LAYOUT I WANT BUT IT SAYS REPLACE XXXXXX WITH UR ID CODE BUT I CANT FIND WHERE XXX IS
karmakiller
Jul 14 2008, 03:12 PM
To find your friendID, use this:
http://www.createblog.com/layouts/friendid.php

Or click view your profile and look in the toolbar.The X's will be numbers. That's your Friend ID.
CODE
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=xxxxx
naruto123
Jul 14 2008, 09:23 PM
i don't get it what i suppose to put for i'd like to meet stubborn.gif
karmakiller
Jul 16 2008, 08:00 PM
If you're using a DIV, you don't need to put anything in the I'd Like to Meet. It's just fine going into the About Me.

If you're using a layout from here, and it has codes for you to put in the I'd like to Meet, then do so and follow the designers' instructions.
nikx618
Jul 18 2008, 10:33 PM
whenever i
"top: 50% = moves to middle of page"
it moves the left side of the image
to the center, and i keep trying to
position it to make it centered, but
its not "perfectly" in the center.
&if its not perfectly in the center.
my layout get rejected.
is there an easier way to center.
correctly, and exactly?
YukinoIsuzuX
Jul 21 2008, 04:28 PM
I'm having issues with image mapping.
I've been using the same code to make layouts,
but now the image maps don't work.
Could someone please tell me what I'm doing wrong?

CODE
<div style="position : absolute; left: 0%; margin-left: 100px; top:100px; width:800px; overflow: hidden; z-index:1"><img src="http://i33.tinypic.com/2mwhvdu.jpg" usemap="#NotNamed" border="0" />
<map name="NotNamed">

<div class="navigation">

<img src="http://i33.tinypic.com/2mwhvdu.jpg" width="445" height="452" border="0" alt="" usemap="#navibar_Map" />
<map name="navibar_Map">


<area shape="rect" alt="HOME" coords="483,428 522,443" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />
</map>
</div>
<style>
.content {font:normal 11px times Georgia;line-height: 12px;color: white;padding-top:10px;padding-bottom:5px;padding-right:0px;padding-left:7px;background-color:000000;text-align:center;width:360px; height:100px;overflow:auto;position : absolute; z-index:2; left: 0%; top: 0%;margin-left: 110px;margin-top: 430px;}
body,table, td, li, p, div, textarea , .text
{font:normal 11px Georgia; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px; letter-spacing:0px;}
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, a.navbar:link, a.navbar:visited, a.navbar:active {font-family:Georgia; font-size: 11px; color:484848; border:white;font-weight: normal; text-decoration: underline; border-bottom:1px dotted; letter-spacing: 0px; text-transform: lowercase; line-height: 10px; background-color: transparent;}

a:hover, a.man:hover, a.text:hover, a.redlink:hover, a.navbar:hover {cursor:default!important;font-size:11px; color:white; text-decoration: none; border-bottom: 1px dashed ; font-family:Georgia;}
b, strong, bold{font-weight:bold; letter-spacing:2px;}i, italic{font-style:italic; letter-spacing:0;}u, underline{font-decoration:underline; letter-spacing:0;}big{font-size:15px;line-height:16px;letter-spacing:1px;}s, strikethrough{text-decoration:line-through;letter-spacing:2px;}
body{scrollbar-track-color:rgb(0,0,0);scrollbar-face-color:rgb(0,0,0);scrollbar-3dlight-color:rgb(0,0,0);scrollbar-highlight-color:rgb(0,0,0);scrollbar-darkshadow-color:rgb(0,0,0);scrollbar-shadow-color:rgb(0,0,0);scrollbar-arrow-color:rgb(72,72,72);}</style>

<style>
.mslogo, .clearfix form, .clearfix a, .clearfix select, .profileinfo, .contacttable, .userprofileurl, .interestsanddetails, .userprofiledetail, .userprofilenetworking, .userprofileschool, .userprofilecompany, .extendednetwork, .latestblogentry, .blurbs td.text, .orangetext15, .friendspace, .friendscomments, table div {display:none!important;}
table table div, .clearfix, .clearfix div {display:block!important;}
table, tr, td, .clearfix {background:none!important;}
.clearfix tr td div {filter:alpha(opacity:0)!important;}
.bodycontent div {_filter:alpha(opacity:100)!important;}
div[id="topnav"], div[id="shortcuts"] {opacity:0!important;}
</style>







<div class="content">
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo

<style>
body{background-color:white;cursor:default!important;}
.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;}
table.footer {display: none;}

body table td div form {display:none !important;}

div table a.navbar img {display:none;}
div table {visibility:hidden;}
div table div, div table table, div table.navigationBar, table div table, div table form {visibility:invisible}
div table {border-bottom:0px !important; }
div table.navigationBar {margin-bottom:-30px;}


div table div div select {position:absolute !important; top:-200px !important; left:0px !important; }
</style>
<p><br /><br /><br /><br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2Nvb2tpZV9jdXR0ZXJ4cGVyZmVjdA==" title="madeline">
design:x;</a>
nany218
Jul 21 2008, 05:47 PM
CODE
jordan div layout

nany218
Jul 21 2008, 06:00 PM
CODE
<style>body {background-color:fff94f;} ul li a.open:hover, ul li a.open small, ul li a:hover {background-color:fff94f!important;}div td {background-color:d54fff;}.extendedNetwork td, .extendedNetwork {border:0px;}
td.text table, td.text td.text {background-color:transparent;}
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;}
td.text td.text td a {visibility:hidden;}
table, tr, td{border:0px!important;}
table table table table td{width:0px;padding:0px;}
table table table table td{width:0px!important; padding:0px!important;}span.lightbluetext8{display:none;}
table,tr,td{height:1px;}
a.text, table div font a, table div div {visibility:hidden;}
td{text-align:center}
a.text, table div font a, table div div {visibility:hidden;}
div td font {visibility:hidden;}
br{line-height:0.5px;}.blacktext10{font-family: tahoma; font-size: 9px; font-weight: bold; text-decoration: none; line-height:9px; color:D5ED58}

.interestsAndDetails td {background-color:ffffff;}
.interestsAndDetails, .interestsAndDetails td {border:0px;}
.interestsAndDetails td {border:0px;}
.friendsComments td.text td a {display:none;}
.friendsComments td.text td b {display:none;}
.redtext, .friendscomments, .orangetext15 {display:none;}
.userprofileurl, .userprofiledetail {display:none;}
.extendedNetwork, .latestBlogEntry, .friendSpace {display:none;}
.imgonlinenow{display:none;}
.contacttable, .nametext, .lightbluetext8 {display:none;}
a.text, table div font a, table div div {visibility:hidden;}td{text-align:center} a.text, table div font a, table div div {visibility:hidden;}div td font {visibility:hidden;}.navbar {visibility:visible;}table div font a, table div div {visibility:hidden; display:none;border:0px!important;background-color:transparent;}
textarea{font-family:small fonts; font-size:7px; color: 000000; font-weight: normal; text-decoration: none; letter-spacing: text-align: center; 0px; text-transform: uppercase; line-height: 7px; border: 1px black solid; height: 40px; width: 300px; background -color: FFFFFF;}
</style>
big{font: 28pt normal georgia; letter-spacing: -3px!important;line-height:20pt; color: 66FFFF}
table table table table td{width: 0px!important;
padding: 0px!important;}

nany218
Jul 21 2008, 06:04 PM
CODE
<style>body {background-color:fff94f;} ul li a.open:hover, ul li a.open small, ul li a:hover {background-color:fff94f!important;}div td {background-color:d54fff;}.extendedNetwork td, .extendedNetwork {border:0px;}
td.text table, td.text td.text {background-color:transparent;}
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;}
td.text td.text td a {visibility:hidden;}
table, tr, td{border:0px!important;}
table table table table td{width:0px;padding:0px;}
table table table table td{width:0px!important; padding:0px!important;}span.lightbluetext8{display:none;}
table,tr,td{height:1px;}
a.text, table div font a, table div div {visibility:hidden;}
td{text-align:center}
a.text, table div font a, table div div {visibility:hidden;}
div td font {visibility:hidden;}
br{line-height:0.5px;}.blacktext10{font-family: tahoma; font-size: 9px; font-weight: bold; text-decoration: none; line-height:9px; color:D5ED58}

.interestsAndDetails td {background-color:ffffff;}
.interestsAndDetails, .interestsAndDetails td {border:0px;}
.interestsAndDetails td {border:0px;}
.friendsComments td.text td a {display:none;}
.friendsComments td.text td b {display:none;}
.redtext, .friendscomments, .orangetext15 {display:none;}
.userprofileurl, .userprofiledetail {display:none;}
.extendedNetwork, .latestBlogEntry, .friendSpace {display:none;}
.imgonlinenow{display:none;}
.contacttable, .nametext, .lightbluetext8 {display:none;}
a.text, table div font a, table div div {visibility:hidden;}td{text-align:center} a.text, table div font a, table div div {visibility:hidden;}div td font {visibility:hidden;}.navbar {visibility:visible;}table div font a, table div div {visibility:hidden; display:none;border:0px!important;background-color:transparent;}
textarea{font-family:small fonts; font-size:7px; color: 000000; font-weight: normal; text-decoration: none; letter-spacing: text-align: center; 0px; text-transform: uppercase; line-height: 7px; border: 1px black solid; height: 40px; width: 300px; background -color: FFFFFF;}
</style>
big{font: 28pt normal georgia; letter-spacing: -3px!important;line-height:20pt; color: 66FFFF}
table table table table td{width: 0px!important;
padding: 0px!important;}

manny-the-dino
Jul 21 2008, 06:11 PM
nany218, if you'd like to request layouts to be made for you, please post here once you have 50+ posts.
thanks. _smile.gif
silent-rebirth
Jul 31 2008, 03:25 AM
I can't get past step 2 with out messing up bad. I don't get it.
when you take the first code and put it on.
CODE
<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
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;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:397px; height:180px;position:absolute;
top:680px;left:415px;
overflow:auto;background-color:transparent;
border:black 0px solid;z-index:2px;}
</style>

then the next one.
CODE
<style type=text/css>

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

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

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

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

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

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}

{”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:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

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

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:######; 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:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

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

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

</style>



would you put the codes together like this

CODE
<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
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;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:397px; height:180px;position:absolute;
top:680px;left:415px;
overflow:auto;background-color:transparent;
border:black 0px solid;z-index:2px;}
(the next code)

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

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

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

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

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

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}

{”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:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

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

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:######; 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:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

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

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


</style>



Mickey
Jul 31 2008, 03:30 AM
^Yes, that would be correct.
silent-rebirth
Aug 1 2008, 10:20 PM
QUOTE(Anarchy @ Jul 31 2008, 12:30 AM) *
^Yes, that would be correct.



thank you. I'm new to this so its confusing.
ollielv90
Aug 4 2008, 06:47 AM
Hey this was an amazing tutorial! However, I am trying to figure out how to get my photoshopped content on there. I've sliced my images up and everything! HELP?!
leib92
Aug 7 2008, 10:21 PM
i need help putting pictures on a div layout can neone help??
MzYennie
Aug 8 2008, 04:54 PM
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
Aug 8 2008, 05:00 PM
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
Aug 9 2008, 05:09 PM
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.


DespisedandBeloved
Aug 10 2008, 11:09 AM
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
Aug 10 2008, 11:20 AM
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.
DespisedandBeloved
Aug 10 2008, 11:30 AM
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
Aug 10 2008, 11:48 AM
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.
DespisedandBeloved
Aug 10 2008, 12:24 PM
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
Aug 14 2008, 04:23 AM
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
Aug 17 2008, 05:10 AM
biggrin.gif 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
Aug 18 2008, 12:21 PM
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
Aug 19 2008, 04:49 PM
QUOTE
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.

QUOTE
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.

QUOTE
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
Aug 30 2008, 10:01 AM
I understand everything, but how to I link my pic words that I already made on my overlay?
schizo
Aug 30 2008, 10:11 AM
^ You need to use an image map. I have a tutorial on how to do that here.
taz20
Aug 31 2008, 10:36 PM
_smile.gif Thank You!!!
XXXnunu
Sep 3 2008, 01:22 PM
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
schizo
Sep 3 2008, 06:38 PM
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
Sep 30 2008, 08:04 PM
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
Oct 1 2008, 01:22 AM
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
Oct 23 2008, 05:29 PM
QUOTE(schizo @ Aug 30 2008, 04:11 PM) *
^ 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
Oct 24 2008, 08:26 AM
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
Nov 1 2008, 08:26 PM
Weird. This didn't work so I just resorted to slicing them.

Thanks
GabyArtz
Nov 15 2008, 07:35 AM
kool
bhulan
Nov 21 2008, 11:41 AM
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!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.