Definition list with inline pairs - css

I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dts and dds display:inline, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?
Example:
<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>
yielding:
Term 1 Def 1
Term 2 Def 2
The CSS for making them inline would be:
dt,dd{display:inline;}
yielding:
Term 1 Def 1 Term 2 Def 2
...which is not what I want (line breaks between pairs missing).

Another solution:
dt:before {
content: "";
display: block;
}
dt, dd {
display: inline;
}

Try this:
dt, dd { float: left }
dt { clear:both }
Add margin-bottom to dt dd if you'd like more space between them..

I tried these answers, finally I end up with this.
Which I simplified to:
dl {
padding: 0.5em;
}
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
}
dt:after {
content: ":";
}
dd {
margin: 0 0 0 110px;
}

Another solution is to use inline-block and percentage widths. As long as the combined width of dd + dt is greater than 50%.
dt, dd {
display: inline-block;
}
dt {
width: 50%;
}
dd {
min-width: 5%;
}
I found this gave me a more consistent positioning of the dd elements.

Another simple solution
dt {
display: block;
float: left;
min-width: 100px;
}
https://jsbin.com/vumeyowana/edit?html,css,output

Andrey Fedoseev's answer does not work in old android (stock browser 4.3).
This does work for that browser and all others I have checked:
dt::before {
content: "\A";
white-space: pre-wrap;
display: block;
height: .5em;
}
dt, dd {
display: inline;
margin: 0;
}
<dl>
<dt>AM</dt>
<dd>Description for am that should span more than one line at narrow screen widths.</dd>
<dt>PM</dt>
<dd>this means afternoon.</dd>
</dl>

I wanted to be able to create a list with inline pairs, centrally aligned. Using dt:before { display; block} worked well for this, but when copying text from a browser, pseudo elements are ignored so would end up being pasted like this:
Term 1: Def 1Term 2: Def 2
This is a minor issue, but there's another approach documented at MDN:
WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.
The following solution works well for this:
dt, dd {
display: inline;
}
<dl>
<div><dt>Term 1:</dt> <dd>Def 1</dd></div>
<div><dt>Term 2:</dt> <dd>Def 2</dd></div>
</dl>

If you have a "zebra" background or border separating each DT-DD pair, then this will work nicely:
dt, dd {
padding: 8px 6px;
display: block;
}
dt {
font-weight: 600;
float: left;
min-width: 50%;
margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
background: #eee;
}
This will appear to wrap both items in a row with a grey background. As long as the DT has less vertical height than the DD - which is usually the case.
(Haven't browser tested yet.)

Related

Rendering 2 blocks as a single element

I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
 content: ": ";
 display: inline;
 white-space: nowrap;
 } 
h4 {
 display: block; }
h4~p {
 display: block; }
 
h4:first-child { 
display: inline;}
h4+p {
 display: inline;
 }
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!

Creating a stack control like this in css3

How can i create a stack control like this above?. Below is what i have tried, but when i add text on either of sides it breaks.
div#storage ul.storage li {
display: inline-block;
width: 22px;
height: 10px;
margin-right: 6px;
background: green;
}
div#storage ul.storage li:nth-child(n+3) {
background: lightgrey;
}
http://jsbin.com/tehijapi/15/edit
How can i create a stack like this in pure css3.
You can do it by using pseudo elements (I am assuming your content is static)
ul.storage:before{
content: 'Storage';
}
ul.storage:after{
content: '25% Usage';
}
JS Bin Sample | JS Bin Sample with JS assigned data (uses HTML5 data attributes)

Cannot apply padding to <b>

Is there a reason why the padding-top is not working for the tag? See http://jsfiddle.net/MMwdR/
<b>hello world</b>​
b {
padding-top: 100px;
}
​
display it as a block.
display: block;
To add on to what was said, update your CSS to:
b {
display: block;
padding-top: 100px;
}
Otherwise the element is displayed as a part of the line, so you cannot add padding-top, etc.

Why do WebKit browsers not render this definition list the same way as Gecko, Presto, and Trident?

When I use this HTML:
<dl>
<dt>term</dt>
<dd>description</dd>
<dt>term</dt>
<dd>description</dd>
</dl>
And this CSS:
dl, dt, dd {
margin: 0;
padding: 0;
}
dt, dd {
display: inline;
}
dt {
font-weight: bold;
}
dt:before {
display: block;
content: "separator";
font-weight: normal;
}
dt:after {
content: ":";
}
dd {
padding-left: 0.5em;
}
WebKit renders it like this:
But Firefox 3.5 and above, Opera 10 and above (I haven't tested below 10), and Internet Explorer 8 and above render it like this:
It seems as if WebKit ignores the display: block; of dt:before.
Try it yourself.
What causes this behavior, and how can I get WebKit's result to look like the other browsers' results?
It looks like it's a webkit bug but I've gotten it to render correctly using the code listed here. Basically, I changed block to 'inline-block' and gave it a width of 100%.

inline list li:last-child:after { content: ", "} Can I get rid of the extra space it creates?

http://forumgallery.rollinleonard.com/artists.php
I can't seem to get rid of the space before the comma in my list.
It makes no sense!
Here is the relevant part of my CSS
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.5em;
word-spacing: 1px;
}
li.artistlist:after {
content:", ";
}
.artistlist li:last-child:after {
content:"";
}
ul li{
margin:0;
}
I did a small demo with less CSS code that renders without a whitespace before the comma. Tested in Chrome and Firefox on Mac.
Looked at your updated page and found the problem with it. Read more about possible whitespace bugs within different browsers here: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html
Your html looks like this:
<li class="artistlist">
Davis Cone
</li>
Try to remove the whitespace between your tags and it renders fine:
<li class="artistlist">Davis Cone</li>
For special chars like space you should use Unicode in the content. Try this:
li.artistlist:after {
content:",\00a0";
}

Resources