Discuss: CSS Design: Taming Lists
by Mark Newhouse
- Editorial Comments
22 Real World but Verticle
Great article. I’ve been trying to implement ul for the menu on a design I’ve been working on.
I’m having trouble creating a verticle navigation bar with a ul.
Is it possible to have the list items to take up a percentage of the container div (say 14%) and display inline.
posted at 03:22 pm on September 28, 2002 by
23 Thanks for the kind words
I’m glad the article is being of help to some of you – that’s why I wrote it.
As apartness noted, I’m pretty much into practical stuff, so I didn’t go into CSS2/3 beyond the generated content (and that only because 2 of the 3 standards compliant browsers support it). I also didn’t mention the proposed NL (which, from what I’ve read about it) will be quite nice once implemented by the browsers. As for DLs – they could take up a whole ‘nother article them selves, and this one was already getting long. Maybe I’ll write something up on Real World Style.
Thanks again for all the kind words – glad you are liking it!
posted at 04:37 pm on September 28, 2002 by Mark
24 Re: Mozilla rendering
The missing button divider lines are caused bu a vertical rounding error, a problem that I covered in this demo:
http://users.rraz.net/mc_on_the_rocks/testpage/mozshift.html
IE has similar problems with absolute positioning.
posted at 05:28 pm on September 28, 2002 by Big John
26 W3schools
remember www.w3schools.com for lots of web tutorials.
posted at 04:15 am on September 29, 2002 by
27 Definition lists with bullets
Definition lists actually do quite well with bullets (especially if you use a list-style-type such as square or circle that you don’t see as much). I use definition lists everywhere on my site for changelogs, link lists, etc. and bullets really help when you’ve got multiple terms or definitions in one entry.
posted at 06:10 am on September 29, 2002 by Kevin W
28 CSS is just impotent - Table layouting is the righ
You talk about the power of CSS in your article.
Thats nice and so but in real world simple things cannot even be put into CSS and therefore I think old good table-layouting is what will stay for 10 years, as css lacks much features, or maybe I am too ignorant to use them in which case you could post an example here or add additional paragraphs to your article covering my question…
Ofcourse the navigation links are likely lists, but lets
face it, I cannot do what I am told to do with CSS.
Look at the
http://my.tele2.ee/cadorsoft/vertcalinks.htm
and say how do I suppose to have that bullet image v e r t i c a l l y centered to the LI contents, or the othe question would be – if thats impossible with lists+css, then how do I fake it with DIVs ?
With Table-layouting this is a very simple task, but how the things should be done with css – I have NO IDEA!!
Any feedback welcome…
posted at 06:47 am on September 29, 2002 by Marek
29 Novice here...
I’m a web-design novice who is ready to learn. But, I want to learn it right, rather than just learn what I can to make it look good on my personal website. I think this article will really help me. I too, have created my menu using a table, JavaScript, and images. You can see it at http://fresco.freeyellow.com. Please be aware that all the non-compliant markup will make you cringe.
Anyway, the rollover is really slow for me, since I have a dial-up connection, and I’d like to change it, since it rolls over fast and renders fast. My only problem is that my buttons use a freeware font called Neuropol, that I really like, and would like to keep if I can, but I know not nearly everyone who may come across my site will have it on their system. What’s the solution to this? Just set the style to that font, and declare some back-up fonts for those that don’t have it? I like the idea of separating style from content, but there is still the issue that I am presenting my artwork on the web, and I want my website to look the way I want it to look. Am I just being a web-Nazi here, and do I need to just loosen up and realize that it’s not too big a deal?
Please advise and thanks. ;)
posted at 09:41 am on September 29, 2002 by Dr. Noise
30 another example
I had come across the idea of inlining lists to make horizontal menus a while ago, and implemented one example of such on my personal website (http://www.rephorm.com).
It’s good to see an article with more details and ideas. The results are very clean and managable menu source. To add an item, merely add an <li>.
posted at 10:55 am on September 29, 2002 by rephorm
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






21 good stuff
I too, just yesterday, was again looking for a better solution for my menu lists. Thanks for the great article!
posted at 02:27 pm on September 28, 2002 by flounder