Currently the way the code works is that it places the iFrame on the bottom on the bottom. I want the last two iFrames to be next to each other so that one can hold, lets say a menu and the other can hold another web page. They would need to be adjacent to each other. That is side by side (no pun intended)
Someone suggested float : left. I tried this and it did float left but it floated the iFrame above it one to the left and not the current iFrame.
Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
New Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500" float : right>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
easily done, you just need to set the display to inline-block for those two iframes.
iframe:nth-child(2),iframe:nth-child(3){
display:inline-block;
}
here's an example.
iframes are somewhat frowned upon. You might like to consider using divs with ajax instead, utilizing the jquery $.load function to load whatever you like into them. You can read up on that here.
Hope that helps...
Here is my attempt... The width of the window has to be more than 600px for the last 2 iframe to be beside each other. I used a div with clear:both; to make sure the last 2 iframe are under the first iframe
CSS:
body{
margin:0;
padding:0;
width:100%;
}
HTML:
<body>
<iframe src="http://www.w3schools.com" width="600" height="200" style="float:left;"></iframe>
<div style="clear:both;"></div>
<iframe id="test" src="http://www.w3schools.com" width="200" height="500" style="float:left"></iframe>
<iframe id="test1" src="http://www.w3schools.com" width="400" height="500" style="float:left"></iframe>
</body>
DEMO
You can set the two lower iframes to be side-by-side by giving them the display: inline-block style, as lukeocom mentioned above.
However, you should also then give them box-sizing: border-box and wrap them in a div with style display: table so that their width includes the size of the border, or else they won't line up well with the top iframe, as in lukeocom's example.
Here's what I mean:
http://jsfiddle.net/L87PE/1/
Having done that, you could even give them widths as a percentage, eg. width: 34% and width: 66%, and have them fill the whole browser:
http://jsfiddle.net/L87PE/
Related
Trying to embed a blog into our html website with an iFrame #:
<h1 class="title">All the latest...</h1>
</br>
</div>
</div>
</div>
<iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
<p>Your browser does not support iframes.</p>
</iframe>
I've tried changing height to 100%, auto and even numerous fixed widths, however the height of the iframe stays exactly the same! Any help?
Thanks in advance,
Aidan
If you're using a percentage, then the containing element must have a height or the iFrame won't know what to base the percentage on. If you give body 100% height and then give the iFrame 100% height, it will fill the entire height of the window.
Additionally, I would advise against using inline CSS, instead put your CSS rules into a CSS file.
HTML:
<body>
<iframe src ="http://inspireacademy.tumblr.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
CSS:
body {
height:100%;
}
iframe {
height:100%;
width:100%;
}
JSFiddle
You will have to set the height of the containing div. The height auto uses the container the element is in to set the height. Height only works as a percentage when it is in a container.
<h1 class="title">All the latest...</h1></br>
</div>
</div>
</div>
<div style="height:400px;">
<iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
<p>Your browser does not support iframes.</p>
</iframe>
It will then scale to the container.
My (fan) website has this code so far. I want the crop I have specified (-360px on the top and -50px to apply to each iframe, but no matter WHAT I do the other three iframes do not have the crop). Is there a way to make the crop apply to all the iframes? I am completely lost. :(
<div style="overflow: hidden;
margin-top: -360px;
margin-left: -50px;">
<iframe src="http://dragcave.net/view/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
</div>
iFrames only show the whole page, there's not really any way for you to only show part of a page in an iframe.
What you need to do is some jquery trickery, which you can find here: iframe to Only Show a Certain Part of the Page
I have my HTML as below
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Top div (d1) is fixed. while scrolling bottom div(d2) goes behind top div. But youtube video
stay on top.
I want to put it behind top div. Is there a way??
The problem could be that the iframe is holding the flash youtube video on top. It has to do with the z-index of a Flash object.
I've used this solution before with success...
http://manisheriar.com/blog/flash_objects_and_z_index
Put your Flash content into a wrapper div called flash
Add to your object tag
Add wmode="transparent" into the embed tag
Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)
Use this css:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Edit: you would have to remove the Iframe. Wich would of bin a good idea in the first place, since iframes suck :p
That's because ActiveX objects tend to sit on top of ALL html elements. You'll have to have to add a "windowless" mode to your
<object>
<param name="wmode" value="window" />
</object>
Here is how I solved it.
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Note ?wmode=transparent" in src of iframe
What I tried when I came across similar situation:
#bridgeDIV
{
position:relative;
}
#riverDIV
{
position:fixed;
overflow-y:scroll;
}
Imagine river flowing under the bridge.
I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>
the code below are all height=100%, it works fine in chrome but it displayes very strange in firefox and ie7!it is not exactly the 100% height.anyone knows? thanks a million.
<iframe src ="demoFramesetLeftFrame.jsp" name="treeframe" id="treeframe"
width=200px height=100% frameborder=0>
</iframe>
<iframe src="middle.html" name="middle" id="middle"
width=200px height=100% frameborder=0>
</iframe>
<iframe src="test.html" name="basefrm" id="basefrm"
width=200px height=100% frameborder=0>
</iframe>
You may need a container div, with a min-height property. Writing 100% height in HTML for some reason is one of the hardest things to do.
Here are some tutorials on how 100% height can be achieved
http://www.dave-woods.co.uk/?p=144
http://www.webmasterworld.com/forum83/200.htm