Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Video & Rollover links

    Hello,
    I have a video on a page with a few rollover links under the video. The popups appear underneath the video. What I would like is for the popups to appear over or ontop of the video.
    How can I do that? Is that accomplished with layers or is there another way to get the popup to appear ontop of the video?
    Any help would be much appreciated.
    Thanks

    Below is an example of what the video & links look like
    http://www.maxxis.com/Bicycle/Mountain/Ikon.aspx
    Here is the code that I am using:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    #video {
    position:absolute; width:331px; height:330px; z-index:2; left: 241px; top: 129px; background-color: #FFF600;
    	}	
    #tech_stamps {
    position:absolute; width:530px; height:55px; z-index:1; left: 241px; top: 475px; background-color: #00CCFF; 
    	}	
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <span style=""></span>
    <font color="#00FFFF"></font>
    <DIV align=center id="video"><IFRAME height=331 src="http://www.youtube.com/embed/Wu1WHVA-p9k?rel=0" frameBorder=0 width=530 allowfullscreen="">
    				</IFRAME></DIV>
    				<LINK rel=stylesheet type=text/css href="http://www.maxxis.com/Files/style.css">
    <div align="center" id="tech_stamps"><SPAN id=rollover1><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exo_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXO_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover2><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/3C_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/3C-MTN_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover3><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exc_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXC_tech_info.jpg"> </SPAN></A></SPAN></div>
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    z-index?

    you can set a z-index for the video

    Code:
    video.div {
     z-index: 10;
    }
    popup.div {
     z-index: 100;
    }
    whichever z-index is larger will appear "ontop". If one is position: relative; you have to match the other with position relative as well.

    Code:
    video.div {
     z-index: 10;
     position: relative;
    }
    popup.div {
     z-index: 100;
     position: relative; /* Gotta Match Them */
    }
    Last edited by Sammy12; 07-08-2011 at 06:48 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!
    I have tried doing that and nothing happens. The popups still appear under the video. I tried switching the z-index, there is no difference in the way it looks. Is there any way to get the pop ups on top of the video?

    Here's the CSS i'm using:

    Code:
    #video {
    position:relative; width:331px; height:330px; z-index:10; left: 241px; top: 129px; background-color: #FFF600;
    	}
    	
    #tech_stamps {
    position:relative; width:530px; height:55px; z-index:100; left: 241px; top: 150px; background-color: #00CCFF; 
    	}

  • #4
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    I would try:
    1. make the containing div for the video position relative.
    2. put the roll-over buttons inside the containing div.
    3. position the pop-ups absolutely inside the containing div and adjust the dimensions until the pop-ups are where you want them.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    like this?
    I put the IFrame, the buttons & popups in the first div

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    #video {
    position:relative; width:331px;	height:330px; z-index:10; left: 241px; top: 129px; background-color: #FFF600;
    	}
    	
    #tech_stamps {
    position:relative; width:530px; height:55px; z-index:100; left: 41px; top: 050px; background-color: #00CCFF; 
    	}
    </style>
    </head>
    
    <body>
    
    
    <DIV align=center id="video" style="position:relative;"> 
    
      <IFRAME height=331 src="http://www.youtube.com/embed/Wu1WHVA-p9k?rel=0" frameBorder=0 width=530 allowfullscreen="">
    </IFRAME>
    
    <LINK rel=stylesheet type=text/css href="http://www.maxxis.com/Repository/Files/style.css">
    <div align="center" id="tech_stamps" class="div">
    <SPAN id=rollover1><A href="#">
    <IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/exo_stamp.jpg" style="z-index:100;"> 
      <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid;" border=0 src="http://www.maxxis.com/Repository/Images/EXO_tech_info.jpg"> 
     </SPAN></A></SPAN>
    
    <SPAN id=rollover2><A href="#">
    <IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/3C_stamp.jpg" style="z-index:100;"> 
      <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid;" border=0 src="http://www.maxxis.com/Repository/Images/3C-MTN_tech_info.jpg"> 
     </SPAN></A></SPAN>
     
       <SPAN id=rollover3><A href="#">
      <IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/exc_stamp.jpg" style="z-index:100;"> 
      <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid;" border=0 src="http://www.maxxis.com/Repository/Images/EXC_tech_info.jpg"> 
      </SPAN></A></SPAN></div>
    
    </DIV>
    
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •