A List Apart (ALA) is a magazine that aims to give advice to people trying to implement standards based web sites without sacrificing creativity in design. Since 1998 they have published many useful articles, including Taming Lists, from which this article takes its name.
[August 2005] ALA has rebranded and redesigned so this article is now of only historical interest. With the advent of site specific User CSS in Gecko and User JS in Opera the sort of approach detailed below is less relevant today than it was eighteen months ago. However, the new ALA design is still fixed width so maybe an update is called for...
In October 2003, ALA unveiled a new look to their web site. The first thing that struck me was that the content had been squeezed into a narrow column - narrower than I would prefer to read (BTW I have a minimum font size set in my preferences in Opera and hnece ALA's tiny font size becomes somewhat larger; which means that the narrow columns cause short line lengths). ALA’s FAQ gives a reason for the narrow column that is not very satisfying, and indeed some might even consider it a fine example of double-think. They then go on to say the following:
Will you offer a switchable alternative layout that does not use fixed widths?
No, but ALA’s layout is CSS-based and our articles share a common id attribute to thebodytag, so if your browser provides the option to “Use My Style Sheet” you can adjust ALA’s look and feel to fit your fancy.
That sounds like a challenge doesn't it?
If you're not interested in the details, or want to see what you're getting before investing time in reading more, then skip ahead to the finished product.
My first step was to find the "common id attribute to the body tag". For the articles this turned out to be sectiontwo and for the other sections of the site it was sectionone through to sectionfive. The examples below just use the sectiontwo case for brevity. The stylesheets provided at the end use all five so as to ensure flexible, pleasurable reading of the whole site.
For reference, the ALA stylesheet can be found at http://www.alistapart.com/c/ala.css.
[January 2004] There's also a sectionsix used for the 404 page, and possibly some other housekeeping pages. The stylesheets have been updated to reflect this.
[January 2004] The multiple styles using #sectionone through to #sectionsix can be avoided if your browser supports attribute selectors. As all ALA pages have a JavaScript that alters the the status bar message (yawn, so 1996, and anyway my browser doesn't even have a status bar at the moment) then the selector
body[onload*="A List Apart"] should match the body element of every page on the site. Thanks to Brian on comp.infosystems.www.authoring.stylesheets for pointing this out.
Moving inwards from the body element where does the fixed width nature of the site first get established? With the <div id="wrapper"> which sets the width at 599px or 597px depending on which box model is in use. Clearly this has to go. So in comes
a width: auto !important;.
But that gets rid of the nice margins around the content section of the page. These were produced by margin: 25px auto; and by the rules of CSS width: auto; trumps margin: auto;. Now, we don't like those hard coded pixel margins anyway, so let's use margin: 2em !important;. Much better.
The two columns used for the content are <div id="maincontent"> and <div id="sidebar">. The first of these has a width of 390px (or 410px for broken box model browsers) and is floated left. The second then has a left margin of 420px. We now need to replace these with percentages. Making the width of the first column 65% and the margin of the second 69% works well for Opera and Mozilla. But MSIE, even IE6 in standards mode, makes that margin wider than it should be. 64% works best for IE6 and 65% for IE5.5.
Putting this altogether into a single stylesheet, with some hacks to feed different values to different browsers (in case you want to link multiple browsers to a single user stylesheet) we end up with the following:
#sectiontwo #wrapper
{width: auto !important; margin: 2em !important;}
#sectiontwo #maincontent
{width: 65% !important;}
/* MSIE */
#sectiontwo #sidebar
{margin-left: 65% !important; width: auto !important;}
/* Moz and Op */
html>#sectiontwo #sidebar
{margin-left: 69% !important; width: auto !important;}So far so good, and if all we were interested in was making the column widths flexible that would be the end of the story. But we'd like to keep as much of the ALA design ethos in place as possible, and our changes so far have caused a few elements of the design to become unstuck.
The dividing line between the two columns is actually a background image. There are good reasons for ALA doing this - it allows the line to reach all the way to the bottom border of the navigation bar regardless of the top margin on the content sections. It also allows the line to be the full height of the content, regardless of which column is longer; something that a border set on one or the other column can not do.
But now the line runs through the middle of our text (unless we have our window width at the exact size that makes our layout match the ALA one), which isn't very nice to look at.
Now if ALA themselves were producing this flexible stylesheet they would be able to produce a different background image and use the background-position property to put it in the right place. We don't have that luxury so we'll make a small compromise on the design and use a proper border instead.
#sectiontwo #wrapper
{background-image: none !important;}
#sectiontwo #maincontent
{border-right: 1px dotted #ccc;}
#sectiontwo #pagebody
{border-top: 1px dotted #ccc;}Yes, it's different. But unless you knew the ALA design very well, or were looking at the two layouts side by side you probably wouldn't notice. It is certainly in keeping with the design philosophy of ALA even if some details have been altered.
BTW, it's when we add this border that the differences in the margin size in MSIE becomes very apparent.
Now that we have the content of the page in a nice fluid layout it's time to turn our attention to the head of the page. The navigation looks a bit odd stopping after six hundred odd pixels when the content continues on to/has stopped already at the edge of the window. So once more we change all the pixel widths to percentages. And once more we need to send MSIE slightly different values.
#sectiontwo #menu ul
{width: 100% !important; }
#sectiontwo #menu ul li a
{width: 100% !important;}
/* MSIE */
#sectiontwo #menu ul li
{ width: 19.75% !important; }
/* Moz and Op */
#sectiontwo #menu ul>li
{ width: 20% !important; }In Mozilla and Opera the navigation fills all the available space. In MSIE it doesn't, but at least it doesn't wrap onto a second line as it would if we fed it the same value as the other browsers get.
The graphical headers for the pages are 597 pixels wide and images being images there's nothing we can do about that. However, there are two different approaches we can take to make them look a bit better (although only one works in MSIE).
By simply setting the background colour for the header to the predominant colour on the right hand edge of the image the we give the impression that the heading fills the whole width. This works better for some of the images than it does for other. And it doesn't help at all if your window is narrower than the the width of the image plus the various borders and margins.
#sectionone #header {background: #4D1827 !important;}
#sectiontwo #header {background: #004D68 !important;}
#sectionthree #header {background: #132336 !important;}
#sectionfour #header {background: #000000 !important;}
#sectionfive #header {background: #334D57 !important;}
#sectionsix #header {background: #000000 !important;}[January 2004] Whilst the above colours match the images used on the main pages for each section, other pages use other images. Hence individual articles don't all have background images that match the colour #004D68.
We can of course remove the image altogether via #sectiontwo #header img {display: none;} but this leaves nothing at all in its place. Better would be to have the alt attribute appear. So in Mozilla and Opera we can make use the content property.
#sectiontwo #header img:after
{content: attr(alt); }
#sectiontwo #header img
{height: 1px; width: 1px;}
#sectiontwo #header
{padding: 1em;}With the image gone (or at least reduced to a single pixel dot) the header is now as flexible as the rest of the page.
This final tweak is the one thing that ALA are most likely to object to. Adding the following style will hide the sponsorship message in Mozilla and Opera.
#sectiontwo #sidebar>p {display: none;}[January 2004] ALA have removed the advertising from their pages (at least for now - it's just commented out in the source code) making this style redundent.
[November 2005] Removed the example pages as they called in the CSS and images from the ALA servers, and hence are no use following the latest redesign.
These styles have been tested in Opera 7.21, Mozilla 1.5, Netscape 6.2.3 and 7.01 and MSIE 5.5 and 6.0. They don't work too well in MSIE 5.01, but then again the ALA site doesn't actually look very good in that browser either. If you do use these styles in a user stylesheet for IE5 then be sure to remove all the Mozilla/Opera specific child selector rules as they will cause problems.
I'd be very interested to hear from anyone who tests these styles out in other browsers and on other platforms. E-mail me at steve@pugh.net.
And here are CSS files with all the necessary styles: Coloured header and Text only header.
home > web development > taming a list apart