basic html css positioning - html

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>

Related

HTML Image Sits On Top Of Other Controls

I want to have my background image span the entire page. This works as it should, with the exception of it sits on top of any other control/element I may add to the page. What do I alter in order for me to be able to have an image as a background spanning the entire page as well as add text/images on top of it? This is my current syntax:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
I used demo images for test it. Here is working code:
Just add z-index: -1; to #bg.
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
#content {position:relative; z-index:10;}
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">
Instead of putting the image as a element, have you tried setting the background-image property of the div? That should provide the effect you're looking for. Add the following rule to the CSS File.
#bg {
background-image: url("C:\KittyKat.jpg");
width:100vw;
height:100vh;
}
I would use z-index. It allows you to change the order of elements. So an element with z-index: 1; would appear in front of an element with z-index: 0;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#backgroundImage{z-index: -1;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
Make the image as background of the div using css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {
position:fixed;
width:100vw;
height:100vh;
background: url('C:\KittyKat.jpg');
background-size: cover;
}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"></div>
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

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>

Misalignment when displaying image on different browsers

This is quick simple but I'm really a noob and don't know how to resolve this.
Basically, I have an e-card to be displayed on a webpage. There's an image and music playing in the background. The html works fine on Chrome and Firefox (centralised and playing well even though size differs on Chrome and Firefox) but the main problem lies on IE. When I open the webpage on IE, the image is not aligned correctly.
Below is my html 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>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #214353;
}
</style>
</head>
<body>
<div align="center"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
<div>
<div align="center">
<embed src="media/Feliz Navidad Instrumental Karaoke..mp3" width="32" height="32" hidden="ture" loop="ture"></embed>
</div>
</div>
</body>
</html>
Please help!
Thank you!
Use this style on your container div.
<div style="width: 800px; height: 533px; margin: 0 auto;"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>

Showing iFrame horizontally centred

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>

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>