Re: [css-d] Aligning List Of Name:Value Pairs On Colon
On 11/11/05, Graham Cook [EMAIL PROTECTED] wrote: And the reason that these fit more elegantly than a table? Compare the code above to a table below (which really should also should include thead, tbody and col id's), it it just so much more concise and no blank cells. trtdHomer/tdtdMarge's layabout husband/td/tr trtd/tdtdBart's dad/td/tr trtd/td tdSpringfields second biggest consumer of Duff/td/tr This is where rowspan comes into play ... trth rowspan=3 scope=rowHomer tdMarge's layabout husband trtdBart's dad trtdSpringfields second biggest consumer of Duff ... and we have no blank cells. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
How about using a table, as this does look like tabular data to me?
Then you could easily align the TH to the right and the TD to the
left.
In the new world of CSS, aren't we supposed to avoid tables?
Same applies to your span solution - give the first span a fixed
width, display it block, float it to the left and text-align it to the
right.
Yep, that is just what I was looking for:
HTML:
div class=container
ul class=properties
lispan class=nameName:/spanspan class=valueValue/span/li
lispan class=nameAnother name:/spanspan class=valueAnother
value/span/li
lispan class=nameOther name:/spanspan class=valueOther
value/span/li
/ul
/div
CSS:
ul.properties {
list-style: none;
}
ul.properties span.name {
display: block;
float: left;
width: 10em;
text-align: right;
}
Thanks,
Curious.
On Wed, Nov 09, 2005 at 10:22:50PM +, Christian Heilmann wrote:
I have a list of name:value pairs:
div class=container
ul class=properties
liName: Value/li
liAnother name: Another value/li
liOther name: Other value/li
/ul
/div
How about using a table, as this does look like tabular data to me?
Then you could easily align the TH to the right and the TD to the
left.
Same applies to your span solution - give the first span a fixed
width, display it block, float it to the left and text-align it to the
right.
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
Here's a case for a definition list. Following code is very basic, but you
can build on it however you like.
A definition list is certainly better semantic markup than the span
solution.
Your example CSS looked good in IE and Opera. However, in Firefox the
dd is displayed below the dt.
Thanks,
Curious.
On Thu, Nov 10, 2005 at 11:05:19AM +1100, Graham Cook wrote:
-Original Message-
Here's a case for a definition list. Following code is very basic, but you
can build on it however you like.
Graham Cook
www.uaoz.com
style
dt {
display:block;
float:left;
width:10em;
text-align : right;
}
dd {
display:block;
width:10em;
text-align : left;
}
/style
dl
dtName:/dt ddValue/dd
dtAnother Name:/dt ddAnother Value/dd
dtOther Name:/dt ddOther Value/dd
/dl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
How about using a table, as this does look like tabular data to me? Then you could easily align the TH to the right and the TD to the left. In the new world of CSS, aren't we supposed to avoid tables? No, we're supposed to avoid the misuse of tables to achieve presentational goals. Table elements are there for the purpose of displaying tabular data, so if your data is tabular, use a table at that point on your page. That way your markup is semantically sound. Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
On 10/11/05, Curious [EMAIL PROTECTED] wrote: How about using a table, as this does look like tabular data to me? In the new world of CSS, aren't we supposed to avoid tables? No, just the abuse of them (or any other element) for layout. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
Here's a case for a definition list. Following code is very basic, but you can build on it however you like. A definition list is certainly better semantic markup than the span solution. Ok, this might be getting very hypothetic, but I disagree. The definition description describes the title, not the other way around. dtMarge/dt ddHomer's wife/dd Your example would define the other way around, wouldn't it? That's why a table would still be a valid solution. The idea is not to avoid tables at all cost - if something is tabular data, use a table. The idea is to avoid abusing tables for layout purposes where a CSS construct is easier to maintain. http://icant.co.uk/articles/tables/ http://icant.co.uk/csstablegallery/ HTH Chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
Hi Curious, Firstly, correction to dd style, add margin-left:10.25em; Secondly, the semantics dtMarge/dt ddHomer's wife/dd Your example would define the other way around, wouldn't it? I believe your original requirement of name: value fits the example by Chris above, and does not swap the items around. To expand on the example, additional dds could be appended, eg: dl dtHomer/dt ddMarge's layabout husband/dd ddBart's dad/dd ddSpringfields second biggest consumer of Duff/dd dtMarge/dt ddHomer's wife/dd ddLisa's mum/dd ddSpringfields biggest user of blue hair dye/dd /dl And the reason that these fit more elegantly than a table? Compare the code above to a table below (which really should also should include thead, tbody and col id's), it it just so much more concise and no blank cells. Furthermore, when read by a screenreader the relationships become self evident. table tr tdHomer/td tdMarge's layabout husband/td /trtr td/td tdBart's dad/td /trtr td/td tdSpringfields second biggest consumer of Duff/td /trtr tdMarge/td /trtr td/td tdHomer's wife/td /trtr td/td tdLisa's mum/td /trtr td/td tdSpringfields biggest user of blue hair dye/td /tr /table Graham Cook www.uaoz.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
I have a list of name:value pairs: div class=container ul class=properties liName: Value/li liAnother name: Another value/li liOther name: Other value/li /ul /div How about using a table, as this does look like tabular data to me? Then you could easily align the TH to the right and the TD to the left. Same applies to your span solution - give the first span a fixed width, display it block, float it to the left and text-align it to the right. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning List Of Name:Value Pairs On Colon
-Original Message-
Here's a case for a definition list. Following code is very basic, but you
can build on it however you like.
Graham Cook
www.uaoz.com
style
dt {
display:block;
float:left;
width:10em;
text-align : right;
}
dd {
display:block;
width:10em;
text-align : left;
}
/style
dl
dtName:/dt ddValue/dd
dtAnother Name:/dt ddAnother Value/dd
dtOther Name:/dt ddOther Value/dd
/dl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
