Copy & paste the code below to embed this comment.
Rob Waring
Is that IE 5 or 5.5? Cause the w3schools try-it works on IE6. I would have thought bolting the two together so you have list-style-image for all the li’s and then direct style the ul’s would work and be a bit cleaner?
We’ve looked at something similar, but found the Windows-style folder view metaphor to be a problem—users became quite annoyed that they could not open and close the folders, and the content team (not comprised of web designers) complained bitterly that they could not drag the files/folders to the trash or rearrange them.
Copy & paste the code below to embed this comment.
GC
I’m sorry to have such a basic question, but I’ve never seen something before or considered it.
What is the rational for placing a ul element inside a li element? I’ve always had them nested inside other uls. Just curious. Any links to discussion on this convention?
GC, see this http://zvon.org/xxl/xhtmlBasicReference/Output/el_ul.html
In valid xhtml, an <li> must be closed with </li>
The only child of an OL or UL is LI, so a UL can’t be a child of a UL, but it can be a child’s child (therefore <ul><li><ul>…).
Copy & paste the code below to embed this comment.
GC
Thanks, Jim, I see it now. It was just a really weird thing I had never considered before. Funny, I got so used to seeing sloppy html tutorials where the lis were not closed I assumed that the ul was a child of a ul. I never read (or looked for) a clarification.
Copy & paste the code below to embed this comment.
Alfredo Fernández Díaz
“The first example I ever come across of…”
Hm. I already made “an icon-styled unordered list made exclusively with CSS” at http://www.os2world.com/wpidistro/en/status_t.htm
almost two years ago – I was beginning with CSSs so I used simple list-style-image and more classes for different kinds of containers and packages…
I never thought I’d find something like this in ALA.
Interesting comment from Miriam about computer-illiterate users. Webdevelopers beware as well!
The article isn’t about creating nested unordered lists. It is about styling nested unordered lists in a way that is reminiscent of a folder structure.
You may want to reread the article.
Alfredo,
I wish I knew about your page last spring before I developed this article. I had been searching for this very thing for a long time and could never find anything,. I suppose i just wasn’t using the right search terms at the time. Thanks for the link. It’ll be nice for readers two see two methods of stylising the sitemap.
Copy & paste the code below to embed this comment.
Alfredo Fernández Díaz
Kim, thank YOU for the appreciation.
Of course you the ideas there can be re-used if you ar someone ever need several container/children types.
I tried and submit things like these to ALA several times but for whatever reason I never succeeded ;-(
and unfortunately I spend more time programming than doing web design things (any job offers, anyone!?) so I recycle them all the time in some other projects, where they are part of the actual thing, and therefore non-relevant for search engines: the page is #1 in Google when searching for “WPI Distro” but not for anything related with CSS styles.
Hopefully, some time in the future I’ll build a personal website with my stuff (webdesign related or not) properly categorized so next time everything appears on search engines ;-)
Copy & paste the code below to embed this comment.
Seth House
dusoft, Alfredo,
I’m not the author, however, I think you two missed the point entirely – Kim is being overly generous. Anyone can accomplish this effect just by throwing markup at the problem. The idea here is to pull this off with as little CSS markup in the HTML as possible. Being able to achive this effect with CSS on a plain HTML file is the Holy Grail we’re after, and this is why the article appeared on ALA.
Oliver,
What version of Opera? It looks fine to me in Opera 7.54.
Peter,
Using list-style-image was my first thought too. But it seems difficult or impossible to get the bullet image to be clickable using that method as well as some alignment issues between the browsers. SimpleBits references it a few times in some of their articles including the one linked in the story. Of course, if I’m mistaken I’d love to see a link to the technique.
Hmm, this reminds me of one of my earlier projects! Take a look at:
http://www.twinhelix.com/dhtml/checktree/
The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.
Anyway, it’s an example of a treeview control complete with “dashed-lines” (as in Windows Explorer) and plus/minus expansion icon indicators; the only real compromise I had to make was a CLASS=“last” attribute on the last LI element in each UL to get the dashed lines right, due to IE not supporting useful selectors (sigh). It uses similar margin-based layout to this article’s example for positioning background images; I hope you guys find it useful :).
Hmm, this reminds me of one of my earlier projects! Take a look at:
http://www.twinhelix.com/dhtml/checktree/
The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.
Anyway, it’s an example of a treeview control complete with “dashed-lines” (as in Windows Explorer) and plus/minus expansion icon indicators; the only real compromise I had to make was a CLASS=“last” attribute on the last LI element in each UL to get the dashed lines right, due to IE not supporting useful selectors (sigh). It uses similar margin-based layout to this article’s example for positioning background images; I hope you guys find it useful :).
Copy & paste the code below to embed this comment.
anon
Seems to be something funky with the way this redraws in IE6 – you end up with doubled up icons (ironically, exactly the thing you went to great pains to avoid).
I know its a minority browser but I thought it worth mentioning.
As I said, it has been months since I wrote the article. I have learned more about CSS since I wrote it. If I had to do it today, I wouldn’t use quotes for the background image.
“Why did you left-pad the li and then negative margin the li a the same amount?”
I don’t recall for sure. I believe it was because the anchor was pushed over too far or the background images were too far to the right. Had I written the article a couple of weeks ago, I could probably say for sure.
“Where have you been for the last 5 years?”
Again, I searched for something like this for months. If it was out there, it wasn’t SEO’d. I couldn’t find an example anywhere I looked, and no one I asked knew of one.
Is your declaration that article is obvious and small meant to be negative criticism? I was not aware articles on ALA needed to be subtle and large. Besides, if it was that obvious, why had no one else apparently documented it. Regarding basic errors, can you be specific?
anon,
IE6 was the first browser in which I tested it, and I did not see this problem. I just checked IE6 again (on two computers) and still don’t see double icons.
Copy & paste the code below to embed this comment.
anon
I guess the errors I am referring to are the not using UL UL and instead classing the root UL. Likewise with the quotations. Also see my note below about url(none).
I’m not sure how you would find it in a search engine, it’s kinda like searching for “adding a background image to a tag”, it’s obvious. ;)
I was not meaning to criticise the article for its size. I was just suprised that such a small article with tiny amount of CSS was able to published with the errors/issues described.
I can replicate the issue in IE6, on load the second Edmonton Campus (the one that is a link) has both the folder icon rendered, and then the page icon on top of it. It disappears if you scroll that part of the page out of the viewport and back in. It re-appears when you hit refresh.
I think its to do with declaration issues on your background styles. You might want to force a background color as transparent. Also background: url(none) may work by the filesystem failing to find the file, but its totally wrong. You should just use the keyword “none”.
Try explicitly declaring your background styles and we’ll see if that fixes the problem.
Copy & paste the code below to embed this comment.
Tim Wouters
At our site, we restrict this “icon styled list item” stuff to our help environment navigation, where this kind of styling can be perceived as ‘conventional’.
Basically, we transform an XML file into nested lists with no added CSS hooks whatsoever. In stead, we search the DOM through javascript to determine whether a list item is the last in line or descends further into child elements. The javascript dynamically adds different classes (‘parent’, ‘child’, ‘lastchild’ and ‘current’) to the markup, while the css uses this extra markup to display different icons (closed folder, opened folder, file icon etcetera).
I’m sorry I can’t give you a URI, but our site is a closed extranet environment. Thought this approach might be helpful though to readers interested in learning more about this.
Copy & paste the code below to embed this comment.
Rich
Nervously asks: You say you didn’t want to resort to scripting, but the purpose of this is a site map, which is a perfect job for a script. If that assumption is correct, then it will be a script which has to do the work of assembling the html anyway, and a very simple task to ask it to put in some icons?
Whilst I must agree with the ‘seen it all before’ comments, your cleaner approach to fully nested css is something a lot of other people have overlooked in various tutorials and examples.
My approach would be having sitemap as the id for the master list (you only have one sitemap right?) then you get the easier to handle #sitemap ul etc. but that’s a small thing and probably opens up a whole debate.
One spanner in the works I would like to see feedback on is how people have dealt with ordered lists and icon styling.
One common example would be numbered feedback and comment lists on blogs etc.
If you look at the markup for this article you have Section 1 followed by Section 2 followed by section 3. This to me says (or at least suggests) <ol> instead of <ul> but of course – how best to style them? Anyone?
Sorry to be another downer. (and I should probably be doing “nothing good to say, don’t say anything” policy) but this article is awful.
The principle is NOTHING new, the final example is I’m afraid to say not only unexciting, but also buggy as hell (it doesn’t display correctly in FF for gods sake).
If ALA worked for me and this work was given to a client, I’d be very close to firing you.
Sorry to say but the quality of the examples on ALA has gone way way down over the last 4 months.
“I guess the errors I am referring to are the not using UL UL and instead classing the root UL.”
I’m not sure I understand. Are you suggesting that instead of classing the root UL, I should place it in another unordered list?
“it doesn’t display correctly in FF for gods sake”
I must be missing something. It displays exactly the same for me in Gecko, IE and Opera no matter what computer I have tested it on. Could you email me a screenshot and the version number of FF you are using?
Rich, the site map was hardcoded.
Keith, I’ll have to try it again, but I had a third level previously and it seemed to work fine.
“I give up”, I’d be interested in seeing the articles you have written. It would be good to see what does not constitute awful in your eyes.
Thanks for all the suggestions everyone. I am going to try and implement some of them in the Faculty of Management site.
I think ALA choice to publish these 2 articles together is actualy quite insightful because it ties together the site map and the navigation.
Push it a bit further, move your XHTML to a separate file and use an include directive to display it in your navigation and your sitemap. So whenever you change something to the navigation, your sitemap is updated as well.
If I’m not making any sense, check out http://www.depauw.edu/2009/sitemap.asp . The navigation and the sitemap are pulled from
http://www.depauw.edu/2009/includes/main_navigation.asp
While I can see your point about using ordered lists rather than unordered lists, I suppose one could argue that there isn’t an order to the links/sections.I suppose it would depend on how you you see the hierarchy of the list. If you feel there should be an order (in my case, Calgary should be the uppermost order, ‘Community’ the second highest, and so forth). then by all means use ol. In my case, I didn’t see a specific order. Perhaps this has more to do with working in an academic environment though.
some weeks ago I developed a (in my opinion very nice) sitemap, which displays a very clear semantic and looks also a little bit pretty. I think most of the sitemaps which can be found in the web are boring!
I have to insert some hacks into the stylesheet because the basic code is rendered very differently in IE and Mozilla for example.
You can see it here:
http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html
and here:
http://www.zabdesign.de/pro/public/sitemap/sitemap.html
without looking too hard at the css…why not simplify matters and add the class to the actual LI that contains a sublist? would possibly make the whole issue a lot easier…unless i’m missing something fundamental here.
Sometime ago, I did something like this for the navigation of my drupal site http://capmex.biz
Drupal throws up the navigation menus as lists and it was very easy to style them, I did it overriding the standard bullets with images. I think your approach can be used to style a Drupal navigation menu too, because, it’s very similar to the one I implemented.
When I was reading the part of your article that lead up to the styling of parent items (with the folder icon), I got quite excited. “Gee”, I thought, “the parent items are really the same as the other list items, in terms of their position in the document hierarchy. How are you going to style them differently, without resorting to giving them a new class?”
Because this is ALA, I was certain that I was about to discover one of those really cool, really clean, really “now why didn’t I think of that before” techniques that I’ve discovered in so many other articles here. Perhaps you’d use some obscure CSS selector, such as the adjacent sibling selector. Perhaps you’d show us some kind of pseudo-recursive logic that suggested that maybe we could isolate those list items that contain other (nested) lists inside them. Whatever it was, I knew it would be funky.
I was wrong.
You did the most obvious thing in the world. You gave the parent list items a different class, and then applied the folder icon to that class. You didn’t show us any ‘smart’ solution whereby we wouldn’t have to tag every single parent item in the list. You said you wanted to avoid scripting, but in my opinion a scripted solution would have been far cleaner. At least a script could automate the tagging of parent items.
I for one found this very disappointing. ALA has a reputation for publishing things that are innovative, not things that are obvious. It’s time that reputation was upheld once more.
The background images are attached to all of the anchor tags. I see your point though and I don’t thin there is a difference between “li a.parent” and “li.parent a” except one is probably more semantic.
Jeremy,
Actually in the first draft of my article, I did exactly as you had wished the article had done. Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.
So what you want can be done, but not if the parent items are links as well. at least, not as far as I was able to determine.
Copy & paste the code below to embed this comment.
Pär Axelsson
Hi Siever,
I’m not sure I’m thinking right here, and also this is not my mother tongue, so please be kind to me if I suggest something obvious.
Anyway. Wouldn’t it be possible to style all links, both “parent links” and “children”, with folder images, addressing them with “.sitemap a”, and then style all child links (overriding the style above) with “files images”, addressing them with “.sitemap ul a”?
The only problem I see with this (although I’m the first to admit this is a very serious limitation) is that you will only be able to have two levels of links: parents and children; no children with children. As long as we know the information will only be in two levels, wouldn’t this be a possible solution, avoiding the “parent” class?
Best wishes.
By the way, I do also agree with this article being a little to simple for ALA, but I can understand that if it was a while since you wrote it. Still, just as Jeremy, I was a little disappointed. I would be glad to find out how to address the parents and children without using a “.parent” and with the code being flexible enough for 1, 2, and many levels of information.
The “problem” with that is that using a folder indicates that there should be containing files. I wanted a structure where the folder icon would only show up if there was a nested list. If there was no list, I wanted a document icon.
ah, i see…thought you were applying the document image to the li, not the actual link. in that case sure, it doesn’t make much difference whether you apply the class to the link or the containing li.
after reviewing a previous comment I made, I wanted to make sure I clarified something.
“Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.”
I did not mean by this that it was unfortunate ALA editors made a suggestion to improve the usability of the sitemap. What I did mean was that it was unfortunate that the new technique did not provide for a cross-browser solution that did not require a new class. Naturally, this is not the fault of the ALA editors.
I have also done a similar thing, though I have used definition lists for it so I didnt have to set a specific style for a subfolder.
The tree menu has full folder functionality, all that needs to be added are some classes that change the image from a folder to a file or whatever you like.
If you dont like the javascript to expand/retract folders you can just leave it out, all you need to do is not include the javascript. This will still save you lots of time getting things to fit to the pixel (it’s a b*tch).
The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all. There is a problem with nesting bigger than three folders down that I havent yet addressed. Should be an easy fix when I get time to look at it.
Copy & paste the code below to embed this comment.
Seb Crump
Hmm, I have a preference for sections to be heading tags, for accessibility reasons. Screen-reader users can navigate a hierarchy of headings and therefore would be able to get the listing of the pages in that section far more easily.
If you take a look at the example page linked at the end of the article, you will see the sitemap does use headings. The reason I didn’t use lower-level headings for the parent list items was because those items had their own pages and were also still items in the list.
I’m not sure I would say headings and subheadings are more semantical than using nested lists.
Even though the Code Cops seemed to have torn you a new one, I think that you will find your technique will be utilized elsewhere more and more now that this is on ALA.
Even though the “I did that same thing ten years ago” folks can never seem to keep to themselves while they discuss and marvel at their own genius elsewhere, I believe you will find something similar in their toolbelts soon.
Aside from some minor detours away from the CSS Bible of Coding Statutes, good work and keep moving. It seems to be the only way to avoid getting hit in here anymore.
Copy & paste the code below to embed this comment.
anon
When an article is posted on ALA, it is crucial that it is exposed to robust discussion and critique of the approaches used.
Without this, ALA would serve little purpose beyond hosting hacky how-to’s that thrive on thousands of ‘dezine’ forums around the web.
If someone posts an article of a reasonably obvious and widely used approach, and makes some rather obvious errors in process, testing and final output, then it’s likely that on ALA it will get pulled apart.
As has been mentioned already, styling nested lists has already had major visibility in the ‘scene’ over a year ago, without some of the glaring errors evident in the ALA example.
As ALA’s goal is (was?) to increase CSS and xHTML technology I don’t really think its fair to presume anyone who criticised this article negatively as people who ‘marvel at their own genius’. Most have adopted earlier and better techniques in their toolbelt – happily acknowledging the original source.
Copy & paste the code below to embed this comment.
Everett Lindsay
has anyone ever run across the situation where “bullets” sporadically disappear when implemented as the background image for <li> elements? can anyone point me toward a fount of knowledge on what causes this glitch? (ie6)
Copy & paste the code below to embed this comment.
anon
Peter Müller;
“The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all.”
Not in MY copy of Safari it doesn’t; your folders do not expand or retract, and the RHS column of pretty icons extends past the end of its “containing” white rectangle on many sub-pages.
On further investigation, the expand and contract is in fact not functional in firefox (windows) either, and in IE 6 the whole sitemap is bumped down below the LHS navigation, and the folders still don’t collapse.
Comments about “glass houses” come immediately to mind…
Caveat: I just realised that maybe you removed the script you were talking about? if not, oh dear…
Copy & paste the code below to embed this comment.
Brandon
I’ve had a similar situation on my intranet for about a year now. Except that I have a class on the ul called iconbullet, and then on the child li’s I have classes that show different icons based on their type, i.e. folder (for parents), url, pdf, xls, etc…
Copy & paste the code below to embed this comment.
erictoledo
I think sprucing up a site map is the right thing to do. Most people treat the site map as a necessary device but treat it as it doesn’t belong in the website.
You never know who will be looking at your sites. I say be proud of every page.
Site maps are an important aspect of general UI design for the web and for Intranet/Extranet development. I believe that it may be one of the most important pages next to the actual home page.
And I digress with regards to my comments about the code cops in a previous post. It does, indeed, require criticism to move forward and learn. My remarks were intended to incite constructive critique as opposed to rip and tear. “Let me share my findings and point out the differences,” works much better than “I did this same thing a few years back and yours doesn’t work in Safari.” ;)
67 Reader Comments
Back to the ArticlePeter Cooper Jr.
I’m a little confused… Why not just use list-style-image on “ul” and a different list-style-image on “ul ul”?
Jim
This technique is simple enough, but why not take advantage of a:hover and give the user more feedback?
I did this here http://greenwoodresources.com/ for the main menu when list-style-image wouldn’t react to a user action.
Rob Mientjes
Peter, that’s because IE doesn’t support it. You know how it is.
Kim Siever
See, this is exactly why I like ALA. The discussions always bring forth good ideas. Thanks for the tips, Peter and Jim.
Rob Waring
Is that IE 5 or 5.5? Cause the w3schools try-it works on IE6. I would have thought bolting the two together so you have list-style-image for all the li’s and then direct style the ul’s would work and be a bit cleaner?
Rob Mientjes
That’s pretty silly. Someone assured me it didn’t work, and as I never really want to fire up IE, I couldn’t test it either.
Well, then I’ll say “Nice one, Peter”.
Miriam Frost Jungwirth
We’ve looked at something similar, but found the Windows-style folder view metaphor to be a problem—users became quite annoyed that they could not open and close the folders, and the content team (not comprised of web designers) complained bitterly that they could not drag the files/folders to the trash or rearrange them.
I’ll try the technique, though…
GC
I’m sorry to have such a basic question, but I’ve never seen something before or considered it.
What is the rational for placing a ul element inside a li element? I’ve always had them nested inside other uls. Just curious. Any links to discussion on this convention?
Kim Siever
Interesting findings, Miriam. I wonder if others have experienced this as well. I would be interested to know if this is something widespread.
Jim
GC, see this http://zvon.org/xxl/xhtmlBasicReference/Output/el_ul.html
In valid xhtml, an <li> must be closed with </li>
The only child of an OL or UL is LI, so a UL can’t be a child of a UL, but it can be a child’s child (therefore <ul><li><ul>…).
GC
Thanks, Jim, I see it now. It was just a really weird thing I had never considered before. Funny, I got so used to seeing sloppy html tutorials where the lis were not closed I assumed that the ul was a child of a ul. I never read (or looked for) a clarification.
Gerben
It’s nice to read how a solution evolved, but I think that by this way of creating and ajusting you don’t get the most optimal solution.
for example. you style the UL element to get a folder-icon while instead you can just use the a.parent element.
ul.sitemap li a
{
background : transparent url(’/man/images/sitemapdocbullet.gif’) no-repeat;
margin-left : -1.1em;
padding-left : 1em;
}
ul.sitemap li a.parent
{
background : transparent url(’/man/images/sitemapfolderbullet.gif’) no-repeat;
}
Your solution is very very nice if you don’t want to add a class=parent to your html, but if you do you might want to exploit this.
dusoft
What’s so new about this? This technique is as old as it could be. Nested ULs… Heureka, you have invented the wheel.
Alfredo Fernández Díaz
“The first example I ever come across of…”
Hm. I already made “an icon-styled unordered list made exclusively with CSS” at http://www.os2world.com/wpidistro/en/status_t.htm
almost two years ago – I was beginning with CSSs so I used simple list-style-image and more classes for different kinds of containers and packages…
I never thought I’d find something like this in ALA.
Interesting comment from Miriam about computer-illiterate users. Webdevelopers beware as well!
Kim Siever
dusoft,
The article isn’t about creating nested unordered lists. It is about styling nested unordered lists in a way that is reminiscent of a folder structure.
You may want to reread the article.
Alfredo,
I wish I knew about your page last spring before I developed this article. I had been searching for this very thing for a long time and could never find anything,. I suppose i just wasn’t using the right search terms at the time. Thanks for the link. It’ll be nice for readers two see two methods of stylising the sitemap.
Oliver
The folder icons aren’t positioned at the exact place in Opera. Nice article!
Alfredo Fernández Díaz
Kim, thank YOU for the appreciation.
Of course you the ideas there can be re-used if you ar someone ever need several container/children types.
I tried and submit things like these to ALA several times but for whatever reason I never succeeded ;-(
and unfortunately I spend more time programming than doing web design things (any job offers, anyone!?) so I recycle them all the time in some other projects, where they are part of the actual thing, and therefore non-relevant for search engines: the page is #1 in Google when searching for “WPI Distro” but not for anything related with CSS styles.
Hopefully, some time in the future I’ll build a personal website with my stuff (webdesign related or not) properly categorized so next time everything appears on search engines ;-)
Kim Siever
Oliver,
I just checked in Opera 7.54 and it looks the same to me as it does in FF.
Glad you liked the article.
anonymous coward
I thought this technique was sweet in 2002.
I’ll tell you what I could really use, though – another article on CSS Dropdown Menus.
Kim Siever
FWIW, I thought it was sweet in 2004 when I developed it.
Seth House
dusoft, Alfredo,
I’m not the author, however, I think you two missed the point entirely – Kim is being overly generous. Anyone can accomplish this effect just by throwing markup at the problem. The idea here is to pull this off with as little CSS markup in the HTML as possible. Being able to achive this effect with CSS on a plain HTML file is the Holy Grail we’re after, and this is why the article appeared on ALA.
Oliver,
What version of Opera? It looks fine to me in Opera 7.54.
Peter,
Using list-style-image was my first thought too. But it seems difficult or impossible to get the bullet image to be clickable using that method as well as some alignment issues between the browsers. SimpleBits references it a few times in some of their articles including the one linked in the story. Of course, if I’m mistaken I’d love to see a link to the technique.
http://www.simplebits.com/notebook/2004/07/18/clickable.html
Thanks for the article, Kim!
– Seth
François
- Dan Ced*a*rholm -> Cederholm
– “Voilà” needs a grave accent, not an acute one
A nice article by the way.
Kim Siever
Thanks François. I guess the many proofreaders of the text don’t check for spelling errors. :)
This article was sent for publication last summer. Since then, I have been made aware of the spelling of Cederholm.
http://www.simplebits.com/notebook/2004/08/26/nyt.html
always call others on their grammatical/spelling errors. I should expect no different.I’m glad you liked the article.
Thanks for the kind words, Seth.
Angus TUrnbull
Hmm, this reminds me of one of my earlier projects! Take a look at:
http://www.twinhelix.com/dhtml/checktree/
The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.
Anyway, it’s an example of a treeview control complete with “dashed-lines” (as in Windows Explorer) and plus/minus expansion icon indicators; the only real compromise I had to make was a CLASS=“last” attribute on the last LI element in each UL to get the dashed lines right, due to IE not supporting useful selectors (sigh). It uses similar margin-based layout to this article’s example for positioning background images; I hope you guys find it useful :).
Angus Turnbull
Hmm, this reminds me of one of my earlier projects! Take a look at:
http://www.twinhelix.com/dhtml/checktree/
The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.
Anyway, it’s an example of a treeview control complete with “dashed-lines” (as in Windows Explorer) and plus/minus expansion icon indicators; the only real compromise I had to make was a CLASS=“last” attribute on the last LI element in each UL to get the dashed lines right, due to IE not supporting useful selectors (sigh). It uses similar margin-based layout to this article’s example for positioning background images; I hope you guys find it useful :).
anon
I’m not entirely sure of the point of this article…
I mean, you took some nested lists and changed their background image based on their heirarchy? Not really breaking any new ground there…
As someone else pointed out, you don’t need class the root UL.
You also shouldn’t use single quotes for declaring background image url, IE Mac doesn’t like it… Best to use doubles, or even better nothing at all…
Why did you left-pad the li and then negative margin the li a the same amount?
“The first example I ever come across of an icon-styled unordered list made exclusively with CSS.”
Where have you been for the last 5 years? ;)
I’m sorry, but where are the editors atm? This article was obvious, small, with simple CSS that still managed some basic errors.
anon
Seems to be something funky with the way this redraws in IE6 – you end up with doubled up icons (ironically, exactly the thing you went to great pains to avoid).
I know its a minority browser but I thought it worth mentioning.
Kim Siever
anon,
As I said, it has been months since I wrote the article. I have learned more about CSS since I wrote it. If I had to do it today, I wouldn’t use quotes for the background image.
“Why did you left-pad the li and then negative margin the li a the same amount?”
I don’t recall for sure. I believe it was because the anchor was pushed over too far or the background images were too far to the right. Had I written the article a couple of weeks ago, I could probably say for sure.
“Where have you been for the last 5 years?”
Again, I searched for something like this for months. If it was out there, it wasn’t SEO’d. I couldn’t find an example anywhere I looked, and no one I asked knew of one.
Is your declaration that article is obvious and small meant to be negative criticism? I was not aware articles on ALA needed to be subtle and large. Besides, if it was that obvious, why had no one else apparently documented it. Regarding basic errors, can you be specific?
anon,
IE6 was the first browser in which I tested it, and I did not see this problem. I just checked IE6 again (on two computers) and still don’t see double icons.
anon
I guess the errors I am referring to are the not using UL UL and instead classing the root UL. Likewise with the quotations. Also see my note below about url(none).
I’m not sure how you would find it in a search engine, it’s kinda like searching for “adding a background image to a tag”, it’s obvious. ;)
I was not meaning to criticise the article for its size. I was just suprised that such a small article with tiny amount of CSS was able to published with the errors/issues described.
I can replicate the issue in IE6, on load the second Edmonton Campus (the one that is a link) has both the folder icon rendered, and then the page icon on top of it. It disappears if you scroll that part of the page out of the viewport and back in. It re-appears when you hit refresh.
I think its to do with declaration issues on your background styles. You might want to force a background color as transparent. Also background: url(none) may work by the filesystem failing to find the file, but its totally wrong. You should just use the keyword “none”.
Try explicitly declaring your background styles and we’ll see if that fixes the problem.
Tim Wouters
At our site, we restrict this “icon styled list item” stuff to our help environment navigation, where this kind of styling can be perceived as ‘conventional’.
Basically, we transform an XML file into nested lists with no added CSS hooks whatsoever. In stead, we search the DOM through javascript to determine whether a list item is the last in line or descends further into child elements. The javascript dynamically adds different classes (‘parent’, ‘child’, ‘lastchild’ and ‘current’) to the markup, while the css uses this extra markup to display different icons (closed folder, opened folder, file icon etcetera).
I’m sorry I can’t give you a URI, but our site is a closed extranet environment. Thought this approach might be helpful though to readers interested in learning more about this.
mattymcg
I thought unconstructive criticism behind an anonymous wall was sweet when I was in high school, too.
Nice article Kim, not every idea needs to be ground-breaking. I hadn’t thought of this for a site map and will probably use it.
Rich
Nervously asks: You say you didn’t want to resort to scripting, but the purpose of this is a site map, which is a perfect job for a script. If that assumption is correct, then it will be a script which has to do the work of assembling the html anyway, and a very simple task to ask it to put in some icons?
Sure I’ve missed something :/
Rich
I knew I was right to be nervous. Hadn’t seen pages 2-4 (!). It’s a “holy grail” situation and I’ve missed the point. ok, ignore me!
Justin Wignall
Whilst I must agree with the ‘seen it all before’ comments, your cleaner approach to fully nested css is something a lot of other people have overlooked in various tutorials and examples.
My approach would be having sitemap as the id for the master list (you only have one sitemap right?) then you get the easier to handle #sitemap ul etc. but that’s a small thing and probably opens up a whole debate.
One spanner in the works I would like to see feedback on is how people have dealt with ordered lists and icon styling.
One common example would be numbered feedback and comment lists on blogs etc.
If you look at the markup for this article you have Section 1 followed by Section 2 followed by section 3. This to me says (or at least suggests) <ol> instead of <ul> but of course – how best to style them? Anyone?
I give up
http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html
http://www.splintered.co.uk/experiments/archives/tree_menu/
Sorry to be another downer. (and I should probably be doing “nothing good to say, don’t say anything” policy) but this article is awful.
The principle is NOTHING new, the final example is I’m afraid to say not only unexciting, but also buggy as hell (it doesn’t display correctly in FF for gods sake).
If ALA worked for me and this work was given to a client, I’d be very close to firing you.
Sorry to say but the quality of the examples on ALA has gone way way down over the last 4 months.
Keith
Choice of icons was sublime—makes it seem like a no-brainer. But that system falls apart if the site is deeper than 2 levels, and when are they not?
Kim Siever
“I guess the errors I am referring to are the not using UL UL and instead classing the root UL.”
I’m not sure I understand. Are you suggesting that instead of classing the root UL, I should place it in another unordered list?
“it doesn’t display correctly in FF for gods sake”
I must be missing something. It displays exactly the same for me in Gecko, IE and Opera no matter what computer I have tested it on. Could you email me a screenshot and the version number of FF you are using?
Rich, the site map was hardcoded.
Keith, I’ll have to try it again, but I had a third level previously and it seemed to work fine.
“I give up”, I’d be interested in seeing the articles you have written. It would be good to see what does not constitute awful in your eyes.
Thanks for all the suggestions everyone. I am going to try and implement some of them in the Faculty of Management site.
Cedric
I think ALA choice to publish these 2 articles together is actualy quite insightful because it ties together the site map and the navigation.
Push it a bit further, move your XHTML to a separate file and use an include directive to display it in your navigation and your sitemap. So whenever you change something to the navigation, your sitemap is updated as well.
If I’m not making any sense, check out http://www.depauw.edu/2009/sitemap.asp . The navigation and the sitemap are pulled from
http://www.depauw.edu/2009/includes/main_navigation.asp
Kim Siever
That’s very cool, Cedric. I’ll have to remember that for the next redesign.
Kim Siever
Justin,
While I can see your point about using ordered lists rather than unordered lists, I suppose one could argue that there isn’t an order to the links/sections.I suppose it would depend on how you you see the hierarchy of the list. If you feel there should be an order (in my case, Calgary should be the uppermost order, ‘Community’ the second highest, and so forth). then by all means use ol. In my case, I didn’t see a specific order. Perhaps this has more to do with working in an academic environment though.
Kim Siever
Keith, I just tested a third level and (surprise) it works in everything but IE6.
Sebastian Schimpf
Hi,
some weeks ago I developed a (in my opinion very nice) sitemap, which displays a very clear semantic and looks also a little bit pretty. I think most of the sitemaps which can be found in the web are boring!
I have to insert some hacks into the stylesheet because the basic code is rendered very differently in IE and Mozilla for example.
You can see it here:
http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html
and here:
http://www.zabdesign.de/pro/public/sitemap/sitemap.html
Regards from Germany,
Sebastian
patrick h. lauke
without looking too hard at the css…why not simplify matters and add the class to the actual LI that contains a sublist? would possibly make the whole issue a lot easier…unless i’m missing something fundamental here.
Edgard Durand
Sometime ago, I did something like this for the navigation of my drupal site http://capmex.biz
Drupal throws up the navigation menus as lists and it was very easy to style them, I did it overriding the standard bullets with images. I think your approach can be used to style a Drupal navigation menu too, because, it’s very similar to the one I implemented.
Jeremy Epstein
When I was reading the part of your article that lead up to the styling of parent items (with the folder icon), I got quite excited. “Gee”, I thought, “the parent items are really the same as the other list items, in terms of their position in the document hierarchy. How are you going to style them differently, without resorting to giving them a new class?”
Because this is ALA, I was certain that I was about to discover one of those really cool, really clean, really “now why didn’t I think of that before” techniques that I’ve discovered in so many other articles here. Perhaps you’d use some obscure CSS selector, such as the adjacent sibling selector. Perhaps you’d show us some kind of pseudo-recursive logic that suggested that maybe we could isolate those list items that contain other (nested) lists inside them. Whatever it was, I knew it would be funky.
I was wrong.
You did the most obvious thing in the world. You gave the parent list items a different class, and then applied the folder icon to that class. You didn’t show us any ‘smart’ solution whereby we wouldn’t have to tag every single parent item in the list. You said you wanted to avoid scripting, but in my opinion a scripted solution would have been far cleaner. At least a script could automate the tagging of parent items.
I for one found this very disappointing. ALA has a reputation for publishing things that are innovative, not things that are obvious. It’s time that reputation was upheld once more.
Kim Siever
Patrick,
The background images are attached to all of the anchor tags. I see your point though and I don’t thin there is a difference between “li a.parent” and “li.parent a” except one is probably more semantic.
Jeremy,
Actually in the first draft of my article, I did exactly as you had wished the article had done. Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.
So what you want can be done, but not if the parent items are links as well. at least, not as far as I was able to determine.
Pär Axelsson
Hi Siever,
I’m not sure I’m thinking right here, and also this is not my mother tongue, so please be kind to me if I suggest something obvious.
Anyway. Wouldn’t it be possible to style all links, both “parent links” and “children”, with folder images, addressing them with “.sitemap a”, and then style all child links (overriding the style above) with “files images”, addressing them with “.sitemap ul a”?
The only problem I see with this (although I’m the first to admit this is a very serious limitation) is that you will only be able to have two levels of links: parents and children; no children with children. As long as we know the information will only be in two levels, wouldn’t this be a possible solution, avoiding the “parent” class?
Best wishes.
By the way, I do also agree with this article being a little to simple for ALA, but I can understand that if it was a while since you wrote it. Still, just as Jeremy, I was a little disappointed. I would be glad to find out how to address the parents and children without using a “.parent” and with the code being flexible enough for 1, 2, and many levels of information.
Happy Aprils Fools Day, everybody.
Pär Axelsson
Hi again. Please have a look at http://www.paraxelsson.se/hybrid/ for an example of what I meant in my earlier comment.
Bye everyone (and thanks for a lovely magazine)!
Kim Siever
Pär,
The “problem” with that is that using a folder indicates that there should be containing files. I wanted a structure where the folder icon would only show up if there was a nested list. If there was no list, I wanted a document icon.
patrick h. lauke
ah, i see…thought you were applying the document image to the li, not the actual link. in that case sure, it doesn’t make much difference whether you apply the class to the link or the containing li.
Pär Axelsson
Ah. Stupid me. Thanks for telling me that in a nice way, Kim! :o)
Douglas Clifton
I’m no designer, and the CSS is pretty messed up, but I’ve been using this same metaphor for ages now:
http://loadaveragezero.com/hnav/sitemap.php
Go right ahead and tear me a new one, I can take it. ;-)
Doug
Kim Siever
Hi all,
after reviewing a previous comment I made, I wanted to make sure I clarified something.
“Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.”
I did not mean by this that it was unfortunate ALA editors made a suggestion to improve the usability of the sitemap. What I did mean was that it was unfortunate that the new technique did not provide for a cross-browser solution that did not require a new class. Naturally, this is not the fault of the ALA editors.
Peter Müller
I have also done a similar thing, though I have used definition lists for it so I didnt have to set a specific style for a subfolder.
The tree menu has full folder functionality, all that needs to be added are some classes that change the image from a folder to a file or whatever you like.
If you dont like the javascript to expand/retract folders you can just leave it out, all you need to do is not include the javascript. This will still save you lots of time getting things to fit to the pixel (it’s a b*tch).
The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all. There is a problem with nesting bigger than three folders down that I havent yet addressed. Should be an easy fix when I get time to look at it.
Anyway, enjoy: http://fumle.dk/public/javascript/tree/
Seb Crump
Hmm, I have a preference for sections to be heading tags, for accessibility reasons. Screen-reader users can navigate a hierarchy of headings and therefore would be able to get the listing of the pages in that section far more easily.
Kim Siever
Seb,
If you take a look at the example page linked at the end of the article, you will see the sitemap does use headings. The reason I didn’t use lower-level headings for the parent list items was because those items had their own pages and were also still items in the list.
I’m not sure I would say headings and subheadings are more semantical than using nested lists.
William Dodson
Even though the Code Cops seemed to have torn you a new one, I think that you will find your technique will be utilized elsewhere more and more now that this is on ALA.
Even though the “I did that same thing ten years ago” folks can never seem to keep to themselves while they discuss and marvel at their own genius elsewhere, I believe you will find something similar in their toolbelts soon.
Aside from some minor detours away from the CSS Bible of Coding Statutes, good work and keep moving. It seems to be the only way to avoid getting hit in here anymore.
anon
When an article is posted on ALA, it is crucial that it is exposed to robust discussion and critique of the approaches used.
Without this, ALA would serve little purpose beyond hosting hacky how-to’s that thrive on thousands of ‘dezine’ forums around the web.
If someone posts an article of a reasonably obvious and widely used approach, and makes some rather obvious errors in process, testing and final output, then it’s likely that on ALA it will get pulled apart.
As has been mentioned already, styling nested lists has already had major visibility in the ‘scene’ over a year ago, without some of the glaring errors evident in the ALA example.
http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html
As ALA’s goal is (was?) to increase CSS and xHTML technology I don’t really think its fair to presume anyone who criticised this article negatively as people who ‘marvel at their own genius’. Most have adopted earlier and better techniques in their toolbelt – happily acknowledging the original source.
httpwebwitch
this isn’t innovative, but since it’s something that is easy to do badly it is worth having a tutorial in the archives at ALA. Thanks
Everett Lindsay
has anyone ever run across the situation where “bullets” sporadically disappear when implemented as the background image for <li> elements? can anyone point me toward a fount of knowledge on what causes this glitch? (ie6)
anon
Peter Müller;
“The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all.”
Not in MY copy of Safari it doesn’t; your folders do not expand or retract, and the RHS column of pretty icons extends past the end of its “containing” white rectangle on many sub-pages.
On further investigation, the expand and contract is in fact not functional in firefox (windows) either, and in IE 6 the whole sitemap is bumped down below the LHS navigation, and the folders still don’t collapse.
Comments about “glass houses” come immediately to mind…
Caveat: I just realised that maybe you removed the script you were talking about? if not, oh dear…
Brandon
I’ve had a similar situation on my intranet for about a year now. Except that I have a class on the ul called iconbullet, and then on the child li’s I have classes that show different icons based on their type, i.e. folder (for parents), url, pdf, xls, etc…
erictoledo
I think sprucing up a site map is the right thing to do. Most people treat the site map as a necessary device but treat it as it doesn’t belong in the website.
You never know who will be looking at your sites. I say be proud of every page.
William Dodson
Site maps are an important aspect of general UI design for the web and for Intranet/Extranet development. I believe that it may be one of the most important pages next to the actual home page.
And I digress with regards to my comments about the code cops in a previous post. It does, indeed, require criticism to move forward and learn. My remarks were intended to incite constructive critique as opposed to rip and tear. “Let me share my findings and point out the differences,” works much better than “I did this same thing a few years back and yours doesn’t work in Safari.” ;)
Petr
What do you tell on this site-map/ul style?
Sorry for czech lang of site.
http://www.pcsp.cz/mapa-serveru.php
David Jones
Simple pre-loading such as:
window.onload = function () {
var imagesArray = new Array(‘images/image1.jpg’,‘images/image2.jpg’);
preloadImages(imagesArray);
}
function preloadImages(imagesArray) {
for(var loop = 0; loop < imagesArray.length; loop++){
var preloadedImage = new Image();
preloadedImage.src = imagesArray[loop];
}
… will solve the problem where the “little file icon” takes a while to load when hovering over it for the first time.
Merely add all the images used in the hover effect to the array called “imagesArray” in the JavaScript above and away you go!
Jason
I always thought sitemaps were for search engines. This actually makes a sitemap navigable by a human. Very cool.