fiddle:
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$.fn.center = function(parent) {
this.css("position", "relative");
this.css("top", ($(parent).height() - this.height()) / 2 + "px");
this.css("left", ($(parent).width() - this.width()) / 2 + "px");
return this;
};
$(function() {
$('#loginForm').center("#login");
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<img align="center" src="images/image.png" />
</div>
<div id="wrapper">
<div id="slogan">
<h2>Some Text</h2>
</div>
<div class="main">
<div id="login">
<form id="loginForm" name="loginForm" action="<c:url value='j_spring_security_check'/>" method="post">
Enter User Name: <input type="text" name="username"><br>
Enter Password: <input name="password" type="password"><br>
<input type="submit" value="Login">
</form>
</div>
<div id="register">
<a href="register.php"><img align="center" src="images/signup.png" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
background: #FFFFFF;
}
#container {
width: 800px;
margin:auto;
}
#header {
width: 800px;
height: 260px;
margin:auto;
overflow: hidden;
text-align:center;
}
#wrapper {
width: 800px;
margin: auto;
margin-top: 80px;
}
#slogan {
margin:auto;
text-align: center;
border:2px solid;
}
.main{
background:#efefef;
overflow:hidden;
}
#login {
width: 396px;
height:200px;
float: left;
border:2px solid;
text-align:center;
}
#register {
width: 396px;
height:200px;
border:2px solid;
text-align: center;
vertical-align: middle;
float:left;
}
instead of the below line you direct download jquery from the website and include it in your project and give the relative path to it:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
just save this code and include in your project: