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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help centering layout

    Hi, I recently made a website using CSS but I am having a tough time doing the simple task of centering the layout... The website is http://www.walkoftheearth.com

    I have found some tutorials on the web on how to center but none of them seem to work because I used absolute positioning to create my layout. Can someone please help? If it would help to figure this out I will post my style sheet.

    Thanks!!

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Couple ways to do this but I didn't test it on your page.

    1) Remove the absolute positioning from everything and wrap the whole with a <div>. Then add 'margin:0 auto' to that wrapper div.

    2) Remove abs pos from everything and add 'margin:0 auto' to each of those same elements.

    Like I said, I didn't try it but it might work just like that.

    EDIT: SCRATCH THAT!
    Just tried it quickly and it scrambles things up. The typical way to center things is using 'margin:0 auto' like above using a wrapper around the interior elements. You must have other things going on that make that fail but it gives you something to try.
    Last edited by drhowarddrfine; 11-20-2008 at 03:48 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm couldn't get either of those to work..... when I remove the absolute positioning the whole layout just falls apart and looks like no style sheet is applied. What type of positioning should I use instead? What am I doing wrong?

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    CSS
    Code:
    html, body {
        height: 100%;
        margin: 0 auto;
    }
    #wrap {
        min-height: 100%;
        width: 90%;
        z-index: 1;
        margin: 0 auto; /*centers this master-parent div*/
        background-color: blue;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <div id="wrap">wrap</div>
    Make sure you put the "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">" line above the <html> tag and this should center things. In doing this you are making all browsers work in a W3C standards rendering or something, I think by default IE works in some strange buggy rendering standard and won't render the divs correctly. If you don't put that line in the HTML page Firefox and all other browsers will render the divs fine, but since IE sucks, you have to put this line in.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Code:
    <body>
    <div id="pagewrap">
    
    ..the rest of your site...
    
    </div>
    </body>
    Code:
    CSS:
    #pagewrap{width:500px; position:absolute; left:50%; margin-left: -250%}
    Here, you take the width you want the page wrapper to be and halve it, to find the negative left margin. It never fails to centre your project on the page. Bang on, every time!

    Next, remove all of that absolute positioning - from everything! Replace with margins and use floats, where necessary, remembering to clear the next element down, after a set of floats.

    This method works for me. Frustrating at first, while you're working it out, I grant you, but try it - it's worth it. The result is simple and elegant.

    For more information, check out:
    http://www.wpdfd.com/editorial/thebox/deadcentre4.html
    http://www.w3.org/TR/CSS2/box.html
    http://www.w3schools.com/CSS/css_classification.asp

    Just gettin' on down to the sounds on your site, whilst compiling this. Most enjoyable to have music while ye work...

    Hope this helps,

    Last edited by Doctor_Varney; 11-20-2008 at 05:18 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Doctor_Varney,

    Sweet, thanks! It worked great and fixed another problem I was having. Thanks that technique worked better then my idea.

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    i say no to absolute positioning..

    when centering just apply a width to your div that holds the whole page, and then.. apply auto margins.. simple as that..

    your gonna have problems with absolute positioning.. mark my words..

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by jhaycutexp View Post
    i say no to absolute positioning..

    when centering just apply a width to your div that holds the whole page, and then.. apply auto margins.. simple as that..

    your gonna have problems with absolute positioning.. mark my words..
    Can you elucidate...?

    No problems with that so far - as long as the centered-wrapper div is the only absolute positioned div you use. I've had more problems with 0 auto margin centering and therefore use text-align:center to center a div's content, which also has not failed as yet.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Can you elucidate...?

    No problems with that so far - as long as the centered-wrapper div is the only absolute positioned div you use. I've had more problems with 0 auto margin centering and therefore use text-align:center to center a div's content, which also has not failed as yet.

    i say this cause most definitely, not all users have the same browsers, and as of now, browsers have their "OWN" way of rendering styles, like for example, ie and firefox, ie renders about 1 or 2 more pix than firefox, so if you do your absolute positioning .. things may look differently..

    in this case, were centering a div right? and you are using the absolute position, on your pc with a resolution of lets say...1024x768.. how about when a user view your page and he uses have a screen resolution with 800X600 or even higher than your resolution, .. this will most likely make your page look like a total mess..

    in short, browsers, they have different standards on how they will read your style or css.. so what you want to do, is to develop a way...in which your page will support all resolutions..

    in layman's term you should make your page more flexible..

    for me, i only use absolute position when cheating.. or if there's no way around in terms of layout...

    here's the proper way of centering a page.. this is my way..
    Code:
    *{margin:0;
      padding:0;
      }
    
    body{text-align:center; <--hack for ie browsers.. to position it into the center
           }
    
    #wrap{width:800px; <-- lets just say
              margin:auto;  <--position the page in center
              }
    i guess that's it..

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Cheers, jhay. As I'm always still learning, I value the opinions of others. This is just my reasoning, based upon the results I have so far, so I'm not disagreeing with you, but...

    Quote Originally Posted by jhaycutexp View Post
    in this case, were centering a div right? and you are using the absolute position, on your pc with a resolution of lets say...1024x768.. how about when a user view your page and he uses have a screen resolution with 800X600 or even higher than your resolution, .. this will most likely make your page look like a total mess..

    in short, browsers, they have different standards on how they will read your style or css.. so what you want to do, is to develop a way...in which your page will support all resolutions..
    Yes, with absolute pixels I'd agree, but as far as I'm aware, browsers don't tend to have differing ideas on what a percentage is. And since we're using them, I'd say the rules are pretty solid: 50% is 50%, anywhere you go, however large a pixel is. Ergo: centre. (I haven't yet heard of a browser which won't support negative margins, though if I did, I suppose I'd be quite worried!)

    I find the global margin fix, * {margin:0; padding:0}, tends to eradicate the pixel-adding of IE.

    Otherwise, I admire your reasoning, re: flexibility.

    Cheers,
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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