Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Text between Li items

Reply
Thread Tools

CSS Text between Li items

 
 
davidjdoherty@gmail.com
Guest
Posts: n/a
 
      02-27-2006
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

 
Reply With Quote
 
 
 
 
mbstevens
Guest
Posts: n/a
 
      02-27-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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/




 
Reply With Quote
 
 
 
 
Mitja Trampus
Guest
Posts: n/a
 
      02-28-2006
(E-Mail Removed) 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.
 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      02-28-2006
(E-Mail Removed) 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)
 
Reply With Quote
 
Dado
Guest
Posts: n/a
 
      02-28-2006
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
unable to retrieve listbox items on postback , items moved usingjavascript between 2 list boxes (source and target ) divya ASP .Net 1 05-28-2008 05:27 AM
Trouble modifying text after copying items between listboxes AlBruAn ASP .Net Web Controls 1 07-17-2007 01:56 PM
Looping through CheckBoxList items doesn't pick up selected ones when items were disabled Bart Van Hemelen ASP .Net 2 09-04-2006 08:35 AM
Items in Outbox not moving to Sent Items Ben Lord Computer Support 0 10-23-2003 08:47 AM
grouping items among a list according to items subtag value Gilles Kuhn XML 0 09-15-2003 12:01 PM



Advertisments