CSS Text between Li items

Discussion in 'HTML' started by davidjdoherty@gmail.com, Feb 27, 2006.

  1. Guest

    Hi, I'm not sure if its possible to do but I couldn't find a solution
    on the net.

    <UL>
    <LI>Text1</LI>
    <LI>Text2</LI>
    <LI>Text3</LI>
    </UL>

    Basically I want it to display like this:

    Text1 - Text2 - Text3


    I don't have control how the UL and LI elements are rendered, so can is
    it possible to use CSS to put some text in between each element. I can
    simply make it inline so that it renders like:

    Text1 Text2 Text3

    But can you use CSS to put in the '-'?

    Any help would be greatly appreciated.
    Dave
     
    , Feb 27, 2006
    #1
    1. Advertising

  2. mbstevens Guest

    wrote:
    > Hi, I'm not sure if its possible to do but I couldn't find a solution
    > on the net.
    >
    > <UL>
    > <LI>Text1</LI>
    > <LI>Text2</LI>
    > <LI>Text3</LI>
    > </UL>
    >
    > Basically I want it to display like this:
    >
    > Text1 - Text2 - Text3
    >
    >
    > I don't have control how the UL and LI elements are rendered, so can is
    > it possible to use CSS to put some text in between each element. I can
    > simply make it inline so that it renders like:
    >
    > Text1 Text2 Text3
    >
    > But can you use CSS to put in the '-'?
    >
    > Any help would be greatly appreciated.
    > Dave
    >


    See the the following article:
    http://www.alistapart.com/articles/taminglists/
     
    mbstevens, Feb 27, 2006
    #2
    1. Advertising

  3. wrote:
    > <UL>
    > <LI>Text1</LI>
    > <LI>Text2</LI>
    > <LI>Text3</LI>
    > </UL>
    >
    > Basically I want it to display like this: [using CSS only]
    >
    > Text1 - Text2 - Text3


    To make those dashes real text, you'd need parts of CSS that are not yet widely supported
    (see "content" property in CSS specs) and are not about to be in the near future (IE!).

    You can, however, make that dash with a non-repeating background image on the LIs. To hide
    the first dash, apply some negative margin to LIs (to shift them left) and set UL's
    overflow to hidden (to clip off the left part of the leftmost LI).

    I've never done this, not even as a test, but it should work.
     
    Mitja Trampus, Feb 28, 2006
    #3
  4. Jim Moe Guest

    wrote:
    >
    > <UL>
    > <LI>Text1</LI>
    > <LI>Text2</LI>
    > <LI>Text3</LI>
    > </UL>
    >
    > Basically I want it to display like this:
    >
    > Text1 - Text2 - Text3
    >

    <UL>
    <LI>Text1</LI>
    <LI> - </LI>
    <LI>Text2</LI>
    <LI> - </LI>
    <LI>Text3</LI>
    </UL>


    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Feb 28, 2006
    #4
  5. Dado Guest

    Cool, cheers for that article mb. It has exactly what I'm after. The
    dividing line does not have to be text selectable so I'm just going to
    do it with borders.

    Dave
     
    Dado, Feb 28, 2006
    #5
    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. Gilles Kuhn
    Replies:
    0
    Views:
    448
    Gilles Kuhn
    Sep 15, 2003
  2. Bart Van Hemelen
    Replies:
    2
    Views:
    4,693
    Bart Van Hemelen
    Sep 4, 2006
  3. Larry Bud
    Replies:
    13
    Views:
    7,740
    Larry Bud
    Jan 7, 2008
  4. divya
    Replies:
    1
    Views:
    1,105
    Munna
    May 28, 2008
  5. AlBruAn
    Replies:
    1
    Views:
    113
    AlBruAn
    Jul 17, 2007
Loading...

Share This Page