Dead Center help?

Discussion in 'CSS' started by kyllle, Jul 7, 2008.

0
  1. #1
    Hi all,

    Im trying to place my site dead center on the page and have added the following code to my page:

    #horizon
    {
    color: white;
    background-color: #0ff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

    But the top of my site now seems to stick to the center if the page which obviously means im doing things wrong, could anyone advise me were im going wrong??

    site http://www.glen-lodge.co.uk/quilly/quilly.html
     
    kyllle, Jul 7, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    steelfrog, Jul 7, 2008 IP
  3. Ulquiorra

    Ulquiorra Peon

    Messages:
    422
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This is why it aligned where it did:
     
    Ulquiorra, Jul 7, 2008 IP
  4. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The best way is called a 'Liquid layout'. I usually do place everything in a DIV class called .container.
    .container {
    margin-left:auto;
    margin-right:auto;
    width:1024px; (or whatever width u want ur page)
    }
    place everything on ur page inside a div like this

    <body>

    <div class="container">

    Your page elements

    </div>

    </body>
    </html>
     
    faithnomoread, Jul 7, 2008 IP