Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23
  1. #1
    Junior Member stelvis's Avatar
    Join Date
    May 2004
    Location
    Gulset, Skien, Norway
    Posts
    19
    Member #
    6102
    Im trying to "center" my site. Til now i'm using:
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20%;
    Because it makes the site look good in 1024x768. But when I try it in other resolutions it is floating around like a ship gone astray! :angry: Anyone?
    Less is more!
    My site:
    http://pedersen.port5.com/

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Center it putting the CSS of the DIV or TABLE containing everything to:
    Code:
    margin-left:auto;margin-right:auto;text-align:left
    and set BODY's CSS to:
    Code:
    text-align:center
    The text align is a IE hack. And you have to set it back to left inside the container DIV because otherwise it's inherited

  4. #3
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    <style>
    .center { margin: auto 0; }
    </style>

    <div class="center">
    <!-- Anything here will be centred. -->
    </div>

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    trico's got it! but you might want to specify a width as well.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Quote Originally Posted by karinne
    trico's got it! but you might want to specify a width as well.
    Well, that method doesn't work in old browsers (IE5 or older). I've proven it

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by xarst
    Well, that method doesn't work in old browsers (IE5 or older). I've proven it
    and that's why you need the box model hack

    this might be of some help also

    http://www.thenoodleincident.com/tut...son/boxes.html
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    I wasn't going to repeat text-align: center; because you'd already written it. I just wrote the former part in a shorter method.

  9. #8
    Senior Member
    Join Date
    May 2004
    Location
    Hawaii
    Posts
    106
    Member #
    6059
    how facinating.
    try this.


    body
    {
    margin:0;
    padding:0;
    }
    #main
    {
    margin:auto;
    width:670px;
    height:auto;
    }

    There a centered object. give it a border for testing purposes so you can see what you have done, you may need to put something into the #main div to get it to appear right off.

    also check your doctype
    my page uses
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    but i would recommend at least this one
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    if you do not have the last part "...loose.dtd".... then it wont center.

  10. #9
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Quote Originally Posted by Trico
    I wasn't going to repeat text-align: center; because you'd already written it. I just wrote the former part in a shorter method.
    OK

    BTW- Just FMI (For My Information), when you only use two values ina CSS property like margin, the firs is up-down and the second left-right or viceversa?
    I suppose it's firs up-down then left-right, as it goes clockwise

  11. #10
    Senior Member
    Join Date
    May 2004
    Location
    Hawaii
    Posts
    106
    Member #
    6059
    its
    top right bottom left
    margin: 5px 3px 4px 1px;
    or only two values
    topbottom leftright
    margin: 1px 5px;
    or one valie
    topbottomleftright
    margin: 5px;

    i believe there is a thing about using three numbers
    topbottom left right.
    its something like that i forget.
    anyway there you go FYI FMI


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com