Mobile Friendly Website

CSSPLAY

Doing it with style

Menu Tutorial 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}cssplay.co.uk.

Post a comment


Current posts

Mike Stenhouse:-
People use lists for their menus because the W3c recommend it - a menu is a list of links so it should be marked up as such. It's an accessibility feature that provides structure to your navigation... If you turn off style sheets a list of unstructured links become one line. You've used > characters to separate your items, minimising the impact, but not everyone does. It's not a consideration for everyone but if you're aiming for RNIB or WAI compliance it's something you need to think about.
(24.04.2004, 18:15)

Stu:-
If you are concerned with accessibility then an unstructured line of links can always be 'structured' by using [] around the link. These can be contained in a span with display:none; so that the button is not affected but the links will show as [link 1] [link 2] [link 3] etc when viewed in text only browsers.
There are many ways to provide accessibility without the need to resort to lists.
(26.04.2004, 17:17)

Stu:-
Perhaps we should await the introduction of <nl> navigation lists which are intended for use with links.
(26.04.2004, 17:28)

Andreas:-
Links to Page 1 to 5 at the Bottom are broken!
(04.06.2004, 04:22)

Stu:-
Ah... that's probably my fault in not explaining properly. The Page 1 to 5 links do not actually lead anywhere, they are just to show what the list would look like when viewed without css. Sorry for the confusion.
(04.06.2004, 09:32)

Muzzer:-
THANK YOU!!! Fantastic tutorial. I have been looking for four hours for this tutorial! Thanks for the basic approach - I'm new to css and those other tuts have me totally baffled. Well done :)
(27.08.2004, 04:05)

Gabinux:-
Best CSS Menu Tutorial on the WEB. I learned more from your tutorial than from any CSS manual ever made... Thank you!
(23.09.2004, 13:33)

crappy:-
i agree with the latter, ur the daddy. u should talk about ur self so we can no the dude behind it all what u do for living etc. thank you for insperation :)
(03.02.2005, 20:43)

Stu:-
crappy, I have just started a blog with a little bit about me here - http://www.s7u.co.uk/blog/ for anyone who is interested ;o)
(03.02.2005, 21:16)

David:-
Gabinux is spot on. I think this is the best CSS tutorial around. I just started playing with this horizontal menu style and wondered if there is a way to center the row of buttons. I've tried all kinds of centering options in a surrounding <div> but have had no luck. Any ideas?
(22.02.2005, 16:44)

Stu:-
David, I have put up a centered menu here www.stunicholls.myby.co.uk/menus/centered.html to show how the containing div should be styled.
(22.02.2005, 19:17)

David:-
Excellent!! You are the master!!
(22.02.2005, 22:44)

Steve:-
Fantastic! I needed someone to tell me to drop lists for navigation. (It would be nice if your css forced your pages to be 100% for printing (I lose the right hand edge in IE6)
(11.03.2005, 17:03)

Stu:-
Steve, sorry about that. If you try now you will find that the printed page is formatted specially for a printer. Hope this is ok now ;o)
(11.03.2005, 17:33)

JOD:-
Thank you! I always enjoy visiting the CSS Playground. Lots to learn. But am I mistaken:
I quote, "If you need to show one of the menu items as being active then just add a span class using the same css as the a.nav and a.nav:active and use this for your active 'link'."

This doesn't quite work if styling a menu for text-only browsers using the inline spans (for vertical menus, or hoizontal menus separated by the square brackets - #nav span {display:none;}).

Instead, I put each of these spans in a class (.bracket {display: none;}) :

<div id="menu">
<span class="bracket">[</span><span id="chosen">link 1</span><span class="bracket">] </span>
<span class="bracket">[</span><a class="nav" href="#" title="link2">link 2</a><span class="bracket">] </span>
</div>

Make sense?

Thanks again.
(05.05.2005, 02:56)

CSS Script Kiddie:-
I can't thank you enough. I spent a week trying to write my own menus then another week fighting with list-based CSS menus provided on other sites. Couldn't get a single damned one of them to work. Finally found yours and had menus customized to my needs completely finished inside of five minutes, thanks to the easily understandable CSS code.
(29.05.2005, 23:49)

Herman:-
Very nice. I'm just a newbie on CSS and web desing. Is there any way to get sub-menu horizontal? An example would be the http://www.macromedia.com/ . Where the main menu is horz. Then on a hover the submenu is horz. I've done this in JavaScript (I know BAD, BAD me) by mouseover and changing classes.
Your xsanzzy is simpler to use than nifty.
hlouie@hotmail.com
(05.07.2005, 09:08)

shattered:-
Truly nice, finally showing that computer veterans (sorry..but my first was also a zx81) still dig new techniques. Nice and clean site with cool infos. More, more, more of it, please! :)
(31.03.2006, 20:32)

amygdela:-
bad bad bad... Ever heard of semantic HTML? Links like that should be styled in unordered lists!
(27.04.2006, 03:19)

Stu:-
amygdela, I could take issue on this point but suffice it to say I do point this out during the tutorial. However, this is based on my experiences when starting out with css (many years ago). I was utterly confused by the use of unordered lists for navigation links so rather than confuse newcomers with mumbo-jumbo I have shown an easy way to produce navigation links. Once they have mastered this they will find it easier to progress to the next level.

I am still not sure that unordered lists are the right way to go but as this is generally accepted then I use this method for most of my new demonstrations. Definition lists seem more appropriate as you can add a title to describe them as navigation links.

I hope this clarifies the reason for this tutorial.
(27.04.2006, 12:35)

ifc_programmer:-
hey stu_
just another visitor starting out on css and thankful to find an explanation for all this out there that doesn't confuse or make a beginner wonder just why they're doing this_
keep up good work and i suspect we'll all be better off! take care ;)
(16.06.2006, 14:38)

Rudolpho:-
Hello,
any chance to get the active page displayed other way then inserting a <span>. Problem is this way i have to change every page itself and insert the span for the corresponding link.
But the menue i have included via SSI to get the advantage if something changes not to change every single page. this way only one small text file has to be edited for all sites.
(11.10.2006, 11:18)

Jon:-
Well done on such an excellant site, its kept me glued to the computer for many a happy hour!
I've been working my way through your menu tutorial and would like to create a home button with a small image of a house in the button on the left with the text "home" next to it but with a space in between. I've used an image from FamFamFam's silk collection, (house.png). The problems I'm getting are placing the image and text vertically central in the box, and more frustratinly getting the image to render in Internet Explorer, I always get the faint size of the image (16px x 16px) on the background colour of the button. In Firefox the image renders OK with no faint size irrespective of the button colour.

Appreciate any suggestions!
(24.10.2006, 14:54)

anna:-
Excuse a newbie, but I thought the text-align:center; would center the menu but it doesn't so what is it there for?
Excellent tutorials btw, thank you!
(01.06.2007, 11:26)

Paul:-
Excellent website!

In using your horizontal menu (www.cssplay.co.uk/menus/listnine.html) in a fixed width configuration at www.ucog.org/NEWS/test2.htm I have the last cell "bleeding" over to a 2nd line in IE6. Works great in FFX and IE7. What am I doing wrong?
(30.11.2007, 19:46)

Paul:-
Stu, please ignore my query of a few minutes ago. A "overflow:hidden;" addition to the containing <div> did the trick.
(30.11.2007, 19:50)



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page