using unordered lists to recreate navigation links

Discussion in 'HTML' started by Hardeep Rakhra, Jan 11, 2004.

  1. 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.
    Hardeep Rakhra, Jan 11, 2004
    #1
    1. Advertising

  2. Hardeep Rakhra

    brucie Guest

    in post <news:btsk70$b0oi4$-berlin.de>
    Hardeep Rakhra said:

    > 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


    --
    brucie
    brucie, Jan 11, 2004
    #2
    1. Advertising

  3. Hardeep Rakhra wrote:
    > ...
    > My question how can i (if possible) recreate the dividing pipes &#124
    > (|) between each link.


    { ...
    border.....
    }

    --
    William Tasso - http://WilliamTasso.com
    William Tasso, Jan 11, 2004
    #3
  4. Hardeep Rakhra

    Chris Harris Guest


    > 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
    Chris Harris, Jan 11, 2004
    #4
  5. Hardeep Rakhra wrote:

    > 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 BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Jan 12, 2004
    #5
  6. Hardeep Rakhra wrote:

    > 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; }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Jan 12, 2004
    #6
  7. Chris Harris wrote:
    >
    > 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.
    Hardeep Rakhra, Jan 12, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    Unordered lists of images

    Luigi Donatello Asero, May 5, 2005, in forum: HTML
    Replies:
    6
    Views:
    452
    Andy Dingley
    May 7, 2005
  2. sam

    unordered lists

    sam, Dec 2, 2005, in forum: HTML
    Replies:
    9
    Views:
    370
    Disco Octopus
    Dec 4, 2005
  3. sorry.no.email@post_NG.com

    A Choice for Unordered Lists

    sorry.no.email@post_NG.com, May 5, 2006, in forum: HTML
    Replies:
    10
    Views:
    653
    Mark Parnell
    Jun 19, 2006
  4. Guest
    Replies:
    2
    Views:
    1,128
    Martin Jay
    Nov 18, 2007
  5. Roedy Green

    ordered lists vs unordered lists

    Roedy Green, Aug 30, 2008, in forum: HTML
    Replies:
    7
    Views:
    573
    dorayme
    Aug 30, 2008
Loading...

Share This Page