Menu
So I'm marking up a client's web design. The page is an FAQs page, in which each FAQ section has a list of questions and answers. The most appropriate, semantic markup for this scenario is the html definition list.
The client's mockup also shows numbers beside each question/answer pair, such as an ordered list would have.
So naturally I thought I would just mark up the content with the <dl> element, and use CSS to add list-style-type: decimal. However, this is completely ignored.
Is it because the <dl> element cannot accept list-styling? That seems terribly backwards, as it is, after all, a list element!
Or am I doing something wrong with my markup?
Here's an example of my code CSS and HTML:
dl { list-style: decimal; }<dl class="some-list">
<dt><strong>Q</strong>: How Do I Do Some Thing?</dt>
<dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
</dd>
<dt><strong>Q</strong>: How Do I Do Some Other Thing?</dt>
<dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
</dd>
</dl>
527
From the Mozilla docs:
The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.
You can apply display:list-item to your dt element in CSS, and then also apply a list-style-type option to it as well.
dt.wanna-be-list {
display:list-item;
list-style-type: square;
}
Try this jsFiddle example :
<html>
<dl class="faq">
<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
<dd>1,000,000</dd>
<dt>What is the air-speed velocity of an unladen swallow?</dt>
<dd>What do you mean? An African or European swallow?</dd>
<dt>Why did the chicken cross the road?</dt>
<dd>To get to the other side</dd>
</dl>
<css>
.faq {
counter-reset: my-badass-counter;
}
.faq dd {
margin: 0 0 50px;
}
.faq dt:before {
content: counter(my-badass-counter, decimal);
counter-increment: my-badass-counter;
font: bold 50px/1 Sans-Serif;
left: 0;
position: absolute;
top: 0;
}
.faq dt, .faq dd {
padding-left: 50px;
}
.faq dt {
font: bold 16px Georgia;
padding: 4px 0 10px;
position: relative;
}
From this explanation you can see it working in this example
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
