Converting <div> to <ul> using CSS only - Possible?

div ul using stylesheet only

[cssatsc]

I have an existing piece of PHP code that displays a list of items using <br>. It has an existing <div> style in CSS.

I would like "to bullet" that list.

The straightforward ("brute force") approach would be to modify that PHP code to issue <ul> instead of <div>.

However, for the sake of learning more about the wonders of CSS (and possibly avoid "hacking" that PHP code which I didn't write), I am curious to know:

Is it possible, using CSS div properties, to assign "a prefix bullet" to each new line?

This way, I can "eat the cake and have it too": Have a bulleted list and retain the div properties (as already defined in the CSS).

The only problem is... if this is possible, I have no idea where to start.

Tips, clues, hints and/or ideas would be greatly appreciated.

Thanks,
Webmaster at SC

[DrDoc]

Not possible. Anonymous content boxes cannot be assigned properties.

You could, however, use JavaScript to convert the div contents after the fact. But I suggest just fixing the PHP code.

[cssatsc]

Thanks. How about the property display: list-item?

[swa66]

As DrDoc said, you can't target your content with a selector ... hence anything you could write inside that selector isn't going to be of any use.

To clarify:

<div>
  one<br />
  two<br />
  ...<br />
</div>

there's no selector to select the individual lines as you've made one paragraph with line breaks, we cold select the paragraph at best (or the first line or first character even, but that's the end of it).

OTOH:

<div>
  <p>one</p>
  <p>two</p>
  <p>...</p>
</div>

Now we could do anything we wanted as we have a paragraph we can select and play with.

Still better is to have is semantically relevant by using

<ul>
  <li>one</li>
  <li>two</li>
  <li>...</li>
</ul>

even if you don't need the bullets, a list is a list and should be entered in the (x)html as such.

[g1smd]

Fix the HTML code to use list items.

There's likely other fixes you can employ in the code for other data structures.

[londrum]

you could probably do it with a background image if you really, really wanted to.

if you size the font in pixels, and the line-height in pixels, then you would know the distance between each line.

so you'd just have to make a background image for the div that has bullets down the lefthandside spaced out to match the lines. if you then give the div a bit of lefthand padding as well... bingo! it would look like a bulleted list.

it wouldn't even matter if the lines wrapped. you'd just to make sure that the image contained enough dots.

[g1smd]

That will 'look' like a list to humans, but will not convey that it is a list to search engines and other non-visual agents.

[cssatsc]

Thank you all for your answers. They all were very helpful and educating. I decided to follow your advice and fix the PHP code to convert the lines to a list (<ul>).

[edited by: eelixduppy at 4:33 am (utc) on April 25, 2009]
[edit reason] disabled smileys [/edit]