H
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 |
(|) 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.
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 |
(|) 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.