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,\[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{ 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>\[/code\]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.
basic html css positioning
- Thread starter salah
- Start date