Hello,
I’ve been asked to create a landing page for a new site and to have it be centered top to bottom for viewing on larger monitors. It kind of makes sense since the page is just a large img w/ an email form element.
And though I can do this easily with margin: 0px, auto; - this doesn’t to the job for top to bottom. What I’ve read is browsers still default top margin to 0.
Another twist is that the form element has to be placed relative to the img in the bottom right hand corner … so relative vs absolute placement is question there.
The url is here: Smitten on Paper - Coming Soon!
And my markup below:
A part of my question here is about HTML5 (this will be an html5 site) with it and larger monitors being on the upswing, I’m wondering what the most current best practice is in this situation.
```html4strict
<!DOCTYPE HTML>
<html>
<head>
<title>Smitten on Paper - Coming Soon!</title>
<meta charset="UTF-8">
<script type="text/javascript">
</script>
<style>
html,body {
height:100%;
margin:0;
padding:0;
}
#landingpage {
width:960px;
height:576px;
margin: 0px auto;
}
#emailform {
font-size: 10px;
background-color: transparent;
border: 1px solid #900;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100px;
}
#submit {
color: #900;
font-size: 10px;
font-weight: bold;
background:none;
border:0;
padding-left:0;
}
</style>
</head>
<body>
<div id="landingpage">
<img src="images/landingpage.png" alt="" >
<div id="emailform">
<form name="emailform" action="email.php" method="post" >
<input type="text" name="email" id="email">
<input type="submit" value="Submit" id="submit">
</form>
</div>
</div>
</body>
</html>