Problem in styling List

[Ray]

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_f loat"> 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

[Spartanicus]

Re: Problem in styling List

loushi@mail.com (Ray) wrote:
[color=blue]
>Hi Groups[/color]

Pointless crossposting removed. At least you should have set follow ups
to one group.
[color=blue]
>What is the "elegant" design for this situation?[/color]

Scrap the current "design", it is inflexible and illogical.

You have 3 choices for that list: block, inline or floated with a fixed
width, the latter comes closest to what you have now (but without the
inflexibility).

--
Spartanicus

[Brian]

Re: Problem in styling List

Ray wrote:[color=blue]
> Hi Groups[/color]

Please choose 1 group to post to. Or at least suggest followups. It
saves us time. I'll leave it to you to choose a f'up group if you have
further questions.
[color=blue]
> To achieve the visual effect of the page
> http://www.freewebs.com/nsl/test1.html
> but remove the table and use CSS,[/color]

But the top looks like a table to me.

<TABLE>
<TR>
<TD>Jayaram Bhasker</TD>
<TD>Chair</TD>
</TR>
<TR>
<TD>Rob Anderson</TD>
<TD>Compiler Directives</TD>
</TR>
<!-- etc. -->
</TABLE>

If it helps, consider that you could have table headers:

<TR>
<TH>name</TH>
<TH>position</TH>
</TR>

That, to me, indicates that you have real tabular data, and that table
markup is appropriate. You can use css to center the table, make the
second td in each row italics, etc. Right align the first td, left align
the second, and you're pretty close to what I think you want.
[color=blue]
> I define items in the <dl> element inline, and use DIV to break a
> dt-dd group to a block.[/color]

You suggest an inline presentation, then add more markup to get
block-level like behavior. If you don't want to use table markup, then
simplify what you've chosen instead. Leave dt and dd as block level, and
float the dt left.
[color=blue]
> I also use DIV to split the <ul> element into to 3 columns.[/color]

Having content flow from one column to the next is not trivial. The
easiest way is to create 3 UL elements, and float the first 2 left.
[color=blue]
> But this page fails the XHTML validation.[/color]

Is there a reason for choosing XHTML instead of the more robust HTML?

--
Brian (remove "invalid" from my address to email me)

http://www.tsmchughs.com/

[Brian]

Re: Problem in styling List

Ray wrote:[color=blue]
> Hi Groups[/color]

Please choose 1 group to post to. Or at least suggest followups. It
saves us time. I'll leave it to you to choose a f'up group if you have
further questions.
[color=blue]
> To achieve the visual effect of the page
> http://www.freewebs.com/nsl/test1.html
> but remove the table and use CSS,[/color]

But the top looks like a table to me.

<TABLE>
<TR>
<TD>Jayaram Bhasker</TD>
<TD>Chair</TD>
</TR>
<TR>
<TD>Rob Anderson</TD>
<TD>Compiler Directives</TD>
</TR>
<!-- etc. -->
</TABLE>

If it helps, consider that you could have table headers:

<TR>
<TH>name</TH>
<TH>position</TH>
</TR>

That, to me, indicates that you have real tabular data, and that table
markup is appropriate. You can use css to center the table, make the
second td in each row italics, etc. Right align the first td, left align
the second, and you're pretty close to what I think you want.
[color=blue]
> I define items in the <dl> element inline, and use DIV to break a
> dt-dd group to a block.[/color]

You suggest an inline presentation, then add more markup to get
block-level like behavior. If you don't want to use table markup, then
simplify what you've chosen instead. Leave dt and dd as block level, and
float the dt left.
[color=blue]
> I also use DIV to split the <ul> element into to 3 columns.[/color]

Having content flow from one column to the next is not trivial. The
easiest way is to create 3 UL elements, and float the first 2 left.
[color=blue]
> But this page fails the XHTML validation.[/color]

Is there a reason for choosing XHTML instead of the more robust HTML?

--
Brian (remove "invalid" from my address to email me)

http://www.tsmchughs.com/

[Ashmodai]

Re: Problem in styling List

Ray scribbled something along the lines of:
[color=blue]
> 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_f loat"> 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[/color]

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/

[Ashmodai]

Re: Problem in styling List

Ray scribbled something along the lines of:
[color=blue]
> 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_f loat"> 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[/color]

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/