SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stacking Order Questions

    Hi there,

    I have a question about stacking order. I have a you tube video that I want to stack under a frame with a transparent center. Right now the I have positioned the frame a bit to the left so you can see the stack. Right now I have the frame positioned absolute, but I want to make the video appear under the frame. Not sure how to do this. Anyone with suggestions is welcome to try at it.

    Here the link: http://www.newmanexpressions.com//sa...erOfFaith.html

    here the HTML

    HTML Code:
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type"
            content="text/html; charset=utf-8">
        <title>title</title>
    	<meta name="description" content="a description of your page"> 
    	<meta name="keywords" content="a, list, of, keywords"> 
        
    <style type="text/css">
    * {margin:0; padding:0;}
    #back {background-color:#f5f5f5;
    	width:761px;
    	height:354px;
    }
    
    #viewer {zbackground:url(viewPort.png) no-repeat; 
    	width:761px;
    	height:354px;
    	position:absolute;  top:0; left:55px;
    	
    }
    
    #objectView {z-index: -1px;}
    
    a img{border:0 none;}
    img.left {float:left; padding:110px 0 0 40px;}
    img.right {float:right; padding:110px 40px 0 0;}
    
    #soundCloud {padding-top:50px;}
    
    </style>
      </head>
    <body>
    <div id="back">
    
    <div id="viewer"><img src="viewPort.png" width="761" height="354"></div>
    <div id="objectView"><object width="742" height="354" id="youTube"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
    
    </div>
    
    
    
    
    </body>
    </html>

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have worked out some bugs to the code. Here is a new version of the HTML (it still won't stack right):

    HTML Code:
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type"
            content="text/html; charset=utf-8">
        <title>title</title>
    	<meta name="description" content="a description of your page"> 
    	<meta name="keywords" content="a, list, of, keywords"> 
        
    <style type="text/css">
    * {margin:0; padding:0;}
    #back {background-color:#f5f5f5;
    	width:761px;
    	height:354px;
    }
    
    #viewer {
    	width:761px;
    	height:354px;
    	position:absolute;  top:0; left:55px; z-index: 1000;
    }
    
    #objectView {}
    
    a img{border:0 none;}
    img.left {float:left; padding:110px 0 0 40px;}
    img.right {float:right; padding:110px 40px 0 0;}
    
    #soundCloud {padding-top:50px;}
    
    </style>
      </head>
    <body>
    <div id="viewer"><img src="viewPort.png" width="761" height="354"></div>
    <object width="742" height="354"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="objectView"src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    
    </body>
    </html>

  3. #3
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most recent update:

    I am trying a image positioning technique...

    HTML Code:
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type"
            content="text/html; charset=utf-8">
        <title>title</title>
    	<meta name="description" content="a description of your page"> 
    	<meta name="keywords" content="a, list, of, keywords"> 
        
    <style type="text/css">
    * {margin:0; padding:0;}
    #back {background-color:#f5f5f5;
    	width:761px;
    	height:354px;
    }
    
    #viewerFace {background: url(viewPort.png) no-repeat;
    	width:761px;
    	height:354px;
    	display:block; 
    	position:absolute; top:0; left:17px;
    	
    }
    
    #sourceView {position:relative;}
    
    a img{border:0 none;}
    img.left {float:left; padding:110px 0 0 40px;}
    img.right {float:right; padding:110px 40px 0 0;}
    
    #soundCloud {padding-top:50px;}
    
    </style>
      </head>
    <body>
    <object id="sourceView" width="742" height="354"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="objectView"src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed>
    <div id="viewerFace"></div>
    </object>
    </body>
    </html>

  4. #4
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears in the second example of code that the stacking order is correctly written, if I see it right. Yet it still does not produce the right results. Which led me to think of another way, if perhaps I have missed something; so I tried an image positioning technique. It seems to follow logical order, yet I am perplexed that it still does not work on screen.

    If anyone has suggestions, I am open.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Given what you have now, you could just move the image up to sit over the video:

    Code:
    #viewerFace {
    background: url(viewPort.png) no-repeat;
    width: 761px;
    height: 354px;
    display: block;
    position: absolute;
    top: -340px;
    left: 17px;
    }
    The problem is that you can no longer click the video. This sort of thing doesn't work very well, and I'd advise against this whole idea. Perhaps a better idea would be to break the image up into 4 parts and position them around the video container, like the 4 sides of a picture frame.


Bookmarks

Posting Permissions

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