Placing a music player Options

[spyce]

A friend of mine came to me for help placing a music plaer on his page. He wanted it positioned like many of the bands/artists do on their pages.. where the extended network box normally is. (See, Taking Back Sunday's MySpace for an example). He would also like to keep his blog in tact, as he does use it.

Now, the situation has gotten a bit sticky since I was given code that hides the extended network box, but this is what happens:

http://www.vanilla-chai.nu/images/junk/player.jpg

Any ideas how to actually place the box, and not just overlay it?

[xTHExDUDEx]

For others that want the link it is: www.myspace.com/hotlatinmonkey

You need to place the player inside a div and use CSS to position it.

Something like this:

HTML (I'd Like To Meet):

<div class="band_player">
<embed>YOUR FLASH PLAYER CODE HERE</embed>
</div>

CSS (About Me):

<style type="text/css">

.band_player {
position: absolute;
top: 150px;
right: 142px;
width: 250px;
height: 250px;
}

</style>

These are very rough estimates of the sizes/positions you'll need.
You will have to play with the numbers to get it where you want it, google or look around here for tutorials.

[spyce]

I'm still not getting a result for that. I tested it on my MySpace, and still the player just floats:

http://www.vanilla-chai.nu/images/junk/mymyspacelg.jpg

The link for my MySpace is http://www.myspace.com/mandarinspyce.

[Vangie]

I'm having somewhat of the same problem. I'm trying to add a music playlist to my new div layout but i can't figure out how. I tried what you advised it it still didn't work.


this is my Div layout code( which i got from here, O amazing):

About me:
Layout made by <a href="http://www.createblog.com/layouts/index.php?author_id=505571" title="More layouts by this person">O amazing</a> at <a href="http://www.createblog.com/layouts/index.php?type_id=3" title="More Myspace layouts">CreateBlog.com</a>.<style>/* myspace codes provided by createblog.com */</style>
<style type="text/css">
td embed,td object{
position:absolute;top:380px;left:722px; width:210px;
display:block;
}
</style>


<style type="text/css">


.div3 {position:absolute; ;
width:265; height:200;overflow:auto;
left:390; top:229; text-transform:uppercase;
visibility:visible;font-weight:bold; position:absolute;letter-spacing:1pt;
text-align:justify; font-family:georgia;font-size:8px; color:000000; padding: 0px;z-index:3;}
td {color: 000000;font-family:georgia;font-weight:bold;letter-spacing:1pt;text-transform:uppercase;font-size:8px;}

.div1 {position:absolute; width:60; height:205;overflow:auto;
left:660; top:229; text-transform:uppercase;
visibility:visible;font-weight:bold; position:absolute;letter-spacing:1pt;
text-align:justify; font-family:georgia;font-size:8px; color:000000; padding: 0px;z-index:3;}
td {color: 000000;font-family:georgia;font-weight:bold;letter-spacing:1pt;text-transform:uppercase;font-size:8px;}


.div2 {position:absolute;
width:199px; height:145;overflow:auto;
left:725; top:285; text-transform:uppercase;
visibility:visible;font-weight:bold; position:absolute;letter-spacing:1pt;
text-align:justify; font-family:georgia;font-size:8px; color:000000; padding: 0px;z-index:3;}
td {color: 000000;font-family:georgia;font-weight:bold;letter-spacing:1pt;text-transform:uppercase;font-size:8px;}


.titles {font-family:georgia;new;font-size:10pt; line-height:10pt;color:white; border-bottom: 5px solid;border-color:FF99CC ;background-color:; letter-spacing:2pt;text-align:left; text-decoration:;text-transform:capitalize;}





.comments{visibility:visible;width:2px; height:1px;position:absolute;
top:200px;left:10px;
overflow:auto;background-color:white;font-family:georgia;
border:black 0px solid;z-index:2px;}


.back{background-image:url(); top:150px;height:590px;width:950px;left:0px;position:absolute;z-index:9}

.orangetext15, .navbar, .contacttable {display:none;visibility:hidden;}

div table {background-color:transparent;}
td.text table {visibility:hidden;}
td.text table table, td.text table table td.text {visibility:visible;}
td td td td td div {background-color:transparent;}
td td td td td div strong {visibility:hidden;}
table table table {visibility:hidden;}



body {
background-color: white ;
background-image:url(http://layouts.cbimg8.com/34/17189c.png);
}

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


input {background-color:transparent !important;}

td, span, div, input, textarea, a, table td div div font,
div table tr td font {font-family: verdana!important;}

td, span, div, input, textarea, table td div div font,div table tr td font {
color:white!important;
font-size:6pt !important;


}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:660000 !important; font-size:5pt !important;}



img {border:0px;}

.blacktext10 {display:block;}


a{font:normal 10px Verdana; color:FF3366 ; font-weight:none; border:0px; text-transform: none; }

a:active,a:visited,a:link{ font-family: verdana; font-size: 8pt; color:333333; text-transform:lowercase; text-decoration:none; font-weight:bold; background-color:none;}
a:hover{font-family: verdana; font-size: 8pt; color:FF99CC ; text-transform:lowercase; text-decoration:none; font-weight:bold; background-color:tranparent;}
a:link img, a:visited img {filter: none;border:0px}

s {color:black; }
u {color:333333 ;background-color: ; }
i {color:333333 ;}
b {color:black; background-color: ;}


body, textarea, div {


scrollbar-face-color: CCCCCC ;
scrollbar-highlight-color:CCCCCC ;
scrollbar-3dlight-color:CCCCCC ;
scrollbar-darkshadow-color: CCCCCC ;
scrollbar-shadow-color:CCCCCC ;
scrollbar-arrow-color: CCCCCC ;
scrollbar-track-color: FF99CC ;}



.comt td, .comt table{width:0px!important;
height:0px!important;
background-color:transparent!important;
border:0px!important; _padding:2px!important;}
.comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;}



.comt td b, .blacktext10 {display:block;}

.comt {z-index:7;}

.comt { width:500px;
height:225px;
overflow:auto;
background-color:transparent;
border:0px solid;
border-color:none;
position:absolute;
top:518px;
left:50%;
margin-left:-260px;}

.blacktext10 {width: 320px;}




td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;}

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;}



</style>
<style>.r{}</style>
<style>/* myspace codes provided by createblog.com */</style>


I'd like to meet:<style>/* myspace codes provided by createblog.com */</style>
<div class="back">
<img src="http://layouts.cbimg8.com/34/17189d.png" width="992" height="559" border="0" alt="" usemap="#Untitled_1_Map">
<map name="Untitled_1_Map">
<area shape="rect" alt="" coords="899,439,930,462" href="http://www.myspace.com/xamazing_lytsx">
<area shape="rect" alt="" coords="810,439,898,453" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX">
<area shape="rect" alt="" coords="721,439,810,453" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXXXXX">
<area shape="rect" alt="" coords="672,439,721,453" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX">
<area shape="rect" alt="" coords="604,439,672,453" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXXXXXXXXXX">
<area shape="rect" alt="" coords="547,439,592,453" href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXXX">
<area shape="rect" alt="" coords="462,441,534,453" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXXXXX">
<area shape="rect" alt="" coords="417,439,462,453" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">
<area shape="rect" alt="" coords="376,441,417,453" href="http://home.myspace.com/index.cfm?fuseaction=user">
</map>
<div class="div3">

<p class=titles>About me</p>

Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here! Write about yourself here!

<p class=titles>Interests</p>

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

</div>
<div class="div2">
<p class=titles>Comment</p><CENTER>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="XXXXXXXXX" type="hidden"><textarea name="f_comments" class="pnckdbox">Who are you?, </textarea><bR><input type="submit" value="¢¾" class="pnckdcom"></form><style type="text/css">
textarea.pnckdbox { color: 000000; font-family: small fonts; font-size: 8px; text-transform: uppercase; font-weight: normal; letter-spacing: 0px; text-align: left; line-height: 9px; height: 20px; width: 150px; border-color:000000; border-style: solid; border-width: 1px; background-color: transparent; } input.pnckdcom {color: 000000; font-family: small fonts; font-size: 13px; text-transform: uppercase; font-weight: normal; letter-spacing: 1px; text-align: center; line-height: 10px; background-color: 90CEFF; height:15px; width: 150px; border-color: 000000; border-width: 1px; border-style: solid; } </style></center><Br><Br><Br>


</div>
<div class="div1"><marquee direction="up">

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>

<a href="URL OF YOUR FRIEND'S PAGE"><img src="http://layouts.cbimg8.com/34/17189e.png" width=60 height=70 ></a>


</marquee></div>
<div class="comments"><br></center> <table><tr><td><table>
<style>/* myspace codes provided by createblog.com */</style>








THISIS MY MUSIC PLAYER CODE:


<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.myplaylist.org/mc/mp3player.swf?config=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=5947294" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><BR><a href=http://www.myplaylist.org><img src=http://www.myplaylist.org/mc/images/create_black.jpg border=0></a><a href=http://www.myplaylist.org/standalone/5947294 target=_blank><img src=http://www.myplaylist.org/mc/images/launch_black.jpg border=0></a><a href=http://www.myplaylist.org/download/5947294><img src=http://www.myplaylist.org/mc/images/get_black.jpg border=0></a> </div>




I'm sorry for posting all of this. I'm absolutely a beginner at this so bear with me!!! I know everyone says you must have some Html experience to even attempt to do this. i don't but it doesn't mean I don't wanna learn!!!!:) I have actually learned a couple of things by just applying everyones advice and knowledge. THanks!!! I love this site!!!