DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 03-17-2006, 07:40 AM   #1
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default Navigation & CSS

I have noticed that most tutorials about how create navbars use a list as a starting point, I have only found one that doesn't.

Is there a reason for this, other than convention?

I was thinking that perhaps screen readers would pick up on the fact that it is a list, instead on text with a link.

Just want to know before I get into bad habits...
Bo Aakerstrom is online now   Reply With Quote
Old 03-17-2006, 08:44 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Bo Aakerstrom
I have noticed that most tutorials about how create navbars use a list as a starting point, I have only found one that doesn't.

Is there a reason for this, other than convention?
You raise an interesting question. I used to make a horizontal navigational bar by typing the links separated by vertical rules or using background and border. But Ian suggested using a list, and sent me to AListApart, which started out by saying that what is a menu, after all, but a list.

I have been using unordered lists ever since. But I am not sure that there is a usability hit if you don’t, and it is sometimes ever so much easier to code some other way.

One thing about a list: it implies a collection of related items, which a string of Paragraphs does not. That could have an effect on screen readers.

I look forward to hearing a better rationale for this myself.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-17-2006, 04:20 PM   #3
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by Bo Aakerstrom
I have noticed that most tutorials about how create navbars use a list as a starting point, I have only found one that doesn't.

Is there a reason for this, other than convention?

I was thinking that perhaps screen readers would pick up on the fact that it is a list, instead on text with a link.
Logically, a menu is a "list of choices" that's why it's generally accepted that structurally a list is the best structural markup to create a menu. Also makes sense when CSS is turned off. So it has fast been becoming a convention.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-18-2006, 07:38 AM   #4
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,321
Default

As long as there are no adverse things happening it screen readers etc. it is still safe to use CSS to style ordinary links as long as the style sheet is active (if that's the right word) if I understand this correctly. But (there is always a but) for the sake of "graceful degradation" it is generally better to use a list?

What type of list is the one to use? Un-ordered or definition lists are the ones I've seen used.
Bo Aakerstrom is online now   Reply With Quote
Old 03-18-2006, 07:55 AM   #5
jrabold
Member
 
jrabold's Avatar
 
Join Date: Aug 2005
Location: Oakland California USA
Posts: 63
Default

Quote:
Originally Posted by dthomsen8
The <ul> and <li> tags are convenient for doing styles.
I think menus are lists, so should be coded that way. I have run into one drawback. In one case my menu was a hierarchical list, and I wanted to style the list item corresponding to the current page. But styling applied to that list item also affected the items below it in the hierarchy (because any <li> ... </li> fully contains any <ul> ... </ul> below it). That prevented me from changing the background. I resorted to changing the link text appearance only, by enclosing it in a span.

   
__________________
John Rabold
jrabold is offline   Reply With Quote
Old 03-18-2006, 09:51 AM   #6
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Quote:
Originally Posted by Bo Aakerstrom
What type of list is the one to use? Un-ordered or definition lists are the ones I've seen used.
I prefer to use an unordered list, and if written correctly, this will degrade to a readable/useable link list without CSS.

For a good collection of CSS menus see Stu Nicholls CSS Play site.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website


Last edited by Kelvyn; 03-18-2006 at 10:07 AM.
Kelvyn is offline   Reply With Quote
Old 03-18-2006, 07:36 PM   #7
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Bo,

Good answers already. Only other common way I've seen is using <p> tags or tables, but while either of those will work using <ul> and <li> has more semantic meaning to a text screen reader.

One advantage of using a table is if you want a horizontal top menu; if the CSS is disabled, it turns into a bullet list instead of a horizontal list. Still works, though, and I've been trying to get away from tables for layout (though in a broad sense, a set of <td> tags for navigation is kind of a data table).

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-18-2006, 08:53 PM   #8
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Lists with CSS for Navigation

Quote:
Originally Posted by Bo Aakerstrom
I have noticed that most tutorials about how create navbars use a list as a starting point, I have only found one that doesn't.

Is there a reason for this, other than convention?

I was thinking that perhaps screen readers would pick up on the fact that it is a list, instead on text with a link.

Just want to know before I get into bad habits...
The <ul> and <li> tags are convenient for doing styles. The bullets can be changed or dropped, the underlining of links can be changed, and the usual font specifications can be made.
dthomsen8 is offline   Reply With Quote
Old 03-19-2006, 04:29 AM   #9
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default By ID rather than tag?

Quote:
Originally Posted by jrabold
I think menus are lists, so should be coded that way. I have run into one drawback. In one case my menu was a hierarchical list, and I wanted to style the list item corresponding to the current page.

But styling applied to that list item also affected the items below it in the hierarchy (because any <li> ... </li> fully contains any <ul> ... </ul> below it). That prevented me from changing the background. I resorted to changing the link text appearance only, by enclosing it in a span.
What about styling with an ID on each level, rather than by the <ul> and <li> tags? That is:

Code:
 <ul id="firstul"> 
<li id="firstli>
 
	 <ul id="secondul"> 
		<li id="secondli>
  <!--- second level of list here, followed by closing tags --->
That would allow you to style both levels.
dthomsen8 is offline   Reply With Quote
Old 03-19-2006, 06:53 AM   #10
jrabold
Member
 
jrabold's Avatar
 
Join Date: Aug 2005
Location: Oakland California USA
Posts: 63
Default

Quote:
Originally Posted by dthomsen8
What about styling with an ID on each level, rather than by the <ul> and <li> tags?
I think I tried that, or a variation on it, and found that it still did not work the way I wanted it. I don't have time today to experiment with it.

   
__________________
John Rabold
jrabold is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS vertical navigation bar dthomsen8 Web Site Building & Maintenance 10 03-14-2006 06:41 AM
Site Navigation How To? BobRoosth Web Site Building & Maintenance 14 02-28-2006 11:36 AM
Navigation Suggestion donmcc How to Use the Forum 5 08-30-2005 01:49 PM


All times are GMT -8. The time now is 02:52 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.