SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Centering my site ***Please Help***

    Hi all,

    Although Ive successfully been designing and developing sites for some time I have a consistent problem with working out how to centre my sites using absolute positioning in CSS. I have included my site for reference - see below (stripped code for simplicity) or see attachment for full site.

    I have tried many many tutorials and asked allot of people but cannot seem to work out what Im doing wrong. I was primarily taught CSS at uni and develop my sites using absolute positioning in CSS instead of tables, is this wrong and have I been passionately teaching myself the wrong way?... I hope not because i love CSS! Is there a way to centre a site the way I seem to be developing or do I need to learn tables? I have attached a basic site Im currently working on if anyone can please help me. Your help is much appreciated and thank you.

    Ross

    Below html code which has been stripped for simplicity. See full site in attachment.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.:: ENIGMA PROPERTY SERVICES ::.</title>

    <link rel="stylesheet" href="index_03.css" type="text/css" />
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    <script type="text/javascript">

    </script>
    </head>
    <body>

    <div class="background"></div>
    <div class="bg_image"></div>
    <div class="top_banner"></div>
    <div class="bottom_banner"></div>
    <div class="image_border"></div>

    </body>
    </html>



    Below CSS code which has been stripped for simplicity. See full site in attachment.

    .background {
    position:absolute;
    background-color:#74acdb;
    top:0px;
    left:0px;
    width:1500px;
    height:930px;
    padding:0px;
    z-index:1;
    }
    .bg_image {
    position:absolute;
    background-color:#ffffff;
    top:0px;
    left:100px;
    width:1222px;
    height:650px;
    padding:0px;
    z-index:1;
    }
    .top_banner {
    position:absolute;
    background-color:#ffffff;
    top:0px;
    left:100px;
    width:1222px;
    height:206px;
    padding:0px;
    z-index:1;
    background-image:url(images/top_banner_01.jpg);
    }
    .bottom_banner {
    position:absolute;
    background-color:#ffffff;
    top:650px;
    left:100px;
    width:1222px;
    height:277px;
    padding:0px;
    z-index:1;
    background-image:url(images/bottom_banner_01.jpg);
    }
    .image_border {
    position:absolute;
    background-color:#ffffff;
    top:230px;
    left:255px;
    width:213px;
    height:219px;
    padding:0px;
    z-index:2;
    background-image:url(images/image_border_01.jpg);
    }
    Last edited by longneck; Jun 18, 2009 at 06:56.

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Surround all your elements with a division:
    Code HTML4Strict:
    <div id="wrap">
    <!--all your layouts elements-->
    </div>
    Name it anything you want, wrap is just an example. Then in the .css you can do this:
    Code CSS:
    #wrap{
      width:800px; /*--- must have a width ---*/
      margin:0 auto; /*--- this centers it ---*/
    }
    Hope it helps.

    Edit: Welcome to Sitepoint by the way!!!!!

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm.. it doesn't seem to work? Where in the HTML do i place the "wrap"?

    Do i need to include anything more in the CSS than what you've posted?

    <div id="wrap">
    <!--all your layouts elements-->
    </div>

    ******

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.:: ENIGMA PROPERTY SERVICES ::.</title>

    <link rel="stylesheet" href="index_03.css" type="text/css" />
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    <script type="text/javascript">

    </script>
    </head>
    <body>

    <div class="background"></div>
    <div class="bg_image"></div>
    <div class="top_banner"></div>
    <div class="bottom_banner"></div>
    <div class="image_border"></div>

    </body>
    </html>

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <div id="wrap"> tag would go before your <div class="background"></div> tags, and the </div> tag would go after your <div class="image_border"></div> tags.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry but for some reason it's still not working? This is what I've done. It seems so simple but i can never get it to work for me.

    ******

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.:: ENIGMA PROPERTY SERVICES ::.</title>



    <link rel="stylesheet" href="index_03.css" type="text/css" />



    </head>
    <body>

    <div id="wrap">

    <div class="background"></div>
    <div class="bg_image"></div>
    <div class="top_banner"></div>
    <div class="bottom_banner"></div>
    <div class="image_border"></div>

    </div>

    </body>
    </html>


    ******
    CSS below

    ******

    @charset "utf-8";
    /* CSS Document */

    #wrap{
    width:1222px; /*--- must have a width ---*/
    margin:0 auto; /*--- this centers it ---*/
    }

    .background {
    position:absolute;
    background-color:#74acdb;
    top:0px;
    left:0px;
    width:1500px;
    height:930px;
    padding:0px;
    z-index:1;
    }
    .bg_image {
    position:absolute;
    background-color:#ffffff;
    top:0px;
    left:100px;
    width:1222px;
    height:650px;
    padding:0px;
    z-index:1;
    }
    .top_banner {
    position:absolute;
    background-color:#ffffff;
    top:0px;
    left:100px;
    width:1222px;
    height:206px;
    padding:0px;
    z-index:1;
    background-image:url(images/top_banner_01.jpg);
    }
    .bottom_banner {
    position:absolute;
    background-color:#ffffff;
    top:650px;
    left:100px;
    width:1222px;
    height:277px;
    padding:0px;
    z-index:1;
    background-image:url(images/bottom_banner_01.jpg);
    }
    .image_border {
    position:absolute;
    background-color:#ffffff;
    top:230px;
    left:255px;
    width:213px;
    height:219px;
    padding:0px;
    z-index:2;
    background-image:url(images/image_border_01.jpg);
    }

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, absolute positioning - give #wrap position: relative; to put everything inside it relative to that instead of the viewport

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked a treat WOW!!!

    As simple as it is it took me ages to find out that. Thanks heaps!!!

  8. #8
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dang sleep! I missed out on all the fun, thanks for taking up the slack Dan.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks peeps


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
  •