The Hickensian

1.09.03 vertical & horizontal centering 2

4 comments
Tagged with: css, design, webstandards, xhtml

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing

to stop this. At last, most users can see the all content if they scroll.

Here’s the new CSS:

#horizon {

background-color: transparent;

position: absolute;

top: 50%;

left: 0px;

width: 100%;

margin-top: -200px;

text-align: center;

min-width: 900px; 

}
#wrapper {

margin: 0px auto;

background-color: #fff;

position: relative;

text-align: left;

width: 900px;

height: 380px;

}

You’ll still need to use absolute positioning to get the vertical centering, and an outer

(#horizon in this case) in which to centre the content. (The position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats). Min-width/max-width is one of those really useful CSS properties, that would help in designing fluid layouts – if only more browsers supported it.

I’ve also reduced the height of the main area so that it fits within most browsers at 800×600 with lots of browser chrome. All in all, its still not perfect, but its a lot better.

If you prefer, the other option is a ‘diet’ version of hicksdesign – a basic stylesheet, with larger type and a fluid layout (no scrolling DIV’s).

Finally, one thing I’ve discovered: To make it easier to edit lists where whitespace has to be removed to avoid extra line spacing (IE Win whitespace bug), use the ‘format’ utility in BBEdit. Switching between ‘gentle hierarchal’ (for editing) and ‘compact’ (when you’re ready to upload) has really helped me work with my large menu code where I use

Comments | RSS

No.1

∞ JTG said 2353 days ago:

Welcome back Jon!
And you're back with interesting tips... and with a nice new menu.
What have you drunk on holiday? css cubalibre and xhtml lemonade?
You may offer... :-)

No.2

∞ Jon Hicks said 2353 days ago:

Thanks JTG! It was more like php real ale...

I'm going to be fiddling with the menu some more soon. I was hoping to have some more time to work on cosmetic bits for the site, but improving the centering thing took me a long time.