Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

List item navigation lists & menu separators

  • Reply to topic
  • Post new topic
Reply with quote When using list items <ul><li><a href="whatever">Link</a></li></ul>

to create navigation, does anyone have some insight into creating separator characters or elements between the menu items?

For example, if you want a pipe character between each link, what would be the preferred method?

example:

Link 1 | Link 2 | Link 3

The tricky part is that you do not want a "|" to precede the first item or follow the last item. In this way, the "|" serves to "separate" the elements rather than introduce them (as a bullet would do).

The only solution that I can think of is to wrap the first item and the last item in a class or id attribute that identifies them as such so that you could apply the appropriate css to those items. But I am curious if there are other approaches to this problem.
Reply with quote Hi Scott,

Welcome to the forums Smile

I read your post a couple of times and I'm a little lost on what the problem you have is, could you please clarify?

How do the pipe characters in the content have a relationship to the styling of the first and last bulet?

Cheers,
Nigel

Accessify Forum Administrator ~ Nigel Peck / Starstream
"Everything I say is not meant to be set in stone" - Van Morrison
Reply with quote The issue you are concerned with generally applies to situations where you have:
Code:
<a href="url">Link</a><a href="url2">Link 2</a>
where there are no separators between the individual <a> tag pairs. It is my belief that if you create a list of links using <ul> or <ol> and each link exists within its own <li>...<li>, then the issue of a separator does not exist.

If you go to my own site, http://jrickards.ca or my resume, http://jrickards.ca/resume the navbars have both been created using styled lists - the first one uses a background image on the <ul> and absolutely positioned <li> so that they appear in the correct position.

Jules
Reply with quote So the question was probably referring to adjacent links and the WAI 10.5:
Quote:
Until user agents render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.


There are two main trains of thought on that issue though some purists beg to differ.

};-) http://www.xhtmlcoder.com/

WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Reply with quote If you're making inline lists, and want decorative link separators, CSS should be the way to go:

Code:

.links > li {
    display: inline;
}
.links > li:before {
    content: " | ";
}
.links > li:first:before {
    content: "";
}
Reply with quote I think your solution will be best in the long run, but I could not get it to work as expected in Netscape 7.1 PC

Everything works except the "first" selector. The pipe character still appears in front of the first element. Any ideas?

#x8childMenu li:before {
content: "|";
}


#x8childMenu li:first:before {
content: "";
}
Reply with quote
Jason Davis wrote:
If you're making inline lists, and want decorative link separators, CSS should be the way to go: ...


Generated content is very cool but it currently has poor support. Secondly, if CSS is off, then the divider, created using generated content, would be gone and therefore, you are left with your original situation, no separator between links.

On a personal note (rant begins), I question the whole inclusion of generated content within CSS. I thought that content was supposed to be separate from style but with this feature of CSS, some content may be generated by the style. I just don't understand the reasoning behind this CSS property.

Jules
Reply with quote
Jules wrote:
Generated content is very cool but it currently has poor support. Secondly, if CSS is off, then the divider, created using generated content, would be gone and therefore, you are left with your original situation, no separator between links.


No. If CSS is off, so is the inline styling of list items. Separators for unstyled list items are unnecessary.

Jules wrote:
On a personal note (rant begins), I question the whole inclusion of generated content within CSS. I thought that content was supposed to be separate from style but with this feature of CSS, some content may be generated by the style. I just don't understand the reasoning behind this CSS property.


Generated content has a zillion and one uses for pure decoration, which CSS is all about. The fact that you can type text as the value of the "content" property as if it were a paragraph, does not negate the extreme usefulness of GC in general. Without it, CSS would be a very poor tool.

M.
Reply with quote
Moose wrote:
If CSS is off, so is the inline styling of list items. Separators for unstyled list items are unnecessary.
Are you suggesting that if I have used:
Code:
li {display: inline; list-style-type: none;}
, both of which are contrary to normal list styling, that I will need a separator?

For example, my resume site at http://jrickards.ca/resume/index.php, the navbar is a styled list (with a nested list where needed). I have no separators but because the basis of the navbar is a list, I felt that separators were not necessary - Bobby didn't require the separators although it strips out the styles before testing.

Jules
Reply with quote
Jules wrote:
Are you suggesting that if I have used:
Code:
li {display: inline; list-style-type: none;}
, both of which are contrary to normal list styling, that I will need a separator?


Yes, unless you use some additional CSS to ensure that words do not run into one another, as they will under inline styling. For people who use visual browsers separators of some sort (large spacing, or padding or borders or generated content) are very useful, if not essential.

Jules wrote:
For example, my resume site at http://jrickards.ca/resume/index.php, the navbar is a styled list (with a nested list where needed). I have no separators but because the basis of the navbar is a list, I felt that separators were not necessary - Bobby didn't require the separators although it strips out the styles before testing.


Yes, but from what I've seen it's not of inline display, so it's immediately clear to sighted users where one item ends and another begins. Consider a navigation like mine. Without separators, users would be done for. Still, it's a matter of choice whether I would use GC or borders. I chose the latter because they also work in IE.

Wojtek
Reply with quote If you guys haven't seen it linked to by one of many, many sites yet, you should check Listamatic out. It is in my opinion the best nav list site on the net. Don't overlook the Listamatic 2 link either.

Created and hosted by Max Design but popularized by Zeldman and his site - http://www.zeldman.com
Reply with quote
Moose wrote:
Consider a navigation like mine. Without separators, users would be done for..


Indeed... I find this to be a great example of where proper semantic markup provides a more universally accessible website. The list markup ensures that users of screen readers get a "better" experience, in that the screen reader will identify/announce each <li> as such, thereby automatically providing the "separation" that we have to provide for visual user agents...
Reply with quote Is this not an acceptable solution?

<ul>
<li>item1</li>
|
<li>item2</li>
</ul>
Reply with quote That isn't valid.

You could do this (without lists; I don't like, but it _is_ an option):

Code:
<a/><span class="hide"/><a/><span class="hide"/><a/>
Reply with quote I was looking for a similar solution for my own site. I could have sworn I found the answer on the Listamatic site but it doesn't seem to be there any more. Anyway it works well as a css solution but I can't claim it as my own!

HTML Code:
<li class="style"><a href="#">Link</a></li>
<li class="style"><a href="#">Link</a></li>
<li class="style"><a href="#">Link</a></li>
<li class="style"><a href="#">Link</a></li>
<li class="style"><a href="#">Link</a></li>
<li class="last"><a href="#">Link</a></li>

CSS:
li.style a{
display: inline;
list-style: none;
text-decoration: none;
margin: 0px;
border-right: 1px black solid;
padding-left: 5px;
padding-right: 3px;
font-weight: bold;
float: left;
}
li.last a{
display: inline;
list-style: none;
border-right: 0px;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
margin: 0px;
font-weight: bold;
float: left;
}

Obviously the key value is the border-right.
If this looks familar to anyone and you know where the link to the list example is, let me know Embarassed

Display posts from previous:   

Page 1 of 2

Goto page 1, 2  Next

All times are GMT

  • Reply to topic
  • Post new topic