SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Top" style is not working in my CSS

    Hi everyone.
    I wanted my "div" to move down to the vertical middle of my page but it doesn't do so. It stays solid
    at the top of the page ! This is the code:
    Code:
    <style type="text/css">  
      div#startpage
        {
          width:960px;
          height:495px;
          margin:0; 
          padding:0;
          border: solid 2px red;
          /*position:relative;*/
          top:50%;
    </style>
    </head>
    
    <body>
    <div id="startpage"></div>
    </body>
    </html>
    Either i add: "position:relative" or not, the div remains at the same place. If i use "px" rathet then "%" it moves down but i need "%" because otherwise, in various display resolutions that div will be placed in various locations.
    Any idea how to make a div "move" using CSS?
    Thanks !

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is how positioning with coordinates works:

    When you put "position: relative" on someone, what you've done is created a NEW box on top of the OLD box. The old box is invisible, because all the visible things in your box are transferred to the new box. When you add coordinates like top and left to it, you move the NEW box, and the OLD one remains behind, taking up space.
    If you give % coordinates, this is in relation to that old box, not the page.

    When you put "position: absolute" on someone, you yank that box entirely out of the flow and place it in relation to the nearest positioned ancestor. This is any box who is a parent, grandparent, etc with "position: something" on it. If no ancestor box is positioned, then the document is used (the specs say the viewport, but this makes no sense since you can scroll these abso-po'd boxes off screen).

    To move your box 50% down to the middle, you have to realise the browser has a problem here: the middle of the screen or the middle of the document?? It does neither well.

    Paul O'B has a convoluted solution for vertically centering big boxes (and it's convoluted because of how browsers and CSS (don't) work well vertically). Here's one: http://pmob.co.uk/pob/hoz-vert-center.htm

    He's got others somewhere too. Notice it takes extra elements to work.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks. But it did move it down with "px" measurement rather then %

    And it did move it horizontally. I didn't use "position: relative" only put it between asterixes. And last: there is no parent to that div!
    I'll try that article maybe i get salvation there...
    Thans


Bookmarks

Posting Permissions

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