3
I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page.
CSS
html{
height:100%;
min-height:100%;
}
body{
vertical-align:middle;
background-color: #FFFFFF;
text-align: center;
height:100%;
min-height:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.loginHeader{
background-color:#4F4F4F;
text-align:center;
vertical-align:middle;
font-family:Verdana;
font-size:14px;
color:White;
font-weight:bold;
position:relative;
}
.loginFooter{
background-color: #4F4F4F;
height: 20%;
text-align: center;
vertical-align: middle;
position: relative;
}
.loginMain{
background-color: #E4E0DF;
height: 60%;
text-align: center;
vertical-align: middle;
position: relative;
}
.loginBox{
text-align:center;
border: solid 1px #4F4F4F;
width: 250px;
height: 200px;
display: table-cell;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
}
.vertAlign{
left: 0px;
top: 50%;
display: table-cell;
vertical-align: middle;
}
.alpha1{
background-color:#4F4F4F;
max-height:30%;
min-height:10%;
}
.alpha2{
background-color:#E4E0DF;
max-height:30%;
min-height:10%;
}
.alpha3{
max-height:60%;
min-height:40%;
}
.bravo1{
height: 20%;
background-color: #4F4F4F;
text-align: center;
vertical-align: middle;
}
.bravo2{
height: 60%;
background-color: #E4E0DF;
text-align: center;
vertical-align: middle;
}
original code
<body>
<div class="loginHeader">Verve Records<br />www.celebrateella.com</div>
<div class="loginMain">
<div class="loginBox">test</div>
</div>
<div class="loginFooter">
<div class="vertAlign"><a href="http://www.default.com" target="_blank"><img src="Images/Logos/default.gif" alt="default" width="127" height="39" style="border: 0px; position: relative;" /></a></div>
</div>
</body>
my code
<body>
<div align="center" class="bravo1">
<div align="center" class="alpha1"></div>
<div align="center" class="alpha3">
<div align="center" class="loginHeader">Verve Records<br />www.celebrateella.com</div>
</div>
<div align="center" class="alpha1"></div>
</div>
<div align="center" class="bravo2">
<div align="center" class="alpha2"></div>
<div align="center" class="alpha3">
<div class="loginBox">test</div>
</div>
<div align="center" class="alpha2"></div>
</div>
<div align="center" class="bravo1">
<div align="center" class="alpha1"></div>
<div align="center" class="alpha3">
<div align="center" class="vertAlign"><a href="http://www.default.com" target="_blank"><img src="Images/Logos/default.gif" alt="default" width="127" height="39" style="border: 0px; position: relative;" /></a></div>
</div>
<div align="center" class="alpha1"></div>
</div>
</body>
I got it to sort of work right in my code but the boss wants it in as few lines an styles as possiable so is there a way to align the three items to the center verticaly while useing a %height and not a hard pxheight. The idea is that the items stay in the middle horizontaly and verticaly no matter the size of the browser.
Any help is much apreceated
ps this is my first post here
