Centering web pages… the easy way
I had a great lesson in simplicity this week thanks to the centering of UW pages in the CLF issue. For the UW home page I used the technique described on Maxdesign. What this technique requires is a div#container for it to work. This is great but when it comes to the XTHML/CSS that runs the CLF this requires a number of changes that include:
- modify body tag to center text
- insert container div to CSS and XHTML
- modify right nav values
- modify #uwlogo values
- some other thing I can’t recall
In order for it to work on your CLF based pages you would need to:
- insert a div tag below the
bodyand close it before/body - update your template if you didn’t use server side includes
Well after yesterday’s session, Kevin Paxman (Graphics) emails me:
Maybe I’m missing something…but this worked for me as far as I could tell, with 5 minutes of testing in PCIE 6 and Firefox…
body {
margin: 0 auto;
position: relative;
}
Then the rest of the position: absolute’s can stay. I didn’t fiddle with PCIE<6, but it should degrade to left aligned gracefully, or you could text-align: center the body and text-align: left the necessary DIVs?
Guess what? It works. AHS and others have implemented this in their custom.css and it works like a charm. So what is the workflow now?
For Web Ops:
- insert margin and position elements to UWblank.css
For you:
- nothing.
Wow. Lesson learned, simple solutions often are the best. Now I am not entirely sure why that works for UW CLF based pages. I would think it was too simple, something must be wrong. But it works.
One thing: Watch the tags above your doctype – they throw IE into quirks mode and that is bad. So please make sure no tags come above the doctype.
Another thing: Some on a certain mail list have asked why position:relative in the body tag? Because if I don’t the UW logo will float to the left. The code is valid though.
Yet another thing: Seems Dreamweaver and Contribute don’t like this technique. Working a solution for those tools.