using unordered lists to recreate navigation links

[Hardeep Rakhra]

Hi,

I currently have a set of navigation links across the bottom of a page
in this manner;

Site Links: Link1 | Link2 | Link2 | .... etc.

like this "<p>Site Links: <a href="index.html">Home</a> | <a
href="join.html">Join</a> | <a href="howtobuy.html">How to Buy</a>
| <a href="terms.html">Terms and Conditions</a> | <a
href="privacy.html">Privacy Policy</a> | <a
href="contactus.html">Contact Us</a> </p>"

now i wanna recreate that as a unordered list and have done so like this;

<ul id="sitelinks">
<li>Site Links:</li>
<li><a href="index.html">Home</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="howtobuy.html">How to Buy</a></li>
<li><a href="terms.html">Terms and Conditions</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>

and the CSS like this...

#sitelinks {
font: 66%/1.8 arial, sans-serif;
color: #bbb;
list-style: none;
padding: 0;
margin: 0;
}

#sitelinks li {
display: inline;
margin: 0 0.6em 0 0;
}

My question how can i (if possible) recreate the dividing pipes &#124
(|) between each link. I could put it in as part of the list but want
to try and accomplish this using CSS. I know it's gonna be something to
so with manipulating the bullet points but can't work out how.


Thank you in advance.

Hardeep.

 

[brucie]

My question how can i (if possible) recreate the dividing pipes &#124
(|) between each link. I could put it in as part of the list but
want to try and accomplish this using CSS.

not supported by IE
http://moreshit.bruciesusenetshit.info/pipe-after-thingy.html

 

[William Tasso]

...
My question how can i (if possible) recreate the dividing pipes &#124
(|) between each link.

{ ...
border.....
}

 

[Chris Harris]

My question how can i (if possible) recreate the dividing pipes &#124
(|) between each link. I could put it in as part of the list but want
to try and accomplish this using CSS. I know it's gonna be something to
so with manipulating the bullet points but can't work out how.

you could just define a right border and define a class of last item
with no right border.

Chris

 

[Toby A Inkster]

My question how can i (if possible) recreate the dividing pipes &#124
(|) between each link. I could put it in as part of the list but want
to try and accomplish this using CSS.

#sidelinks li {
padding-left: 0.5em;
border-left: 1px solid black;
margin-left: 0.5em;
}

 

[Toby A Inkster]

I know it's gonna be something to
so with manipulating the bullet points but can't work out how.

Oh, you still have bullet points? Then add to my previous answer:

#sitelinks li { list-style: none; }

 

[Hardeep Rakhra]

you could just define a right border and define a class of last item
with no right border.

Doh! I didn't think of that :0) Doing exactly that with my main menu.
Oh well pipe dreams i guess.

Thanks!

Hardep.