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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    Trying to center container

    Hi,

    Still learning CSS.. Getting there!

    I have purchased two theme's to get me going on upgrading my website.

    I have finished the home page which is one template, however I have tried combining two templates after login.

    Everything works fine, however once you login, the lower section (the 2nd template) is set to start right up on the edge of the page. Whereas i would like it to be centered just how the home page is prior to login.

    The URL is: http://www.citysidesports.com/cliftonhill/ and I have created a test username/pass for people to be able to take a look:

    Email: test@citysidesports.com
    Password: testpass

    I have tried numerous different things, however I'm driving myself crazy to try and work it out. It's probably very simple - but not for me! lol

    Thanks for any advice!

    Taylor
    Last edited by Taylor_1978; 11-02-2009 at 04:44 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Taylor_1978 View Post
    Hi,

    Still learning CSS.. Getting there!

    I have purchased two theme's to get me going on upgrading my website.

    I have finished the home page which is one template, however I have tried combining two templates after login.

    Everything works fine, however once you login, the lower section (the 2nd template) is set to start right up on the edge of the page. Whereas i would like it to be centered just how the home page is prior to login.

    The URL is: http://www.citysidesports.com/cliftonhill/ and I have created a test username/pass for people to be able to take a look:

    Email: test@citysidesports.com
    Password: testpass

    I have tried numerous different things, however I'm driving myself crazy to try and work it out. It's probably very simple - but not for me! lol

    Thanks for any advice!

    Taylor
    Try this addition:
    Code:
    .container {
    margin:0 auto;
    width:960px;
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    That does the trick... Or at least half of it.

    Now it has the background not lined up as you'll see.

    By the way, I can't believe it was that simple! Someone was discussing auto margins with me yesterday too.. UGH!

    Thanks Rowsdower.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try adding clear:both; to #footer
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Your background is applied to the body and relies on an image to create the appearance of both sections of the page - the sidebar and the main content - having full height (this is called "faux columns"). Since you are not using the template quite as intended you will need to adjust the method a bit to suit.

    Try this:
    Code:
    .container {
    background:#FFFFFF url(../img/bg.gif) repeat-y scroll 0 0;
    margin:0 auto;
    width:960px;
    And then adjust the body's CSS like so, to avoid complications on super-wide screens:
    Code:
    /*background:#FFFFFF url(../img/bg.gif) repeat-y scroll 0 0;*/ /*commenting this out since it really won't belong here any more */
    background-color:#e0e0e0; /*setting background color to match the left-hand side of the old BG image*/
    color:#333333;
    font-family:Georgia,"Times New Roman",Times,serif;
    font-size:12px;
    line-height:20px;
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Taylor_1978 (11-02-2009)

  • #6
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Bingo!

    Thank you very much!


  •  

    Posting Permissions

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