61 Re: Should more ALA articles admit fallibility?

Josh, you posted while I was writing the above. You might want to read http://www.alistapart.com/articles/wayitssupposedtowork/ , which we published only a few weeks ago.

In Nandini’s article, as in most ALA articles, an author is explaining his or her own solution to a problem. No one’s presenting it as definitive or sacred, and certainly not as infallible — and if we didn’t want collaboration and discussion, we’d close the forums.

posted at 03:18 pm on February 18, 2005 by Erin Kissane

62 Bulleted Lists - Not a new idea

Holly bergevin and I did a piece on this idea some time ago:

http://www.communitymx.com/content/article.cfm?cid=27F87

..but we did not originate the idea, we lifted it from Paul Novitski:

http://novitskisoftware.com/test/multiplecolumnsEms.html

..and also Alex Robinsion:

http://www.fu2k.org/alex/css/cssjunk/ListColumns.mhtml

In fact another author independently wrote about it elsewhere, the same week we did.

Personally, I like the idea, but the small height variances from col to col kinda ruin it for me. Oh well.

posted at 03:33 pm on February 18, 2005 by Big John

63 Further reading

[url=“http://www.stuffandnonsense.co.uk/archives/css_hold_the_front_page.html”]Mr Malarkey[/url] did something similar, certainly worth a look.

posted at 11:56 am on February 19, 2005 by Graham Bancroft

64 a SURGEON?

waitaminute—

the author QUIT surgeory to become a systems engineer?! (as if new zealand wasn’t small enough…)

posted at 02:26 am on February 20, 2005 by Everett Lindsay

65 The Solution

I’ve got a solution (untested) for making the list run vertically and split, without splitting the element:

td {
width: 50%;
position: absolute;
/* set margins, list styles, etc. */
}
td+td+td { /* two items in first column */
margin-left: 50%;
}

Two main problems: the code needs to be modified for different sized lists, and it uses adjacent selectors, which IE doesn’t support (though I think IE7.js could fix that). The second column also needs to be longer than the first to avoid the following paragraph from overlapping the absolutely positioned left half. Though margins could be used to work around this problem.

posted at 06:28 am on February 20, 2005 by exclipy

66 semantics and separation

One very very easy way to ensure that you’re properly marking up your content semantically is to completely ignore presentation (layout, styles, etc.) until you’re finished writing the content.

Mark up the content properly, assign ids to each division, and you can style it with CSS later.

This avoids problems with splitting a single list in two, adding presentational classes like “left” and “right” (What if you styled them to put the left class items on the right and vice versa? How does the markup make sense then?), and enables you or someone else to alter the layout simply by changing the style sheet – for a redesign you should not need to touch the content code.

There’s no need to break up the lists in two here. If you’re already resigned to altering the content markup then what’s wrong with floating the list items and reordering the list manually (or via javascript)? Isn’t that faster, easier, and cheaper (not to mention semantically more correct) than the proposed solution in this article?

posted at 03:31 am on February 21, 2005 by Jough

67 Now do the same thing but without px sizing...

A request to all authors of articles to be published here is to make your articles much better exemplars to those out there learning from them:

Don’t use px sizing!!!

Please. No really, it’s bad.

For poor schmucks like me who actually have a nice, high-res monitor, I can only see about 6 or 7 words across in the 597px defined as being the width of the ALA main column.

Similarly, the examples in this article hard code the list items to 400px wide in a 800px wide box… with 15px padding.

Surely, we’ve all learnt to use percentages and the occasional ‘em’ or ‘ex’ by now? This is about basic usability, not fancy formatting.

posted at 07:39 pm on February 21, 2005 by Stuart Prescott

68 to be frank

First, I’m not frank.
Second, many of the “what if the client wants it this way” or “that way” statements don’t apply to this article. Why? Because it appears the author’s client wanted <ul>s, not <ol>s. As a developer we have to use judgement and treat each design differently when we’re laying it out. This is one way of doing it, although I would have simply used • and discarded the use of the <ul> and its <li>‘s entirely- yet its nice to know that there is more than one way to utilize <ul>.
Third, I love this site. Keep it up.

posted at 08:48 pm on February 21, 2005 by brandon

69 Question...

I have one question which is not directly related to this article, but to the site you mentioned at the end of your article (and I’m asking because I suppose that you’ve designed it). The question is:

On the top of this site you can see some links: “home”, “products”, … Next to each link there is a small icon. These icons are not part of the html, they are defined in the CSS and they are displayed as background images. This causes one serious problem: If you print the site, these icons do not appear!

I wonder if there is a solution to this problem (of course I can tell my browser to print background images, but I want a way the designer can influence the printing behaviour with CSS).

The same problem occurs to many style sheets shown in the CSS Zen Gaarden: Most style sheets replace some headlines with graphics. These graphics would never be printable because they are background graphics.

If anyone has a solution to this problem, I’d love to read it in a new article for ALA.

posted at 10:09 am on February 22, 2005 by Marcus

70 Simple than all of this

The solution for getting columns of list items really is simpler than all of you are making it out to be. Moreover, you can do “in order” if you wanted.

In fact, this is a fairly common request, so common that it lead to a faux-column example:
http://cssirc.com/codes/?code=30#ordered-columns

The solution is fairly simple:

#ordered ol, #ordered li { margin: 0; padding: 0; display: block;
} #ordered ol { position: relative;
}
/* creates the “first column” */ #ordered li { float: left; clear: left; width: 50%;
}
/* creates the “second column” */ #ordered li.col2 { /* basically UNDO everything set above */ float: none; clear: none; width: auto;
}
</pre>

posted at 11:45 am on February 22, 2005 by Mike