[css-d] Styling a definition list
Hi, I've followed another approach to create the effect of a table-like definition list: http://onwebdev.blogspot.com/2011/04/css-styling-definition-list.html Works even in IE6. Enjoy! :-) HTH http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling a definition list
On Jul 30, 2009, at 12:45 AM, Andy Stevens wrote:
I have a page with an existing unordered list
pIn these terms,/p
ul
listrong'content'/strong means the stuff you are looking at on
this Site./li
listrong'you'/strong, strong'your'/strong and
strong'yours'/strong means you, the idiots accessing this
Site./li
listrong'we'/strong, strong'us'/strong and
strong'our'/strong means Big Corporation Inc./li
/ul
(more or less) that I reckon, from a semantic viewpoint, ought really
to be a definition list. So as a first step I swapped it for
pIn these terms,/p
dl
dtstrong'content'/strong/dt ddmeans the stuff you are
looking at on this Site./dd
dtstrong'you'/strong, strong'your'/strong and
strong'yours'/strong/dt ddmeans you, the idiots accessing this
Site./dd
dtstrong'we'/strong, strong'us'/strong and
strong'our'/strong/dt ddmeans Big Corporation Inc./dd
/dl
However, I need to preserve the way it looked before, as the powers
that be like it that way.
In that case, I suspect you'll have to stay with an unordered list,
unless you don't need to support IE 6 7.
Any suggestions of the easiest/best way to make it appear as if it's
still using ul li?
I tried
dt {display:list-item;}
dd {display:inline;}
but that still puts the definitions on the line below. I tried using
dt {display:list-item; float:left; clear:left;}, but all the
definitions run together one after the other instead of following
their terms. dd {display:block;} works a bit better with that, but
the definition lines still wrap to the edge of the term rather than
looking like a continuous paragraph of text (and the vertical
alignment is out between the two parts in each case).
That would be the way to go, if the content of the dt's is more or
less the same length, and there is enough space. If the content of the
dt wraps, then things will look odd. And IE 6 and 7 will drop the
list-marker due to 'hasLayout' on the dt.
Another option is using generated content (to generate a list marker
and a line-break) and display: inline. But that won't work in IE 6
7. IE 8, Safari 3+, Opera 9+, and Firefox 3+ should be OK with this.
dt {display:inline; margin: 0 .2em 0 0; background:#ccc;}
dd {display:inline; margin:0;}
dt:before {
content: '\25cf';
color: rgb(153, 153, 153);
text-indent: 0;
margin: 0 .1em -.2em -.95em;
padding: .07em .18em 0 0;
font-family: 'Lucida Grande', Symbol;
}
dd:after {
content: '\A';
white-space: pre;
}
This test file has the 3 cases:
http://dev.l-c-n.com/_temp/definition-list-genContent.html
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling a definition list
Andy Stevens wrote:
I have a page with an existing unordered list
I would keep it that way.
(more or less) that I reckon, from a semantic viewpoint, ought really
to be a definition list.
I tend to agree, but what you really benefit from changing the markup,
presentationally or otherwise? User agents that pay attention to dl
semantics exist in our dreams only, for the most of it, partly because dl
is mostly used for something that ain't never no def list.
However, I need to preserve the way it looked before, as the powers
that be like it that way.
If you change ul to dl, there is no way to make it look the same again.
Browsers may and do have their own ways of rendering these constructs, and
these ways are largely undocumented and may change without any notice,
before or after.
Any suggestions of the easiest/best way to make it appear as if it's
still using ul li?
Well, this is thus an academic question, but I do love academia, don't I?
:-)
I tried
dt {display:list-item;}
dd {display:inline;}
but that still puts the definitions on the line below.
Well, there won't be any bullets then, as a rule, as there is no room for
them. The following gives a somewhat reasonable approximation, I'd say:
dt { display: list-item; margin-left: 2em; float: left; clear: both;
padding-right: 0.3em; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling a definition list
On 30/07/2009, at 3:45 AM, Andy Stevens wrote:
Hi,
I have a page with an existing unordered list
(more or less) that I reckon, from a semantic viewpoint, ought really
to be a definition list. So as a first step I swapped it for
pIn these terms,/p
dl
dtstrong'content'/strong/dt ddmeans the stuff you are
looking at on this Site./dd
dtstrong'you'/strong, strong'your'/strong and
strong'yours'/strong/dt ddmeans you, the idiots accessing this
Site./dd
dtstrong'we'/strong, strong'us'/strong and
strong'our'/strong/dt ddmeans Big Corporation Inc./dd
/dl
However, I need to preserve the way it looked before, as the powers
that be like it that way.
Any suggestions of the easiest/best way to make it appear as if it's
still using ul li?
What about the following?
dt,dd { display: block; float: left;}
dt { clear: left; }
dd { clear: none;}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling a definition list
Hi,
I have a page with an existing unordered list
pIn these terms,/p
ul
listrong'content'/strong means the stuff you are looking at on
this Site./li
listrong'you'/strong, strong'your'/strong and
strong'yours'/strong means you, the idiots accessing this
Site./li
listrong'we'/strong, strong'us'/strong and
strong'our'/strong means Big Corporation Inc./li
/ul
(more or less) that I reckon, from a semantic viewpoint, ought really
to be a definition list. So as a first step I swapped it for
pIn these terms,/p
dl
dtstrong'content'/strong/dt ddmeans the stuff you are
looking at on this Site./dd
dtstrong'you'/strong, strong'your'/strong and
strong'yours'/strong/dt ddmeans you, the idiots accessing this
Site./dd
dtstrong'we'/strong, strong'us'/strong and
strong'our'/strong/dt ddmeans Big Corporation Inc./dd
/dl
However, I need to preserve the way it looked before, as the powers
that be like it that way.
Any suggestions of the easiest/best way to make it appear as if it's
still using ul li?
I tried
dt {display:list-item;}
dd {display:inline;}
but that still puts the definitions on the line below. I tried using
dt {display:list-item; float:left; clear:left;}, but all the
definitions run together one after the other instead of following
their terms. dd {display:block;} works a bit better with that, but
the definition lines still wrap to the edge of the term rather than
looking like a continuous paragraph of text (and the vertical
alignment is out between the two parts in each case).
I've tried various other combinations of block, inline and
inline-block, but still couldn't get it to flow as needed (and most of
those were missing the bullets too).
Anyone got any ideas (or better yet, a ready-rolled solution) for
achieving this?
Andy
--
http://pseudoq.sourceforge.net/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
