CODEWITHSUNDEEP
htmlcssposition
user2089255
user2089255

Reputation: 87

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&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;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.

 

Upvotes: 1

Views: 286

Answers (4)

Aijaz Chauhan
Aijaz Chauhan

Reputation: 1649

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>

Upvotes: 0

jhunlio
jhunlio

Reputation: 2660

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;
}

Upvotes: 1

Nik Drosakis
Nik Drosakis

Reputation: 2348

  1. test is a class, so it is .test
  2. prefer div video as position:absolute;
  3. 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&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

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&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
</div>

Upvotes: 0

Related Questions