Centering content AND overlapping images?

Discussion in 'Web Design and Development' started by 7on, Apr 28, 2008.

  1. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #1
    Is it possible to have absolute positioning (z-indexed above one another) but have the whole thing be in the center of the page?

    An example being here. Let's say I wanted to make the whole thing in the middle float in the middle of the page without losing the placement of the various elements?
     
  2. Trip.Tucker Guest

    Joined:
    Mar 13, 2008
    #2
    Create a container div and center that and set it to relative. Within, nest your object divs set as absolute and they will use the parent co-ords as a root point.
     
  3. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #3
    Could I have an example? Thanks!
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I believe this is what Trip.Tucker was getting at.

    HTML:
    <div id="absolute-container">
      <div id="stuff"></div>
    </div>
    CSS:
    Code:
    #absolute-container {
     position: relative;
     margin: 0 auto; /* this will center the div */
    }
    #stuff {
     position: absolute;
     top: /* whatever */
    }
    Something I've messed with, but haven't tested too much is to something like (using only the stuff div from above),
    Code:
    #stuff {
     position: absolute;
     left: 25%; right: 25%;
    }
    I know there's certain times this won't work at all, but other times it will work perfectly even in IE.
     
  5. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #5
    I think I got it:

    Code:
    body {text-align: center;background-color: #E7E8EB;}
    #container {margin-left: auto;margin-right: auto;width: 570px;text-align: left;position: relative;}
    
     

Share This Page