SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Location
    London
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Html/xhtml vs widscreen laptop

    Where do I start?lol

    Ive recently started out building sites (my own) and Ive encountered a problem..
    I use xhtml and css to design and it works great, I hate tables, but my problem came when I bought a widescreen laptop.
    The pixel settings is set to big thus my sites look like they are all clinging to the left and there is a wide open space to the right.
    I want to build my sites so no matter what setting you use you see the same thing.
    Then I thought...ok lets ad a <div align="center">, because my background is made up of what I need so with css I just place everything where it needs to be.
    http://www.freewebs.com/nattaliegeorge
    This worked fine, but I had to use relative positioning as absolute dont work,cause at work I get a different view cause of the smaller pixels settings.
    What I actually just want to know is...
    What do I do to build a site in the center of a browser, but still allows me to use absolute positioning and not using tables!!!
    oh and ive tried the doctypes...but my scrollbarr colors dont work then as xhtml transitional is for browsers that dont support css right?

    Any help will be greatly appreciated!

    Thanx!
    Havies

  2. #2
    SitePoint Member
    Join Date
    Nov 2005
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to center your site

    Hi,
    One way I do it is in the web page, have
    <body id="main_body">

    And then in your CSS, reference it using the following:

    body#main_body {margin: 0; padding: 0; text-align: center}


    Son't worry about putting a width in here, you can define the width of the main area in a container within the body tag.

    Jeff

  3. #3
    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)
    You can set a max width, and you should use margin: 0 auto if you're going to set one. IE 5.x and 6 won't recognize max-width though, so you'll have to use an expression (don't put it in your main stylesheet, either use a conditional comment to link to a separate stylesheet, or wrap the expression inside the * html hack, put that inside a separate stylesheet, and then @import that one into your main stylesheet).

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jeffrsmith View Post
    Hi,
    One way I do it is in the web page, have
    <body id="main_body">

    And then in your CSS, reference it using the following:

    body#main_body {margin: 0; padding: 0; text-align: center}


    Son't worry about putting a width in here, you can define the width of the main area in a container within the body tag.

    Jeff

    Why bother with the id?

    body {margin: 0; padding: 0; text-align: center}

    does the same thing without the need for the id as there can only ever be one body per page.

    The other thing is that text-alignn only aligns text except in IE5 where it incorrectly aligns blocks as well. To centre align blocks you need to set the left and right margins to the same value.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Havies View Post
    I want to build my sites so no matter what setting you use you see the same thing.
    There's no such thing as a website that looks the same on all computers. The trick is to make it look good on all computers. (And sound good on screenreaders).

  6. #6
    SitePoint Member
    Join Date
    Mar 2007
    Location
    London
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well all I did eventually was put a wrapper around everything I wanted center...

    #wrapper {
    width: 760px;
    margin:0 auto;
    position: relative;
    }

    And placed everything in absolute position inside the wrapper.
    Works fine and even shows up good in firefox!


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
  •