...

View Full Version : help centering layout



slipperyphish
11-20-2008, 03:10 PM
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!!

drhowarddrfine
11-20-2008, 03:44 PM
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.

slipperyphish
11-20-2008, 03:57 PM
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?

Darkmatter5
11-20-2008, 05:06 PM
CSS


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


<!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.

Doctor_Varney
11-20-2008, 05:11 PM
<body>
<div id="pagewrap">

..the rest of your site...

</div>
</body>


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... :thumbsup:

Hope this helps,

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Darkmatter5
11-20-2008, 05:19 PM
Doctor_Varney,

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

jhaycutexp
11-21-2008, 06:08 AM
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..

Doctor_Varney
11-21-2008, 07:41 AM
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.

jhaycutexp
11-21-2008, 08:23 AM
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..


*{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..

Doctor_Varney
11-21-2008, 09:12 AM
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...



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,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum