Variable Screen Resolution Centring Options

[HeartOfPandora]

I've seen a lot of layouts on CB that I like, but I'd like them a lot more if they were centred in my screen resolution (1280x800). It just looks funny to have a layout on the left of my screen when it's in the centre of a smaller resolution. I understand that those people are centring for 800x600, but it ain't that hard to centre it for all screen resolutions. Professional websites do it, loads of people on CB do it, hell even I do it when the layout calls for it (and I'm really lazy).

I dunno, I'm just whining about something I think every coder should know, I guess. It's 2am *lol*, what do you expect?

Not that hard to centre things, really. Take a 400x200 image banner:

CODE

#class {
position: absolute;
left: 50%;
margin-left: -200px;
...
}

Bam, it's in the centre of every screen. :] Putting something directly in the centre of a screen is easy, just set "left:;" to 50% and "margin-left:;" to exactly half of the width of whatever you're centring. You'd have to play around with the margin a bit more for things that are to the left or to the right of the centre line, but all you have to do is increase or decrease it depending on which side you want it to go to. Check for major browser compatibility (IE, Firefox, Opera...) and you're set!

Enough sleepy ramblings, anyone out there agree or are ya'll sleeping?

Reason for edit: Use [code] not [codebox] for smaller codes. Thanks. :) - Gabi

[fixtatik]

i was sleeping, but i'm with you 100% on this. it's not even just for centering layouts, though; it's the whole concept of the code that's making their layout. too many people just copy & past from a generator, slap on an image they found in google (or added some slanted lines in their stolen photoshop), and call it a masterpiece.

then again...even if you teach people how to center a layout, they'll still do it the wrong way. or they'll use two different percentages and wonder why when their screen isn't maximized their layout shoots in every which way.

and as far as myspace goes, i dread the day when myspace decides to switch to web standards instead of garbled HTML. hell's gonna break lose.

[schizo]

Moved to Designer's Cafe.

I agree with you when it comes to certain layouts, but there are others that the designer envisioned to be on the side. If the designer purposely aligned it to the side, then that was their design choice and you can't really criticize that. If someone just doesn't know how, then that's a problem. I'm surprised by how many people really don't know how to center their layouts. That question always comes up in the Myspace Support forum and PMs and messages I get.

[karmakiller]

If it is set up like a centered layout, then it should be centered. I agree.

[venti-anemoi]

I came to hate making center-aligned layouts because xanga + divs + center-aligned + alignment in all browsers and screen resolutions = a lesson in frustration. Tables makes it better, but designing it requires more thought because you have to think of how to blend the sides into the background or think up a cool border/transition or something. If a layout's right- or left-aligned, there's one less side to worry about. Plus, like schizo said, some designs just look better aligned to the side.

[pandemonium]

if the layout is meant to be centered then yes..

[creole]

I prefer centered. But sometimes right. :/

[mipadi]

It's easier than that; just do this:

CODE

#centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}