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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute center with CSS -> misc

    This code below show exactly what I need to be, but when I resize window vertically smaller than 584px there is some space hidden and I can't see the upper content of DIV even scrolling them. Any ideas?

    Code:
    <html>
    <head>
    <style>
    #center {
    width:780px;
    height:584px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-294px auto auto -390px;
    border:0px solid black;
    text-align:center;
     } 
    </style>
    
    </head>
    
    <body>
    <div id="center">
    blablabla
    </div>
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    If you set the width and height by percentage, then you get what you want even if you resize the window. Maybe you must or should delete position absolute top left value.
    Code:
    <style>
    #center {
    width:100%;
    height:90%
    
    margin:-294px auto auto -390px;
    border:0px solid black;
    text-align:center;
     } 
    </style>
    However this effect may differ in browsers.That's so called "Liquid Design".

    http://forum.flashband.net/viewtopic.php?t=249

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Or you can keep the fixed height and width and add a table to hold everything. Not quite as graceful as a total CSS method but every total CSS method I've seen so far fails in one browser or another or requires a pge full of browser specific hacks to make them all play along.

    Code:
    <html>
    <head>
    <style type="text/css">
    table {
    width: 100%;
    height: 100%;       
    }
    td {
    vertical-align: middle;
    text-align: center;
    }
    #center {
    width:780px;
    height:584px;
    border: 1px solid #000;
    position: relative;
    margin: 0 auto;
    text-align: left;
     } 
    </style>
    </head>
    <body>
    <table><tr><td>
    <div id="center">
    blablabla
    </div>
    </td></tr></table>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, that seem to be the stable of all version.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Not really upping this post

    Last time I posted the table way of doing this I didn't know the Doctype to use. So here's the valid code with all the header stuff:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>center</title>
    <style type="text/css">
    table {
    width: 100%;
    height: 100%;       
    }
    td {
    vertical-align: middle;
    text-align: center;
    }
    #center {
    width:780px;
    height:584px;
    border: 1px solid #000;
    position: relative;
    margin: auto;
    text-align: left;
    } 
    </style>
    </head>
    <body>
    <table><tr><td>
    <div id="center">
    blablabla
    </div>
    </td></tr></table>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    On the top part of the blue frame surrounding MyAppleSpace.com there is a png with "meeting new Apple friends from all over the world"

    I have been trying to position it in absolute center so it keeps the center position even if you make the browser window wider.

    Here is the current CSS code:
    /*----------------------------------------------------------------------
    "meeting new Apple friends from all over the world (#xg_border_title)
    ----------------------------------------------------------------------*/
    #body_border_title {

    position:absolute;
    left:577px;
    top:74px;
    }

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Take a look at the dead centre
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Brian F (10-10-2009)

  • #8
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Take a look at the dead centre
    Thanks !

    This turned out to work:
    #body_border_title {

    position:absolute;
    margin-left:-227px;

    left: 50%;
    top:80px;
    width: 500px
    }


  •  

    Posting Permissions

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