Log In · Register

 
 
Closed TopicStart new topic
Need Help with putting mp3 player in DIV
DXL
post Aug 6 2007, 01:24 AM
Post #1


Newbie
*

Group: Member
Posts: 9
Joined: Aug 2007
Member No: 556,965



I am trying to put my mp3 player in my div but it just isn't working I will give the codes for my player and div hopefully someone can help! thanks

Here is the code for the player:

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:200px; visibility:visible; height:30px;" border="0" data="http://www.musicplaylist.net/mc/mp3player.swf?config=http://www.musicplaylist.net/mc/config/config_black_shuffle.xml&mywidth=435&myheight=270&file=http://www.musicplaylist.net/loadplaylist.php?playlist=11827327">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.musicplaylist.net/mc/mp3player.swf?config=http://www.musicplaylist.net/mc/config/config_black_shuffle.xml&mywidth=435&myheight=270&file=http://www.musicplaylist.net/loadplaylist.php?playlist=11827327" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object></div>





And here is the div code:

<style type="text/css">

body {
background-color: 484848;
background-image: url('http://cbimg9.com/layouts/07/07/15/19520ac.jpg');
background-position:top left;
background-attachment: repeat;
scrollbar-arrow-color: FFFFFF;
scrollbar-face-color: FFFFFF;
scrollbar-3dlight-color: FFFFFF;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-track-color: FFFFFF;
}


b {
color: ff4040;
font-weight: bold;
letter-spacing: 2px;
}

I {
color: 15e537;
letter-spacing: 2px;
}

u {
color: b401ff;
letter-spacing: 2px;
}

s {
color: 0000ff;
letter-spacing: 2px;
}

.commentlinks {display:none;}
body div table td form img{display:none!important;}
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 table td {font-size:0pt;}
td.text td.text {height:0;}
td.text td.text table b, td.text td.text table table td {text-transform: uppercase; letter-spacing:2px; line-height: 9px; font-family: small fonts; font-size: 7px; color: 8a8a8a;}
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,
.redtext,.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: 500px;
height: 159px;
position:absolute;
top: 649px;
left: 135px;
overflow: auto;
background-color:transparent;
border:black 0px solid;
z-index: 2px;}
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}



.aboutme1{
position: absolute;
width: 299px;
padding: 1px;
z-index: 3px;
height: 336px;
text-transform:uppercase;
letter-spacing:2px;
line-height: 9px;
overflow: auto;
font-family: small fonts;
font-size: 7px;
color: 8a8a8a;
top: 107px;
left: 135px;
}


.navigation{
position: absolute;
width: 194px;
z-index: 4px;
height: 197px;
text-transform:uppercase;
letter-spacing:2px;
line-height: 9px;
overflow: auto;
font-family: small fonts;
font-size: 7px;
color: 8a8a8a;
top: 107px;
left: 441px;
}




.basics{
position: absolute;
width: 194px;
padding: 1px;
z-index: 5px;
height: 174px;
text-transform: uppercase;
letter-spacing:2px;
line-height: 9px;
overflow: auto;
font-family: small fonts;
font-size: 7px;
color: 8a8a8a;
top: 311px;
left: 441px;
}





.etc{
position: absolute;
width: 299px;
padding: 1px;
z-index: 6px;
height: 192px;
text-transform:uppercase;
letter-spacing:2px;
line-height: 9px;
overflow: auto;
font-family: small fonts;
font-size: 7px;
color: 8a8a8a;
top: 450px;
left: 135px;
}


.comment
{position:absolute;
width: 194px;
padding: 1px;
z-index: 7px;
padding: 2px;
height: 150px;
overflow: hidden;
left: 441px;
top: 492px;
}


.name
{position:absolute;
width: 502px;
z-index: 8px;
height: 70px;
color: FFFFFF;
background-color: none;
text-transform: uppercase;
letter-spacing: -8px;
font-family: "arial black";
font-size: 60px;
line-height: 60pt;
overflow: hidden;
left: 134px;
top: 26px;
text-align: center;
}




.titles {display: block;
visibility: visible;
color: 000000;
background-color: none;
text-transform: uppercase;
letter-spacing: -3px;
font-family: "arial black";
font-size: 25px;
line-height: 25pt;
text-align: center;
}


a:link, a:visited, a:active {
text-decoration : none;
color : 000000;
font-size : 7px;
line-height: 9px;
font-family: small fonts; }
}
a:hover {
text-decoration : none;
font-size : 7px;
line-height: 9px;
font-family: small fonts;
color: ff4040;}



a.box:link, a.box:visited, a.box:active {
text-decoration : none;
font-weight:normal;
color: 000000;
font-size: 7px;
text-align:center;
LINE-HEIGHT: 20px;
TEXT-TRANSFORM: uppercase;
font-family : small fonts;
background-color: FFFFFF;
display:block;}
}

a.box:hover {
text-decoration : none;
font-size: 7px;
font-weight:normal;
text-align:center;
LINE-HEIGHT: 20px;
TEXT-TRANSFORM: uppercase;
font-family : small fonts;
background-color: 000000;
background:url(http://cbimg9.com/layouts/07/07/15/19520ad.gif)
top left repeat-x;
color: FFFFFF;
TEXT-TRANSFORM: uppercase;
display:block
</style>




<body>
<div class="image" style="position: absolute; left:0px; top:0px; width:882px; height:851px; z-index:-1px; overflow: hidden;">

<img name="simplicity" src="http://cbimg9.com/layouts/07/07/15/19520ab.gif" width="882" height="851" position="absolute" top="0" left="0" border="0" usemap="#simplicity">

<map name="simplicity">

<area shape="rect" coords="361,811,410,816" href="http://haileypo.createblog.com/">

</map>
 
DXL
post Aug 6 2007, 01:34 AM
Post #2


Newbie
*

Group: Member
Posts: 9
Joined: Aug 2007
Member No: 556,965



i'm sorry i figured it out
 
YourSuperior
post Aug 6 2007, 01:38 AM
Post #3


;)
*******

Group: Staff Alumni
Posts: 9,573
Joined: Feb 2005
Member No: 99,124



You just had some stuff confused.

CODE

<style type="text/css">
.mp3player {
position: absolute;
margin-left: ###px;
margin-top: ###px;
width: ###px;
height: ###px;
}
</style>

<div class="mp3player">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:200px; visibility:visible; height:30px;" border="0" data="http://www.musicplaylist.net/mc/mp3player.swf?config=http://www.musicplaylist.net/mc/config/config_black_shuffle.xml&mywidth=435&myheight=270&file=http://www.musicplaylist.net/loadplaylist.php?playlist=11827327">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.musicplaylist.net/mc/mp3player.swf?config=http://www.musicplaylist.net/mc/config/config_black_shuffle.xml&mywidth=435&myheight=270&file=http://www.musicplaylist.net/loadplaylist.php?playlist=11827327" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>


Just edit the ###'s with actual numbers. Margin-left moves the div left or right, Margin-top moves the div up or down.

quick lesson on "position: absolute"

top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page
left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page
margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px
margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px

 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: