Lists without list tags

[Sathallrin]

I have some divs of links such as:

<div class="links">
<a href="apage.html">Text</a><br />
<a href="apage.html">Text</a><br />
<a href="apage.html">Text</a></div>

Is there a way to make it like a list, with bullets using CSS without having to change the html code at all.

I know I can use a background image like this.

.links a {
padding-left: 15px;
background: url("bullet.gif") no-repeat;
}

But I was wondering if there is a way to do this without using an image.

[zackattack]

Hi Sathallrin

Not without making the links an actual list in HTML, without a background image, the bowser has no way of knowing what this element is.

If you were able to change the HTML however, you could use an unordered list, example below...

<ul>
<li><a href="apage.html">Text</a></li>
<li><a href="apage.html">Text</a></li>
<li><a href="apage.html">Text</a></li>
</ul>

ul {
list-style: none;
}
li {
padding-left: 15px;
background: url(nice-bullet.gif} 0 50% no-repeat;
}

[createErrorMsg]

It's worth noting here that changing the mark up is really the best answer. Not simply because it's the semantically "right" way to do it, but because it saves a lot of hassle in the long run. List data is much easier to manipulate and control if it's marked up as list data. You can use the background image trick to mimic a list, but it's a purely visual hack. View such a list with styles disabled, or from the POV of a se spider or screen reader and all the meaning, context and value is lost. It becomes a string of anchors, nothing more. There are real and valid reasons to use semantically correct code that go well beyond "purist" arguments. I would advise changing the markup.

All that said, you can add display:list-item; to the styles for those anchors and they will display as a bulleted list (although your control over it is more limited than an actual, semantically marked up list)...

.links a{display:list-item;}

cEM

[Sathallrin]

Thankes cEM that was exactly what I was trying to find. Normally I would change the HTML to suit the purpose, but in this case the HTML could not be edited, and I needed to find a way to still make it act like a bulleted list.