On Apr 30, 2007, at 2:28 AM, Paul Novitski wrote:
The method you're using to present the definition list in two
columns is to split the markup into two lists. However, I believe
it's really just one list, so you're changing the markup in a way
that misrepresents the semantics of the page purely for
presentational purposes.
You can accomplish the dual-column list in CSS by moving the first
DT in column 2 back up the page with a negative margin-top, then
shifting all the items in column 2 over with a
postive margin- left. This technique is
illustrated in example 6 in my A List
Apart article
<http://www.alistapart.com/articles/multicolumnlists/
>. It does require that the height of column 1 is predictable if
you're using static CSS or calculable if you're generating your CSS
on the fly.
At 4/30/2007 10:06 AM, CK wrote:
Wonderful suggestion and article, should the <dt> have mark-up
similar, then follow along with the CSS, from the article?
Thanks!
My examples in the article are all ordered &
unordered lists, but technique #6 can certainly be applied to definition lists.
_______________________
If you're generating your list markup from a
script such as PHP you can probably add ids &
classes precisely where you need them: identify
the first item of column 2 uniquely, then
identify each item in column 2 with a class:
<dl>
<dt>column 1, item 1</dt>
<dd>column 1, item 1</dd>
<dt>column 1, item 2</dt>
<dd>column 1, item 2</dd>
<dt class="col2" id="col2">column 2, item 1</dt>
<dd class="col2">column 2, item 1</dd>
<dt class="col2">column 2, item 2</dt>
<dd class="col2">column 2, item 2</dd>
</dt>
dt#col2
{
margin-top: -6em;
}
dt.col2,
dd.col2
{
margin-left: 20em;
}
_______________________
If you're dealing with static html, you could
give every list item a unique id and then
generate the stylesheet to split it into columns:
<dl>
<dt id="a-t">item 1</dt>
<dd id="a-d">item 1</dd>
<dt id="b-t">item 2</dt>
<dd id="b-d">item 2</dd>
<dt id="c-t">item 3</dt>
<dd id="c-d">item 3</dd>
<dt id="d-t">item 4</dt>
<dd id="d-d">item 4</dd>
</dt>
#c-t
{
margin-top: -6em;
}
#c-t,
#c-d,
#d-t,
#d-d
{
margin-left: 20em;
}
_______________________
A script can obviously calculate where a new
column begins by dividing the number of items by
the number of columns, compensating for
multiple-line items as needed, and bingo, Bob's
your uncle. Since line-wrap is a client-side
phenomenon in layouts that limit width, a
server-side script can make a best-guess and a
client-side script can refine the column breaks as the user resizes their text.
I'd hate to have to produce extensive markup like
this by hand, but then I generate pages by
scripting almost exclusively and leave such
mind-numbing markup details to the server that
seems so content to wade through large boring jobs in mere milliseconds.
When CSS3 is finally supported commonly we can
dispense with all this and generate columnar markup more easily.
W3C CSS3 module: Multi-column layout
http://www.w3.org/TR/css3-multicol/
Introducing the CSS3 Multi-Column Module
by Cédric Savarese
http://www.alistapart.com/articles/css3multicolumn/
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
