HTML/ CSS Resizing Help
I've been working on a landing page for one of my upcoming products but I can't seem to get this simple page working properly.
I'm having trouble centering and making it look good on other browsers. I know you can't make your site look the same on all browsers, but I at least want my site to be centered and have it resize on its own so that it fits any resolution.
I'm still a big noob at this stuff so I would greatly appreciate your guys' help.
Here's the HTML and CSS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function showIt() {
document.getElementById("button").style.visibility = "visible";
}
setTimeout("showIt()", 10000); // 1000 = 1 sec
</script>
<head>
<title>Five80Nine</title>
<link href="589.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<body style="overflow:hidden;"/>
</head>
<body>
<div id="container">
<div id="header">
</div><!--end header-->
<div id="video">
<iframe width="400" height="224" src="?&autoplay=1&modestbranding=1&rel=0&showinfo= 0&autohide=1;" frameborder="0" allowfullscreen></iframe>
</div><!--end video-->
<div id="button" style="visibility:hidden" >
<a href="http://fromhomemakemoney.com/dap/paypalCoupon.php?cmd=_xclick-subscriptions&item_number=4¤cy_code=USD" target="_blank" id="button" > <img src="images/buybutton.png" border="0" class="dropshadow"/> </a>
</div><!--end button-->
</div><!--end container-->
</body>
<script type="text/javascript">
</script>
</html>
CSS
body {width: 100%; height: auto; margin: 0 auto; padding: 0; font-family:Helvetica ; text-align: center; background-color: black;}
'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img
#container{width: 100%; height: auto; margin: 0 auto; padding: 0; text-align: center;}
#header{
background-image: url(images/589header.png);
background-repeat: no-repeat;
padding:26%;
float: left;
width:100%;
height: 100%;
margin-left: 15%;
}
#video {
position:absolute;
top:57%;
right:25%;
float: ;
}
#button {
position:absolute;
top:110%;
right:38%
}
HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu
Varcoe Design - High quality web designer for hire!
HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu