CODEWITHSUNDEEP
cssxhtml
Joemon
Joemon

Reputation: 793

Add bullet styling to dd element

I am using dl, dt and dd tags in one of my projects. I want to show a bullet before dd. How can I make my dds into a bullet list using CSS?

Upvotes: 22

Views: 27027

Answers (4)

Jonny Haynes
Jonny Haynes

Reputation: 3186

Easiest way is to change the properties on your <dd>

dd {
    display: list-item;
    list-style-type: disc;
    }

Works in every browser.

See this article: http://www.quirksmode.org/css/display.html

Upvotes: 37

Riza Dindir
Riza Dindir

Reputation: 19

You can either use the style attribute in the "dd" tag, or move that to a "style" section as a class or id. Since the dl is a list type you do not need the "display: list-item;" I think, might also be wrong. Anyways This might be used. Instead of the disc, you might use other types (look at http://www.w3schools.com/css/pr_list-style-type.asp)...

<html>
  <body>
    <dl>
      <dt>Term</dt>
      <dd style="display: list-item;">Term description</dd>
    </dl>
  </body>
</html>

Hope this helps.

Upvotes: 1

Ramuns Usovs
Ramuns Usovs

Reputation: 1454

tested it in firefox and just adding the style display:list-item should do the trick

Upvotes: 0

anddoutoi
anddoutoi

Reputation: 10111

Use a background-image.

Or try:

dd
{
    display: list-item;
    list-style-type: disc;
}

No idea if it will work though.

Upvotes: 0

Related Questions