Re: Controlling structure with CSS

Ian Hickson wrote:
>I completely agree that there are cases where it wouldn't make much sense
>to reorder the presentation.
>
>But look at CNN:
>
>    http://www.cnn.com/
>
>Today there is a Google search box at the bottom of the left column. Above
>it is a "services" box with four links.
>
>Whether the Google search box comes before or after the Services box is
>completely a stylistic matter.

And I agree that some minor expansions to CSS positioning would be 
good.  A simple visual swap like you mention here would be a good 
thing, and isn't handled particularly well by the current spec, 
mostly due to the need to know the height of an element before it is 
rendered.  (If you could specify that an absolutely positioned 
element is not removed from the flow, that would be useful in a case 
like this.)

I'm all for having some degree of flexibility, and this is a definite 
area of weakness.  On the other hand:

>Another example in the same page: at the bottom today, there are three
>boxes under a section titled "From our Partners". They each give a partner
>name, followed by some headlines from that news source, followed by a link
>to allow subscribing to that news source. The structure could be something
>like:
>
>    <section>
>     <h>Partners</h>
>     <dl>
>      <dt>Time</dt>
>      <dd>
>       <ul>
>        <li><a href="...">...</a></li>
>        ...
>       </ul>
>       <p><a href="...">Subscribe to Time</a></li>
>      </dd>
>      ...
>     </dl>
>    </section>
>
>Now imagine that the desired rendering has the three partner boxes
>together, but the subscribe links put in a block on the far right.
>
>How would you do it without moving things out of the structure of the
>document during presentation?

Why is it necessary to allow that in pure CSS?  Your verbal 
description of the current page relates certain elements to one 
another, then proposes a structure which accommodates that functional 
description.  Now you say you want to take that structure and 
rearrange it such that your functional description no longer applies. 
Here's a functional description of your redesign: 'There are four 
boxes under a section titled "From our Partners".  The first three 
boxes each give a partner name, followed by some headlines from that 
news source.  The last box contains subscription links to the various 
sources." The relationship between each specific link and its 
particular source has largely been lost.

So if an author wants functional flexibility, why not require the 
author to explicitly rethink the structure so as to allow for it?

For example:

<sectionA>
   <h>Partners</h>
   <section1>
     <h>Time</h>
       <ul>
        <li><a href="..."></a></li>
        ...
       </ul>
   </section>
   <section2>
     [sports] ...
   </section>
   <section3>
     [business]
   </section>
   <section4>
     <ul>
       <li><a href="...">Subscribe to Time</a></li>
     ...
     </ul>
   </section>
</section>

Layout 1 (current):
Sections 1 through 3 floated left with specified (%) widths.
Section 4 cleared left, width specified to 100% of containing block. 
List items floated left with identical specified (%) widths.

Layout 2 (your proposed):
Sections 1 through 4 floated left with appropriate widths.

Any semantic loss is quite minimal, and the payoff is that Layout 2 - 
which doesn't show the connection implied by the definition list* - 
is then quite easy to accomplish.  If you want to semantically show 
the relationship between the partner and the subscription link (not 
unreasonable), then why not require the connection to be shown 
visually (which your proposed Layout 2 doesn't do)?

Your method designs in the semantic connection at the structural 
level, but then allows for the presentational destruction of that 
semantic connection.  How is that a good thing?

-- 

-Adam Kuehn


*Personally, I've never much liked this generalized use of a 
definition list.  But I won't quibble.

Received on Monday, 19 April 2004 13:43:21 UTC