Post Archive
› September 12, 2003
Listutorial - step by step list tutorials
Listutorial takes you through the basics of building CSS lists with "background images for bullets" and "simple rollovers" with a few variations along the way.
Comments
1. September 12, 2003 03:10 PM
2. September 12, 2003 11:02 PM
liorean Posted…
Maybe not entirely relevant, but anyway...
Russ, regarding my list submission: Maybe you should link up the document I sent you as a more complex example. I don't think my comment is actually that accurate any longer, the way you do it. (In your list all list items are the same vertical size.) Besides, my experimental page actually only renders in moz. Op and saf won't style it (haven't got the needed support for CSS3 selectors) and iew will try to download it (doesn't support 'application/xhtml+xml' content type).
3. September 13, 2003 01:07 AM
Russ Weakley Posted…
Liorean
Happy to move it out of that section of the site if you want. I think your idea of a new section within Listamatic for more experimental lists is a good one. A resource section, with a series of external links only.
The limitations of the Listamatic are becoming more apparent over time. The aim of Listamatic was to gather as many of the cool CSS lists as possible and present them in one spot. I wanted the site to be a resource and training aid for web developers (which is why there are also some simpler list models available) and also a simple showcase that allowed people to see the power of CSS.
An important aspect for both of these aims is that the HTML code had to be the same. For resources, it allowed users to compare the lists on the same bit of code - making it easier to figure out what is going on. For the showcase, the lists had to be based on one list model so users could see the power of CSS.
The problem with using the same HTML code for all lists is that many of the lists had to be modified - taking them out of context and forcing them into a simpler model. First of all, people have already come to the site and taken slabs of code without realising that it has been modified (despite many mentions of this on the site). This can cause them problems if they try to apply it directly to a new site. Secondly, the model is severely limiting to more experimental lists.
So, a new section will be established soon that is simply a list resource - a link-out. Anyone can submit a link to be included.
While I am happy to do this, I do not want to discourage people from submitting a list to the site. It is a great exercise in CSS skill, to make a nice list from such a simple model. And many of the people who have submitted lists have proved it can be done.
So, send me your lists via the listamatic submit form.
4. September 13, 2003 05:14 AM
5. September 13, 2003 08:23 AM
liorean Posted…
Actually, the name "strange ordered multilevel list" is not even correct any longer with your modification...
6. September 14, 2003 03:11 AM
Russ Weakley Posted…
Anne, both Listamatic and Listutorial cover list-style-image:
Listamatic: Using images for bullets
Listutorial: Why use background images for bullets?
Liorean, your list submission on Listamatic has now been modified and points directly to the version on your own site, as requested.
7. September 14, 2003 02:58 PM
liorean Posted…
Russ: Oh, sorry for that confusion. That page only renders in moz. The page I wanted you to link was rather <http://liorean.web-graphics.com/css/list/>, which will render in all post-nn4 browsers. The link you used is targeted at gecko only, so I've used all the css3 I wanted.
8. September 14, 2003 04:50 PM
Russ Weakley Posted…
Liorean, no worries. All link references have been edited and now point to the correct page.
Nate Posted…
Wow, well done Russ. This is just the type of thing that can be so helpful for folks learning how to put CSS to good use.