basic html css positioning

Question

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.

Its already in center at firefox. There is no such problem

Nilesh
– Nilesh

2013-03-30 09:25:53 +00:00
Commented Mar 30, 2013 at 9:25 — Nilesh
– Nilesh, Commented Mar 30, 2013 at 9:25

Nikola Drosakis · Accepted Answer · 2013-03-30 09:42:37Z

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&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>

jhunlio · Accepted Answer · 2013-03-30 09:43:45Z

1

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

answered Mar 30, 2013 at 9:43

jhunlio

2,6724 gold badges29 silver badges48 bronze badges

Comments

Daniel Imms · Accepted Answer · 2013-03-30 09:25:47Z

0

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>

answered Mar 30, 2013 at 9:25

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Comments

Aijaz Chauhan · Accepted Answer · 2013-03-30 09:48:00Z

0

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>

edited Mar 30, 2013 at 9:48

answered Mar 30, 2013 at 9:42

Aijaz Chauhan

1,6693 gold badges28 silver badges55 bronze badges

Collectives™ on Stack Overflow

basic html css positioning

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related