Ray scribbled something along the lines of:
Hi Groups
To achieve the visual effect of the page
http://www.freewebs.com/nsl/test1.html
but remove the table and use CSS, I wrote a page like this
http://www.freewebs.com/nsl/test2.html
I define items in the <dl> element inline, and use DIV to break a
dt-dd group to a block. I also use DIV to split the <ul> element into
to 3 columns.
But this page fails the XHTML validation. XHTML does not allow me to
add DIV between list item.
I changed the code and tried the W3C validator's test. It finally pass
the validation:
http://www.freewebs.com/nsl/test3.html
But I don't like the <br /> in the <dl>. they just serve the
presentation purpose and are not necessary in the HTML document. I
don't think the <div class="member"> element is in good structure:
those guys are in one group not three ones. The <div
class="member_float"> element is even worse: I want to keep the same
order (sorted by last name) both in the HTML source code and the page
presentation with or without CSS.
What is the "elegant" design for this situation?
Thanks
Learn CSS.
This is really a common problem yet easy to solve.
All you need to do is use the clear property to stop elements from
lining up any more than you want them to.
However a design like
Jayaram Bhasker: Chair
Rob Anderson: Compiler Directives
David Bishop: Web and Reflextor Administrator
Apurva Kalia: Semantics Task Leader
[..]
or more correctly
Chair: Jayaram Bhasker
Compiler Directives: Rob Anderson
Web and Reflector David Bishop
Administrator:
Semantics Task Apurva Kalia
Leader:
would be easier than your centered version.
Just set dt up as "clear: left" so they don't float ridiculously.
The second part looks like a three-column list. The only way to do this
with a list that I can think of is to have three lists like so:
<ul id="container">
<li><ul id="column1">
<li>Victor Berman</li>
[..]
</ul></li>
<li><ul id="column2">
<li>Robert A. Flatt</li>
[..]
</ul></li>
<li><ul id="column3">
<li>Doug Perry</li>
[..]
</ul></li>
</ul>
and having the columns positioned. There may be other ways to solve this
with a list, but I do not think you can do this solely with CSS until
CSS 3 is widely support (there is column functionality in CSS 3 which
allows breaking one box into multiple columns).
I would rethink what you are trying to archieve. Are you interested in
making it look good, readable and accessible or are you trying to
archieve a pixel perfect transition from tabular to pure CSS layout? In
the later case I would recommend using something other than HTML/CSS.
Maybe a PDF would be preferable there.
--
Alan Plum, WAD/WD, Mushroom Cloud Productions
http://www.mushroom-cloud.com/