|
Posted by Steve Swift on August 8, 2007, 3:44 am
Please log in for more thread options
I'm trying to achieve a format of definition lists that matches the
definition lists generated by IBM's "BookMaster" (from quite a few years
ago).
The effect is as if the terms and their definitions are in a two column
table, all cells vertically aligned. But I'd like to achieve it with a
combination of <DT> <DD> and CSS so that the result *looks* like this:
<TABLE>
<TR VALIGN=BASELINE><TD><B>Life<TD>The meaning of life
<TR VALIGN=BASELINE><TD><B>Liff<TD>The meaning of Liff
</TABLE>
I've missed out all the closing tags to avoid line splitting, but the
above works in every browser (I'd be interested in exceptions, but
that's another topic).
I've done some research, and tried a few samples, but I seem to have
stumbled on the "simplest concept that is all but impossible in CSS".
So far, all I've learned is the CSS for "put this in some weird and
inexplicable place"
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
|
|
Posted by Jim Moe on August 8, 2007, 1:50 pm
Please log in for more thread options
Steve Swift wrote:
> I'm trying to achieve a format of definition lists that matches the
> definition lists generated by IBM's "BookMaster" (from quite a few years
> ago).
>
> The effect is as if the terms and their definitions are in a two column
> table, all cells vertically aligned. But I'd like to achieve it with a
> combination of <DT> <DD> and CSS so that the result *looks* like this:
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>dt - dd</title>
<style type="text/css">
dt {
clear: left;
float: left;
width: 20%;
margin: 0.5em;
}
dd {
float: left;
width: 70%;
margin: 0.5em;
}
</style>
</head>
<body>
<h1>dt - dd side by side</h1>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. </dt>
<dd>Definition 2: Quisque feugiat. Sed ipsum justo,
ultrices ut, feugiat eu, lacinia a, dolor. Suspendisse
eget turpis pellentesque purus blandit imperdiet.
Mauris arcu leo, fringilla in, hendrerit a, dapibus
at, lacus.
</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
</body>
</html>
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
|
|
Posted by Steve Swift on August 8, 2007, 3:40 pm
Please log in for more thread options
Thanks, Jim. You've proven H.L Mencken wrong (see
http://www.swiftys.org.uk/wiz?1099) by coming up with an answer which is
clear, simple and *right*!
This might be the moment that I embrace CSS in favour of simple HTML
formatting.
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
|
|
Posted by Jukka K. Korpela on August 8, 2007, 6:35 pm
Please log in for more thread options
Scripsit Steve Swift:
> Thanks, Jim. You've proven H.L Mencken wrong (see
> http://www.swiftys.org.uk/wiz?1099) by coming up with an answer which
> is clear, simple and *right*!
Actually, I don't think it would disprove the wisdom even if the solution
were right. The existence of correct solution does non imply non-existence
of wrong solutions.
Besides, Jim's CSS code does not address vertical alignment, which was part
of the problem description. So if it's the answer, then the problem was
different from the description. Vertical alignment works in a particular
manner for tables. Moreover, Jim's code sets an explicit width for the <dt>
elements - something you don't need to do when you use a table. (The code
sets the width to 20%. What happens when the <dt> contents is wider?)
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
|
|
Posted by Steve Swift on August 9, 2007, 2:08 am
Please log in for more thread options
> Besides, Jim's CSS code does not address vertical alignment, which was
> part of the problem description.
Whether Jim's solution addresses vertical alignment or not (and as far
as I can see it does, in every browser at my disposal), it is an
absolute dead ringer for the original BookMaster definition list, which
is what I was trying to emulate. It omitted the bold weight for the DT
tag, but even my feeble attempts at CSS were up to that.
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
|
| Similar Threads | Posted | | numbered definition list | July 23, 2007, 8:11 pm |
| Blank line after a definition list (DL)? | March 2, 2008, 3:44 pm |
| How to format unordered list? | August 31, 2006, 9:08 am |
| Format a list into multiple columns, or dynamically display columnsusing CSS? | August 20, 2004, 12:15 am |
| What is the difference between a "A" and "TD A" definition ? | May 9, 2007, 4:52 am |
| Definition lists | March 3, 2008, 9:01 am |
| change CSS definition by javascrip | May 13, 2005, 2:07 pm |
| Status Code Definition of "-1" | December 11, 2006, 11:45 am |
| Bad HTML tag format | August 1, 2006, 11:33 am |
| Entering . to format | January 5, 2008, 6:19 pm |
|
XML Sitemap