need help with a style

acunon

06-04-2007, 07:34 PM

I am trying to create a style for a Div tag the style will have al the basics (do not need help with that). The part I am having trouble with is, I need the style (for a div) to have what amounts to a vertical align middle inside an outter div with a height 20%

I am putting together an admin login page there is a top (height 20%) with a couple lines of text, a middle (height 60%) with a login box, and a bottom (height 20%) with a company logo/link. I need the text, login box and, logo/link (three items) to be centered verticaly with in there respective areas no matter the size of window.

The hard part is that I need the three items to use one style each to acomplish this.

so the code should look somthing like this

<body>
<div class="loginHeader">text line 1<br />text line 2</div>
<div class="loginMain">
<div class="loginBox">login box</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>

_Aerospace_Eng_

06-04-2007, 07:39 PM

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

acunon

06-04-2007, 08:43 PM

it seams to have worked out. Thank you Aerospace

acunon

06-06-2007, 05:12 PM

Alright Aerospace your link helped a lot but this is still not centered when you shrink the window way down. If I am just misssing some stupid small thing just tell me if someone has a site that can help further it will al be greatly apreceated.

<body>
<div class="loginFooter">
<div class="loginHeader">Text 1<br />Text2 </div>
</div>
<div class="loginMain">
<div class="loginBox">test</div>
</div>
<div class="loginFooter">
<div class="vertAlign">
<a href="http://www.kmgsoftware.com" target="_blank"><img src="Images/Logos/kmgsoftware.gif" alt="KMG Software" width="127" height="39" style="border: 0px; position: relative;" /></a>
</div>
</div>
</body>

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{
display:table;
width:100%;
height:20%;
position:relative;
top:20%;
bottom:20%;
background-color:#4F4F4F;
text-align:center;
vertical-align:middle;
font-family:Verdana;
font-size:14px;
color:White;
font-weight:bold;
}
.loginFooter{
display:table;
width:100%;
background-color:#4F4F4F;
height: 20%;
text-align:center;
vertical-align:middle;
position:relative;
}
.loginMain{
display:table;
width:100%;
background-color:#E4E0DF;
height:60%;
text-align:center;
vertical-align:middle;
position:relative;
}
.loginBox{
display:table;
width: 250px;
height: 200px;
position:relative;
top:20%;
bottom:20%;
text-align:center;
border: solid 1px #4F4F4F;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
}
.vertAlign{
display: table;
width:100%;
height:20%;
position:relative;
top: 20%;
bottom:20%;
vertical-align: middle;
}

perhaps this will help
http://i47.photobucket.com/albums/f181/Nalper/Untitled-1.png