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 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    CSS: positioning at center/middle of screen

    I'm struggling with a problem of how to write valid CSS and XHTML, which would position object (div) center of the screen (both vertically and horizontally). This should be done with CSS and should work in modern browsers (IE5+,NS6+/Moz0.9+, Opera6+).

    Currently, positioning is done with JS :
    http://www24.brinkster.com/zvona/sau...enhakemus.html
    Zvona
    First Aid for
    Web Design

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if you don't mind using position: absolute, then the following may help you:

    Code:
    #frame {
    	width: 640px;
    	height: 480px;
    	margin: auto;
    	padding: 0px;
    }
    It is adapted from a technique at glish.com and I believe it should work... not sure if it will work if the dimensions are not specified explicitly.

    Also if you don't want to use position: absolute, then I *think* you could use a div with text-align: center and then put another div inside, with the vertical-align set to middle, however vertical-align hardly ever works properly for me and I cannot guarantee that this approach will work.

    Hope that helps... it may give you some ideas if nothing else

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a method that works
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by beetle
    Here is a method that works
    heheh, I do believe that is exactly the same as my method, except you have put it into a page lol

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope. margin: auto; won't handle vertical centering.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    damn

    ah well I tried - albeit very quickly and I didn;t test it lol

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #7
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    Thumbs up

    Originally posted by beetle
    Here is a method that works
    Well, thank you. With minor modifications it started working properly. Although only few end-users have JS disabled, I prefer using CSS for positioning.
    Zvona
    First Aid for
    Web Design


  •  

    Posting Permissions

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