Centring Typophile Pages?

Bendy's picture

For those of us with wide or hi-res screens, Typophile's pages appear on the left side of the screen. Ergonomically (and aesthetically) it might be better to have the content appear centrally, rather than having to have the neck or screen turned all the time to one side. Here's what I mean, now and suggested:

Do any other users think that would be nice?

Mat Lucas's picture

Would be a good option for me since I work on a 16:10 ratio.

Mat.

riccard0's picture

I think it’s mostly an aesthetic preference.
I, for one, start reading from the left anyway ;-)
Also, one could always resize and place the browser window.

Jared Benson's picture

I've had this one in the works, but it's tricky with our fussy CSS - watch for a change like this to roll out with a bigger site redesign effort.

Bendy's picture

Fingers crossed you can do something about the homepage when you relaunch too :)

riccard0's picture

Admittedly, the resizing windows way could work better on Mac OS (where the maximize button expands the window just to show all the content) than on Windows (where said button lock the window to take up all the screen).
Anyway, seeing you use Firefox, if you want, I can conoct a quick & dirty user stylesheet that centers the content of Typophile.

Bendy's picture

Wow, that would be fabulous! Thanks Riccardo. :)

Arno Enslin's picture

Please keep it decentered as it is, because in my opinion centered pages lower the readability. When the page is centered you have another contrasting area.

AzizMostafa's picture

Please Keep it as it is.
That allows me to tile 2 Typophile pages vertically.
Thanks with Flowers

riccard0's picture

Sorry for the dealay. As I said, “quick & dirty”:

html
{text-align: center;}

#wrapper
{text-align: left;
margin: auto;}

#sidebar-right
{left: auto;
right: 0;}

Obviously, the trickiest part is the sponsor’s column ;-)

Bendy's picture

Thanks Riccardo. I've been playing with your code and finally figured out why the sidebars were not moving to appropriate places — need the !important tag in there.

Here's what I came up with for my 1680x1050 screen:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.typophile.com") {

html
{text-align: center;}
#wrapper
{text-align: left;
margin: auto;}

#sidebar-right
{position:absolute;
left:1340px!important;}

#sidebar-left
{position:absolute;
left:952px !important;}

That's my first time doing anything with CSS, (I didn't even know you could have user stylesheets) so this is probably quite poor/untidy. Sidebar-left takes care of the Prolific Posters and Wiki Recent Edits sidebars.

riccard0's picture

I’m glad it helped! :-)
(and also am glad it gave you the chance to play with CSS ;-)
I’m sorry I didn’t take into account #sidebar-left.
Your code isn’t particularly untidy, but it works only on your monitor (or one with the same resolution) and only in a full screen window.

Frode Bo Helland's picture

Cleaning up the HTML/CSS for Typophile doesn’t really seem like that big a job. I mean, the structure is pretty simple. I assume it’s a bit of a mess with all the extra features added over the years, yes, but you could easily think of the current site as a mock-up in Photoshop. For centering a fixed width div tag inside the body tag, try margin:auto;.

What happened to the text size, btw?

nina's picture

"Cleaning up the HTML/CSS for Typophile doesn’t really seem like that big a job. I mean, the structure is pretty simple"

Have you seen (in the source) how many stylesheets there are?
My point being that the structure of a web site (and especially CSS, actually) can very well be much more complex to build/manage than the net result that you see on the front end.

"What happened to the text size, btw?"

Probably related to this? http://typophile.com/node/76751

Bendy's picture

I'm not a programmer, but even I could tell the CSS has been bolted together over the years: it looks horrendous. It would seem easier to rip it all out and start again.

Frode Bo Helland's picture

Have you seen (in the source) how many stylesheets there are?

Yes, and that’s exactly why I’m saying it. Instead of patching the old system, why not forget about do the front end from scratch? Can’t be more than a days work.

Edit: Who disabled the blockqoutes?

Frode Bo Helland's picture

I’m apparently dyslectic and I can’t edit my previous post.

Arno Enslin's picture

There are links to 17 CSS files in the source. 17!

aluminum's picture

"Cleaning up the HTML/CSS for Typophile doesn’t really seem like that big a job"

It's always a big job. Most sites are rendering the HTML from a back end system that isn't always the easiest thing to change.

Typically, it's easier to start over from scratch rather than to 'clean up'.

"Can’t be more than a days work."

That sounds like a clientsfromhell.net quote. ;)

dezcom's picture

Please leave it flush left as it is now.

Frode Bo Helland's picture

That sounds like a clientsfromhell.net quote. ;)

I’m not trying to sound smart or anything, but this really isn’t that big a job. Obviously, some of the HTML might be generated by the back end system but the main structure probably isn’t. Even so, if Typophile use PHP or ASP, the back end system typically does not generate the HTML — it would rather loop/reuse snippets of code from the HTML files. What the biggest problem usually is with old systems is the mess of conflicting CSS styles that have accumulated over the years.

nina's picture

If it was just a matter of adding one instance of "margin: auto" in one place, honestly
I would trust the people who have built this rather complex site to figure that one out. Not to be snide, but that seems a bit presumptuous really.

Frode Bo Helland's picture

Nina, obviously not. That was only a comment to Bendy, but I see he's figured that one out himself.

aluminum's picture

frode, you're making a lot of assumptions there. In an ideal world, those would be correct assumptions, but I've learned to never assume the software is doing things the 'right' way as I've found 9 times out of 10, it isn't.

Frode Bo Helland's picture

Yes, maybe I am. I have the bad habit of speaking before thinking :/

Bendy's picture

Oh, I have that habit sometimes too. Also the one where you say something too loudly about someone you didn't realise was present.

Syndicate content Syndicate content