Re: Styling by attribute-based association?

Matthew, apply :
<style>
   li > nl > li { display:none }
   li > nl > li > label { display:block }
   li[open] > nl > li { display:block }

   li > nl { backround-image: plus.png; background-repeat: no-repeat; 
background-position: 3px 3px;}
   li[open] > nl { backround-image: minus.png }
</style>

To the following:

<nl>
    <label>Contents </label>
    <li href="#introduction">Introduction</li>
    <li>
       <nl>
           <label>Terms</label>
           <li href="#may">May</li>
           <li href="#must">Must</li>
           <li href="#should">Should</li>
       </nl>
    </li>
    <li href="#conformance">Conformance</li>
    <li href="#references">References</li>
    ...
</nl>

and you will get something close to collapsible trees.

In fact collapsible tree behavior (TreeView) needs something more  - ability
to navigate through items by arrow keys - like in select
this is why I've choosen <select> as a base for implementation
of collapsible trees. In fact I have only one behaivor: "select" which
covers all <select> cases - collapsible and plain.

See "master style sheet" internally used in htmlayout component:
http://www.terrainformatica.com/htmlayout/master_ss.css

And screenshot at
http://www.terrainformatica.com/htmlayout/images/selects2.jpg:

Andrew Fedoniouk.
http://terrainformatica.com


----- Original Message ----- 
From: "Matthew Raymond" <mattraymond@earthlink.net>
To: "Mark Birbeck" <mark.birbeck@x-port.net>
Cc: "'Andrew Fedoniouk'" <news@terrainformatica.com>; "'W3C CSS'" 
<www-style@w3.org>
Sent: Thursday, October 27, 2005 12:51 AM
Subject: Re: Styling by attribute-based association?


|
| Mark Birbeck wrote:
| >>But again this is a different "label".  It has no this fancy "for".
| >>So it has no mentioned problem of matching indirect IDs in CSS.
| >
| > Exactly! Sounds like a good design to me ;)
|
|   Actually, it's awful. Look at the example of <nl> from the specification:
|
|| <nl>
||    <label>Contents </label>
||    <li href="#introduction">Introduction</li>
||    <li>
||       <nl>
||           <label>Terms</label>
||           <li href="#may">May</li>
||           <li href="#must">Must</li>
||           <li href="#should">Should</li>
||       </nl>
||    </li>
||    <li href="#conformance">Conformance</li>
||    <li href="#references">References</li>
||    ...
|| </nl>
|
|   Now remember that <nl> is essentially for navigational menus. In a
| menu, you see the label for a submenu first, then you see the submenu
| when you click on the label. Therefore, you'd expect the label to have
| the same style as the grandparent <li> element, with the exception that
| there may be an arrow to indicate the submenu or something similar.
| Therefore, from a user perspective, styling should look like this:
|
|   nl -> li -> label
|
|   However, the actual styling is more like this:
|
|   nl -> li -> nl -> label
|
|   So, for instance, if you want the nested <nl> element to have a red
| background color, the label background would also be read, even though
| this would not be the background color of the other items at that the
| level of the label in the list. It also means that if a style for the
| nested <nl> differs from the style of the parent <li>, <label> can no
| longer inherit from the <li> element with regards to that property.
|
|   Consider this. If you want the submenu hidden and use "display: none"
| for when the <nl> element isn't focused, how will the user see the
| <label>???
|
|   Ideally, you'd want the <label> to be outside the list, but
| associated with the navigational list:
|
|| <nl>
||    <label>Contents </label>
||    <li href="#introduction">Introduction</li>
||    <li>
||       <label>Terms</label>
||       <nl>
||           <li href="#may">May</li>
||           <li href="#must">Must</li>
||           <li href="#should">Should</li>
||       </nl>
||    </li>
||    <li href="#conformance">Conformance</li>
||    <li href="#references">References</li>
||    ...
|| </nl>
|
|   Above, I'm using what I've referred to in the past as "sibling
| association" to associate the label with the navigational list.
| Unfortunately, this can't be used in situations where a submenu can be
| called from multiple locations. For example, right here in my trusty
| email program, I have both and "attach" menu option and an "attach"
| toolbar button that can both bring up the same attachment submenu. How
| exactly do you do that without some kind of |for|-like attribute?
|

Received on Thursday, 27 October 2005 18:18:11 UTC