Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question need help with a style

    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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it seams to have worked out. Thank you Aerospace

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by acunon; 06-06-2007 at 06:38 PM. Reason: added an image


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •