WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Baby Question re separator (greater than and pipe)

for

From: Kynn Bartlett
Date: Apr 15, 2006 3:00PM

On 3/14/06, smithj7 < <EMAIL REMOVED> > wrote:
> I actually liked the idea of using a border in the css style sheet for a
> separator of links in my required footer (look of footer established by
> Parent Organization). Worked fine, till I checked site without css
> style sheet.

These days it is probably better to create your navigation links as a
list and style it with CSS.

<ol id="sitenav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/news/">News</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ol>

And styles:

ol#sitenav { margin-left: 0; padding-left: 0; }
#sitenav li { display: inline;
padding-left: 1em; margin-left: 1em;
border-left: 1px solid black; }
#sitenav li:first-child { border-left: none;
margin-left: 0; }

Or whatever styles you want, really.

Using lists in this way is preferrable to using separator characters,
especially if you are concerned about functionality with CSS off.

--Kynn

--
Kynn Bartlett < <EMAIL REMOVED> >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com