Showing iFrame horizontally centred - html

I have an iFrame in a php, i want to show it as centered horizontal atleast, Here is my code. How can i edit it to make it show center horizontal in browser
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<div>
<iframe src="https://<??>" width="850" target="_parent" height="850" scrolling="no" style="overflow:hidden; border:none;" style = "display:block;"></iframe>
</div>
</body>
</html>

You have two separate style tags. Be sure to merge them into one.
Try adding margin: 0 auto; to your style tag.

You need to put the iframe in a div then use css to center in the div like so:
<div class="myframe">
<iframe src="http://google.com" width="850" target="_parent" height="850" scrolling="no" border:none;></iframe>
</div>
<style type="text/css">
.myframe
{
margin: 0px auto;
width: 850px;
}
</style>

Related

Make an iframe height automatically extend to the bottom of the browser window?

I'm making a website (codersdomain.site88.net) and I have an iframe that needs to extend to the bottom of my browser window. Here's my html:
<!DOCTYPE html>
<head>
<link rel="icon"
type="image/png"
href="./icon.png">
</head>
<title>Coder's Domain</title>
<body style="overflow-x:hidden; overflow-y:hidden; height:100%;"
background="BG.jpg">
<div align="center">
<iframe tabindex="-1" style="height:590px; width: 596px; overflow-y:'scroll' overflow-x:'hidden' " src="index_data.html"frameborder=0 ></iframe>
</div>
</body>
can somebody tell me how I might make the height automatically extend to the bottom of the window?
body { overflow-x:hidden; overflow-y:hidden; height:100%; }
iframe {height:590px; width: 596px; overflow-y:'scroll' overflow-x:'hidden'}
<body
background="BG.jpg">
<div align="center">
<iframe tabindex="-1" src="index_data.html" frameborder=0 ></iframe>
</div>
</body>
Just change the height to 100%
<iframe tabindex="-1" style="height:100%;
width: 596px; overflow-y:'scroll'
overflow-x:'hidden' " src="index_data.html"frameborder=0>
</iframe>
</div>

fix a div/button/link to a background image

I am having an annoying issue to position an element on top of a background image. Say we have a html as :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="background:url('image.png'); background-size:cover;">
<button>Button </button>
</div>
</body>
</html>
The button should be placed at left: 50px; top: 100px; against the original image, but because the device screen ( desktop chrome or ios safari ) change, and the background-size: cover; property, the image is actually scaled, so the button would not appear at the right position.
I tried another way :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="width:100%;">
<img src="image.png" width="100%" />
<button style="top: -100;z-index: 5;">Button </button>
</div>
</body>
</html>
This way the page may scroll because the image might beyond screen height, once i positioned the button to the right place, and changed to another device resolution, the position was altered again.
I also tried javascript to listen to resize event to absolutely position the button, it still has obvious difference between desktop and ios screens.
How can i make it ? Thanks in advance!
Edit:
If the image is scaled due to screen resolution, i want the button be scaled same ratio too. It would be great to find a way without complex javascript.
If you want the button size change with the scale of the page, so you must add width and height style for that in% unit. Because pixel is a fix unit on different devices but % depends on device resolution. And finally you can add min-width and min-height or max-width and max-height to your div style to have a good control on other devices. Good luck.
Add CSS position absolute to your image and button elements. In this way you will be able to set their position accordingly to their parent element <div>.
http://jsbin.com/mevuxizuzu/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
</div>
</body>
</html>
You can use the position:absolute; for your button and set the right place with top and left position with %, because your width and height are based on % not pixels .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
</div>
</body>
</html>
Try the following code that use relative position for the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
left: 20px;
top:100px;
}
.bd{
background-image: url('http://lorempixel.com/650/1000/sports/1/');
background-size: cover;
height: 1000px;
width: 650px;
}
</style>
</head>
<body>
<div class="bd" style="width:100%;">
<img style="position:absolute" src="" width="100%" />
<button>Button </button>
</div>
</body>
</html>
Checkout this DEMO: http://jsbin.com/pemafigafa/3/

basic html css positioning

I am having some trouble with some very basic html. I am trying to center embedded video to the center of the tv screen image. the whole code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">
body {
background-color: #000;
}
#test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
margin-top:-925px;
margin-left:-13px;
}
</style>
</head>
<body>
<div class="test"> <div align="center">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</body>
<div id="video"><div align="center"> <iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The main problem is when you zoom in or out, the video no longer centers to the TV screen image. Please help me position the video and background image to not move when zooming or resizing the window.
 
test is a class, so it is .test
prefer div video as
position:absolute;
you forgot the closing tag of class "test"
This is the whole code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">
body {
background-color: #000;
}
.test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
position:absolute;
top:14.5%;
left:47.5%;
}
</style>
</head>
<body>
<div class="test"> <div align="center">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</body>
<div id="video">
<iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
if you want to center your element there are many ways, one of this is below..
<div class="wrapper">
<div class="videoWrapper">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</div>
.wrapper {
float:left;
width:100%;
}
.videoWrapper {
width:500px; /* set your own width */
margin:auto;
}
If your background image has a fixed size you can position #video absolutely.
jsFiddle
#video {
position:absolute;
left:577px;
top:166px;
}
Note that in my fiddle I cleaned up your HTML removing the redundant elements.
<div class="test">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
<div id="video">
<iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
Use "center" tag to put keep your video to center
and also you can set top margin as per screen resolution by following script
<script type="text/javascript">
$(document).ready(function(){
var height = (($(window).height()) / 2) - 50;
$('.video').css('top', height );
});
<scrript>

Is it a way to correct Internet Explorer view of an absolute iframe?

I have an iframe used as an index file to hide a url of next website.
<iframe style="position:absolute; top:0px; left:0px; " src=" http://..." width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
This all works in all known to me browsers instead of Internet Explorer (checked on 9). Is it a simple way to make it visible correctly?
First of all mixing html attributes with css is nasty thing.
Anyway this should work flawlessly if you are looking for fullscreen iframe:
CSS:
/* notice you actually don't need absoulte positioning */
body,html,iframe {
margin:0;
padding:0;
width: 100%;
height: 100%;
}
body,html {
overflow: hidden;
}
HTML:
<html>
// add head, css
<body>
<iframe src=""></iframe>
</body>
</html>
Unfortunately, not that I've found. Instead, you would need to use JavaScript to monitor window size.
Or just use a regular frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Page title</title>
</head>
<frameset rows="*">
<frame src="http://..." />
</frameset>
</html>

Why will this div/img not center in IE8?

I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>