Video on DIV Layout, music player moves when video code is added Options

[cheetarah]

To start off my div layout code is:

CODE

<style type="text/css">body{
background-color: 000;
background-image:url();
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
scrollbar-arrow-color:bddee7;
scrollbar-track-color:000;
scrollbar-shadow-color:e5e5e5;
scrollbar-face-color:e5e5e5;
scrollbar-highlight-color:e5e5e5;
scrollbar-darkshadow-color:e5e5e5;
scrollbar-3dlight-color:e5e5e5;}

.div{
position: absolute;
left: 50%;
margin-left:-357px;
top: 130px;
z-index: 0;}

.section1{
position: absolute;
left: 50%;
margin-left:-135px;
top: 480px;
z-index:5;
width: 260px;
height: 232px;
overflow: auto;}

.navigation{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:-227px;
top:460px;
overflow: auto;}

.block{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873aa.png) top left no-repeat;
display: block;}

.block:hover{
background-position: bottom left;}

.add{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ab.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.message{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ac.png) top left no-repeat;
display: block;}

.message:hover{
background-position: bottom left;}

.comment{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ad.png) top left no-repeat;
display: block;}

.comment:hover{
background-position: bottom left;}

.navigation2{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:153px;
top:460px;
overflow: auto;}

.blog
{height:50px;
width:68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ae.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}

.friends{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873af.png) top left no-repeat;
display: block;}

.friends:hover{
background-position: bottom left;}

.home{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ag.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}

.pics{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ah.png) top left no-repeat;
display: block;}

.pics:hover{
background-position: bottom left;}



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

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

a:active,a:visited,a:link,a{
color:73dfdf;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;
}
a:hover{
color:a1277e;
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:georgia;
font-size:9px;
color:183d11;
font-weight:none;
border:0px;
text-transform: none; }
table table div form {display:inline !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;}
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 div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}div div div select {position:absolute !important; margin-left:-1000px !important; left:0px !important; display:none !important; }div div table div {display:none;} div form, .mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i,
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}</style>


<div class="div">
<img src="http://cbimg6.com/layouts/07/08/22/20873ai.png" usemap="#cassette" border="0"><map name="cassette">


<area shape="rect" alt="" coords="301,189 397,202" href="http://www.atomicaffliction.com">


</map> </div>



<div class="section1"><center><p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</center></div>


<div class="navigation">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXX&MyToken=60073af5-e929-4c7a-b357-3f1b6da0bbfb" class="message">
<a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXX" class="block">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX" class="add">
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXX" class="comment">
</div>

<div class="navigation2">
<a href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=1bfdd5cd-9c1d-46fa-83c4-7f30e0fe3ffa" class="home"></a>
<a href="http://home.myspace.com/Modules/ViewFriends/FriendsView.aspx?friendID=XXXXXX" class="friends">
<a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXX" class="blog">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXX" class="pics">

</div>

I want to add a video on the bottom of the layout. I checked out the closed topic on how to add video on the div layout.

I added the video code.

CODE

<div style="position:absolute; top:500px; left:50%; margin-left:-500px;">PUT VIDEO CODES HERE</div>

And I deleted this from my layout code:

CODE

td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}

The video is displayed ok, but now the music player moves from its place and is hidden behind the background of the layout.

How can I fix this, so that the player pause/play button is shown on the top right corner like it did before I added the video?

Reason for edit: Use [codebox] for longer codes. -Gabi :)

[Mickey]

Yes, hiding those is against the rules. I say show the ad then just recreate the bottom links/copyright section and place them in a DIV at the bottom of your page. To show the ad at the top, replace your codes with this:

CODE

<style>
body{
background-color: 000;
background-image:url();
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
scrollbar-arrow-color:bddee7;
scrollbar-track-color:000;
scrollbar-shadow-color:e5e5e5;
scrollbar-face-color:e5e5e5;
scrollbar-highlight-color:e5e5e5;
scrollbar-darkshadow-color:e5e5e5;
scrollbar-3dlight-color:e5e5e5;}

.div{
position: absolute;
left: 50%;
margin-left:-357px;
top: 130px;
z-index: 0;}

.section1{
position: absolute;
left: 50%;
margin-left:-135px;
top: 480px;
z-index:5;
width: 260px;
height: 232px;
overflow: auto;}

.section2{
position: absolute;
left: 50%;
margin-left:-145px;
top: 750px;
z-index:5;
width: 285px;
height: 232px;
overflow: auto;}


.navigation{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:-227px;
top:460px;
overflow: auto;}

.block{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://img93.imageshack.us/img93/9084/vidsbt9.gif) top left no-repeat;
display: block;}

.block:hover{
background-position: bottom left;}

.add{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ab.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.message{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ac.png) top left no-repeat;
display: block;}

.message:hover{
background-position: bottom left;}

.comment{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ad.png) top left no-repeat;
display: block;}

.comment:hover{
background-position: bottom left;}

.navigation2{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:153px;
top:460px;
overflow: auto;}

.blog
{height:50px;
width:68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ae.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}

.friends{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873af.png) top left no-repeat;
display: block;}

.friends:hover{
background-position: bottom left;}

.home{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ag.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}

.pics{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ah.png) top left no-repeat;
display: block;}

.pics:hover{
background-position: bottom left;}



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

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

a:active,a:visited,a:link,a{
color:73dfdf;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;
}
a:hover{
color:a1277e;
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:georgia;
font-size:9px;
color:183d11;
font-weight:none;
border:0px;
text-transform: none; }

table table div form {display:inline !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}
div div div select {position:absolute !important; margin-left:-1000px !important; left:0px !important; display:none !important;}
div.profilewidth div {filter:alpha(opacity=0)!important;opacity:0;}
.profilewidth .clearfix, .profilewidth div div {filter:none!important;opacity:1;}
tr td .clearfix div {filter:alpha(opacity=0)!important;}
body table td div form, a.text {visibility:hidden; display:none; height:0px;}
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 table table table,table table table table td.text, td.text td.text table{display:none;}
object{position:absolute;top:0px;right:0px;width:45px;}
td td td object {position:static; margin:auto; width:300px;}

a.navbar, a.navbar:active, a.navbar:visited, a.navbar:link { color:808080; }
a.navbar:hover { color:FFFFFF; }
</style>



<div style="position:absolute; top:99px; left:50%; margin-left:340px; width:46px; height:24px; background-color:000000;"><img src="http://x.myspacecdn.com/modules/common/static/img/header/en-us/poweredbyGoogle.png" /></div>


<div class="div">
<img src="http://cbimg6.com/layouts/07/08/22/20873ai.png" usemap="#cassette" border="0" /><map name="cassette">
<area shape="rect" alt="" coords="301,189 397,202" href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmF0b21pY2FmZmxpY3Rpb24uY29t" /></map>
</div>


<div class="section1"><center><p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</center></div>



<div class="navigation">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD1YWFhYWFgmTXlUb2tlbj02MDA3M2FmNS1lOTI5LTRjN2EtYjM1Ny0zZjFiNmRhM
JiZmI=" class="message">
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPVhYWFhYWA==" class="block">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPVhYWFhYWA==" class="add">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD1YWFhYWFg=" class="comment">
</div>

<div class="navigation2">
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyJk15VG9rZW49MWJmZGQ1Y2QtOWMxZC00NmZhLTgzYzQtN2YzMGUwZmUzZmZh" class="home"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9Nb2R1bGVzL1ZpZXdGcmllbmRzL0ZyaWVuZHNWaWV3LmFz
Hg/ZnJpZW5kSUQ9WFhYWFhY" class="friends">
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9WFhYWFhY" class="blog">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD1YWFhYWFg=" class="pics">
</div>

<div style="position:absolute; top:500px; left:50%; margin-left:-500px;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="344" width="425" data="http://www.youtube.com/v/400Had3wMI8&hl=es&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/400Had3wMI8&hl=es&fs=1" />
</object></div>

<div class="section2">
<img src="http://www1.istockphoto.com/file_thumbview_approve/5546413/2/istockphoto_5546413-concert-crowd.jpg" /></div>

You should know how to add another DIV at the bottom of your page for the bottom links and copyright since you've already worked with a few for your layout.