Log In · Register

 
Video on DIV Layout, music player moves when video code is added
cheetarah
post Aug 10 2008, 09:24 PM
Post #1


Newbie
*

Group: Member
Posts: 7
Joined: Aug 2008
Member No: 674,114



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 :)
 

Posts in this topic


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