I want to position Google maps on the bottom of my page, but no matter what numbers I insert, it keeps staying on the top left hand corner and won't budge. I can resize it, but I can't seem to move the positioning. Any help?
HTML:
<iframe
marginwidth="0" marginheight="0" scrolling="no" width="422" height="300"
frameborder="0" scrolling="no"
src="https://maps.google.ca/maps?ie=UTF8&cid=7805933538308657347&q=Hibiscus&gl=CA&hl=en&t=m&z=16&iwloc=A&output=embed">
</iframe>
CSS:
.iframe {
position: absolute;
padding-bottom: 65%;
padding-top: 30px;
overflow: hidden;
top: 8000px;
left: 400px;
width: 100%;
height: 100%;
}
Simply put the iframe in the footer tag of your page.
HTML
<html>
<body>
stuff...
</body>
<footer>
<iframe style="width:100%; height:100%; position:absolute;"
marginwidth="0" marginheight="0" scrolling="no" width="422" height="300"
frameborder="0" scrolling="no"
src="https://maps.google.ca/maps?ie=UTF8&cid=7805933538308657347&q=Hibiscus&gl=CA&hl=en&t=m&z=16&iwloc=A&output=embed">
</iframe>
</footer>
</html>
CSS
.iframe {
position: absolute;
padding-bottom: 65%; //65% padding-bottom is massive... are you sure you want that much?
padding-top: 30px;
width: 100%;
height: 100%;
//overflow:hidden; Why that? Doesn't do anything usefull in this situation.
//left:400; Is it supposed to be 400px? If so, your page is pretty huge considering you have a map the size of your page.
}
Since you are implementing position absolute, I guess you can just add bottom:0; in the iframe class if you want it to be always at the bottom of the page
.iframe {
position: absolute;
bottom:0;
overflow: hidden;
left: 400px; <-- do you want to set margin on the left side of the map?
width: 100%;
height: 100%;
}
I think your problem lies in your CSS. You have a .iframe which means any elements with class="iframe" will inherit those properties. Your html you supplied doesn't look like it has anywhere a class of iframe. You can either keep your CSS the same and add class="iframe" to your iframe or change .iframe to iframe in your CSS. Personally I'd go with the .iframe and add class="iframe" to the iframe but I'd rename the class to something like .google-maps
<iframe class="iframe" ...></iframe>
iframe /*or*/ .iframe{
position: absolute;
padding-bottom: 65%;
padding-top: 30px;
overflow: hidden;
top: 8000px;
left: 400px;
width: 100%;
height: 100%;
}
EDIT:
Looking over your question again I have a suggestion to try position:{absolute, relative or fixed} to see if changing the position attribute which might solve your problem.
Related
I made a banner list thenk put my website, on desktop there is no problem bu on mobile its cutting the banners.
Mobile view
this is my iframe placement code:
<iframe scrolling="no" width="75%" height="670"src="/html/banners.html"></iframe>
<style>
iframe {
margin: 0 auto;
display: block;
}
#media(min-width:480px) {
iframe {
height:750px !important;
}
</style>
and this is my banner list codes: Banner list code
How can I resolve thisheight issue? can yoou please help me?
Many thanks.
Please refer to this article Using David J Bradshaw's iframe-resizer to solve iframe height and width issues.
You can to add a containing wrapper around the iframe.
<div class="iframe-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0">
</iframe>
</div>
Then. you can add css.
.iframe-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
I need to remove vertical scrollbar in an iframe. I have tried using overflow: hidden; still not working. Please help.
How it looks now
Code:
#iphone4 {
background-image: url("ipad_new2.png");
background-repeat: no-repeat;
height: 900px;
width: 750px;
margin: auto ;
position: relative;
overflow: hidden;
}
/*Mobile iframe CSS*/
iframe {
height: 700px;
width: 525px;
position: absolute;
top: 68px;
margin: auto ;
left: 61.99px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
</body>
</html>
overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.
A current solution would be to combine the two:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
check This
I think it'll help please check below mentioned link:
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
/*Mobile iframe CSS*/
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin: auto ;
left: 0;
border:none;
}
body{margin:0px;}
https://jsfiddle.net/xnt014a8/2/
You can't really remove vertical scrollbar if you have dynamic content in your iframe using any css property.
You can refer this answer to set height dynamically at load time. If your content inside iframe is constantly changing then you have to use something like MutationObserver and the pass the resize function as an callback defined in the linked answer.
you could try
iframe{scrolling="no"}
So I am using an iFrame in my website to display a video and I put it in a div to allow for resizing on mobile sties and just to make it more responsive etc. However now, if the monitor is small, the content below the iframe is cut off.
Here is the code for the iframe:
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
If anyone can see anything that may cause this behaviour then I would love to know.
Thanks
Edit:
Here is the code for the div that I am trying to scale. The width doesn't change as the page is scaled down and thus the height also does not change.
Any ideas?
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The issue is that your wrapper div .splash-page .main-wrap is set to position: absolute; and overflow-y: hidden; this doesn't allow the div to grow to fit all your content.
If you change your CSS to include something like this:
.splash-page .main-wrap {
overflow-y: visible;
position: relative;
}
It will allow the div to grow to accommodate all your content.
You also could wrap the whole thing in a media query if you just wanted to target a specific width.
#media all and (min-width: 1001px) {
...
}
Currently you'll also have a duplicating background issue because your using .wsite-background on both a div and your body tag. If you remove this class from your body tag, it should look better.
Your iframe has a fixed with.
Try using width="100%" instead of width="960"
I'm not very good at coding and this time I couldn't even find an answer from the Internet.
I've made an iframe and placed it inside a div. I want to scroll what's inside the iframe, but for some reason I cannot scroll to the end of the page.
I'm not very good at explaining, so I hope these pictures will clear what I mean:
What I have: http://i87.photobucket.com/albums/k123/gaikotsu_/scroll.png
What I want: http://i87.photobucket.com/albums/k123/gaikotsu_/scroll2.png
As you can see, the iframe is cut at the bottom so that 3 rows of art are missing. I've tried everything I've been able to think of and it's just making me frustrated!
Here's the css for the div:
#main {
background-color: transparent;
}
.frame {
display: block;
border: medium none;
position: absolute
height: 100%;
width: 100%;
overflow: hidden;
}
And here's how I've created the div/iframe:
<div id="main" style="overflow-y: auto; height: 100%; overflow-x: hidden; position: absolute; left: 294; top: 44; border: ">
<iframe name="main" src="main.htm" height="710px" width="610px" scrolling="no" border="0" frameborder="0" allowtransparency="true" class="frame">
</iframe>
</div>
I appreciate any kind of help! Thanks for reading!
You are missing a semi-colon after position: absolute in .frame CSS.
It makes the next line, height:100%, unresolved.
I was also facing the same problem.
I set
iframe{
height: 100%;
}
And it worked for me.