I would like to have the iframe on bottom, canvas in the middle and some div on top.
This is what I have:
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, currently the canvas in on top of both iframe and commentDiv div.
I made some changes:
<canvas id="drawLineCanvas" style="position: absolute; z-index: -1; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="z-index: -2;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, now while div is on top of canvas, the iframe is also on top of canvas.
Any tips on on how to solve this?
Here is the layout you want. Try this.
<div name="commentDiv" id="commentDiv" style=" z-index: 1;">this is div</div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;display:block"></canvas>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Using position:absolute I can get what I want to happen.
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="position: absolute; z-index: -1;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
Related
I need to add a Youtube video to a webpage, however, just working the "play" and "pause"... Without giving the visiting the option to see the progress bar or even click on the channel photo... Just play and pause...
The most you can do is this code without success:
<div class="elementor-element elementor-element-50400e2 elementor-widget elementor-widget-html" data-id="50400e2" data-element_type="widget" data-widget_type="html.default">
<div class="elementor-widget-container">
<div style="position: relative; height: 0; padding-bottom: 56.2%; padding-top: 0;">
<iframe style="position: absolute !important; width: 100% !important; height: 100% !important; z-index: 100" src="https://www.youtube.com/embed/EErSKhC0CZs?enablejsapi=0&autoplay=0&modestbranding=1&controls=0&showinfo=0&rel=0&hd=1&wmode=transparent&enablejsapi=0" frameborder="0" allowfullscreen=""></iframe>
<div style="position: absolute;top: 0;width: 100%;height: 70px;background-color: transparent;z-index: 101;left: 0;"></div>
<div style="position: absolute;bottom: 0;width: 100%;height: 50px;background-color: transparent;z-index: 101;left: 0;"></div>
Exactly how this page is doing: https://www.tedswoodworking.com/new/vsl/
I have this code:
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
I want to show in the same row, but don't know how?
I tried adding: display:inline-block; and white-space: nowrap; but nothing changed.
Any help?
Try adding CSS float to your main divs
<div style="float:left;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div style="float:right;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
See in jsfiddle
Two divs with width 50%:
HTML
<div id="first_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div id="second_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
CSS
#first_column,
#second_column {
width: 50%;
}
#first_column {
float:left;
}
#first_column {
float:right;
}
Example:
http://codepen.io/anon/pen/vyWrbX
You have a couple of different issues going on here:
You have invalid markup on the iframes (some of your CSS is outside the "style" attribute so won't have any effect.)
Your "advertise in this spot" divs are full page width, which will interfere with the side-by-side layout you're attempting to apply to the iframes.
The simplest solution is to add parent containers to each set of iframe-plus-link, and apply the layout to those containers. For clarity here I've pulled your inline CSS out into class declarations, and changed the sizes to fit within the SO layout, but you can adjust this to whatever sizes and styles you like:
.container {
width: 200px;
display:inline-block;
}
iframe {
height: 100px;
width: 200px;
}
.ad {
text-align:center
}
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
Just add css to the siblings elements (in this case the parent <div> element) to make them show in the same line, like
div[align] { display: inline-block; }
or
div[align] { float: left; }
and define a width for them (if they are adapting to content width they can get on new line if too big)
div[align] { width: 50%; }
iframe { width: 100%; } /* or max-width */
Question is very simple becuase there is sample markup which is showing a problem.
How can i make input type="file" clickable in following example? I tried to work with z-index but it seems to do nothing here.
<html>
<div style="z-index: 0">
<img src="#" width="350" style="position: absolute;" />
<canvas width="350" style="border: thick; position: absolute"></canvas>
</div>
<div style="z-index: 10">
<input type="file" />
</div>
</html>
You need to set position with z-index, or it will not work.
// HTML
<div class="canvas">
<img src="#" width="350" />
<canvas width="350"></canvas>
</div>
<div class="file">
<input type="file" />
</div>
// CSS
.canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.file {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
http://codepen.io/paulcredmond/pen/yakkkY
I have the code below which i am using from google docs to display a presentation, i would like to know is there any method of me hide the bar at the bottom so that it does not show up.
<div style="width: 960; height: 540;
background-color:White;">
<div style="z-index: -2;"><iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe></div>
</div>
set parent div height less the iframe height and use overflow: hidden; in parent div.
Try this code
<div style="width: 960px; height: 540px;background-color:White; overflow: hidden;">
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe>
</div>
DEMO
try adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000&rm=minimal" frameborder="0" width="960" height="569"></iframe>
I have tried many times get I cannot get it, I am trying to put a div on top of Iframe content
<div align="middle">
<div style="position: relative;">
<iframe
src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg"
width="1000" height="670" scrolling="no">
</div>
<div style="position: absolute; left: 50px;">
<p>hi</p>
</div>
The green picture is just for example. I just have a file hosted on one server that shows a slideshow and I want to be able to put a couple of links on top of it
Try having the iframe and the div to place on top positioned absolute, and both inside an relative positioned container. A quick edit to your code:
<div style="position: relative;">
<iframe style="position: absolute;" src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg" width="1000" height="670" scrolling="no"></iframe>
<div style="position: absolute; left: 50px;">
<p>hi</p>
</div>
</div>
And a demo on jsfiddle:
http://jsfiddle.net/Zk3Hq/