Mobile Friendly Website


Doing it with style

Definition list menu COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Gustavo gavan:-
Great stuff

could it be possible to have this with nested items like

Painting 1
Painting 2
Painting 3
etc.. with different format for the Level 1 (painters) & Level 2 (painting)
(11.05.2004, 17:17)

Kevin Francis:-
Great site by the way.
Perhaps you can clarify a potential accessibility problem I've encountered using definition lists for menus.
I go to lengths to make my web pages accessible and perform manual checks against the WCAG 1.0, a client of mine seems only interested in a AAA Bobby badge. My opinion is - the objective is accessibility, not a Bobby badge!

The problem is when I run my test page through Bobby

I recieve the error message;

WAI checkpoint 10.5
Separate adjacent links with more than whitespace.

Bobby recomends marking up my menu with ordered list to rectify the problem - what is wrong with definition lists?

If I use an unorderd list and H2 for menu titles then I do not get this error, possibly because unordered lists are bulleted when css is removed/not supported therefore acting as a link speration character. As definition list a not bulleted by default could this be the problem?

I'm very interested to hear your thoughts on this white space bug. Is it just the usual Bobby problems, or has Bobby actualy got it right for once.

Kevin Francis
(05.08.2004, 06:52)

Kevin Francis:-
how do I find your reply to my comment?
(05.08.2004, 06:55)

:) you find your reply here.
Bobby likes to see a separator character between links and as definition lists do not automatically add the character then you should add it yourself (if bobby approval is a must).
To do this just add a <span class="xyz"> | </span> to your links then use the css .xyz {display:none;}. This will add your separator for non css browsers but hide it for css based browsers AND keep bobby happy.
(05.08.2004, 19:21)

Manuel Flores (sv):-
Hey these sites is great... and the menus are helful not for example but for learning to manipulate css....
(01.02.2005, 16:28)
I just worked through you definition list menu courtesy of WebReference Update and hats off to you Stu. I would like to use this on my own site, customised to my house style.

It's excellent!
(09.05.2005, 20:11)

That's what it's there for, modify it as you want.
Perhaps you could post the url when it's done as I would like to take a look.
(09.05.2005, 20:27)

Regarding the example as seen on <>

When doing two links:
How about making the <dt> float to right (51%) and the other <dt> float to left (49%)
and underneath the same way each the <dd>s

any ideas
(10.06.2005, 12:27)

t work. I published it out to my host and tried it this morning and it works. Great technique stu. :-

(15.06.2005, 13:51)

9 of 19 comments (part 2). [ « ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page