I'm trying to create a login form with the username and password fields centered in the middle of the screen using the Zurb Foundation package. Unfortunately, I'm struggling to get things aligned vertically.
This is the code I have:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
Registration
</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="stylesheets/main.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<nav class="top-bar">
<ul>
<li class="name"><h1><a href="#">Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<li><a href="#">Link</a></li>
</ul>
<ul class="right">
<li><a href="#">Link</a></li>
</ul>
</section>
</nav>
<body>
<div class="row" id="parent">
<div class="six columns" id="child">
<form id = "register">
<input type="text">
</form>
</div>
</div>
<script src="javascripts/jquery.foundation.topbar.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
</html>
Here is some CSS that I've been experimenting with but haven't been able to get working yet:
body {
/*background-image: url('../images/gplaypattern.png');*/
background: red;
}
#register {
background-color: black;
width:80%;
}
#parent {
position: absolute;
left: 50%;
top: 50%;
height: 80px;
}
#child {
height: 75px;
position:absolute;
top: 50%;
background: green;
}
Strangely, when I try to make the height of an element dynamic (e.g. height: 30%;), it doesn't seem to work. Does anyone know why?