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/
Related
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>
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
I want to put the iframe tag in a middle of the parent div in every size of monitor,I used bootstrap:
<div class="col-md-2 col-sm-2 col-xs-12 animated2 zoomInDown">
<div class="col-md-12">
<div class="box" style="min-height: 180px; background-color: white">
<iframe id="enamad" class="thumbnail meNamad" src="#" frameborder="0" scrolling="no" allowtransparency="true" style="width: 180px; height: 180px;"></iframe>
</div>
</div>
</div>
Give the parent div position: relative.
Give its child div or the iframe position:absoute; margin auto; left:0; right:0; top:0; bottom:0;
no matter how big/small is the parent div the child div will always be in the center wrt parent.
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
I have a picture on a page, and I simply want to draw a link with a small graphic in the upper left corner of the picture. Is there any way to do this? to overlap it on the picture appropriately?
Something like this would work (recommend moving the inline CSS to a stylesheet of course):
<div style="position:relative">
<div>
<img src="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img src="smallgraphic.png">
</div>
</div>
The position:absolute will place that div relative to a container with position set, in this case at left 0 top 0. So that means it will end up in the top left of the same element that the 'backgroundimg' is placed in.
Does that make sense?
Don't use more divs than you need.
<div style="position: relative;">
<a style="position: absolute; top: 0; left: 0;">
<img src="..." />
</a>
<img src="..." />
</div>
simplify:
<div style="background:url(yourimage.jpg); position:relative;">
<div style="position:absolute; left:0; top:0;">
<img src="inner.jpg">
</div>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<a href="somewhere.html" style="position:absolute; left:0;
top:0;display:block;width:100px;height:100px;"></a>
</div>