[thelist] Total separation of content and presentation

Stephen Rider evolt_org at striderweb.com
Wed Dec 22 12:23:12 CST 2004


On Dec 21, 2004, at 2:55 PM, Peter-Paul Koch wrote:

>> What we're trying to accomplish is a page laid out in the CSS,
>> independent of the order/structure it appears in the HTML.

> A client of mine wanted exactly the same, and pointed to CSS Zen
> Garden...
>
> I succesfully ported the first design to CSS...
>
> However, the second design my client sent me required the HTML
> elements to be in a different order. The first design had a left
> sidebar for the navigation, the second one placed the navigation on
> the right.
>
> If I'd been forbidden to change the order of the HTML elements, I
> wouldn't have had any choice but to use absolute positioning, which in

Obviously I haven't seen the site in question: but I don't understand 
your problem.  Change 'float: left;' to 'float: right;' and your menu 
moves from the left to the right.  (Yes, I'm sure it a little more 
complicated than that... however I think the point holds.)

In HTML, semantic navigation commonly uses a div (id="navigation" or 
id="sidebar", depending) and the navigation links are put in a list.  
Doing this you can use CSS to put the list on the right, the left, or 
horizontally across the top.  The hardest part to me of using CSS to 
visually redesign a site is the inevitable changing of graphics -- but 
a bit of Grep search-and-replace can take care of that, or you can use 
one of the various CSS background methods (which I avoid, but to each 
their own....)

CSS Zen Garden, while a neat demonstration, is hugely over-marked-up in 
purely semantic terms (as I'm sure you now know).  It's full of nested 
spans and divs, which was intended to give the designers a huge range 
of flexibility.  How heavily you mark things up for the sake of that 
flexibility is a case of striking a balance: no markup is inflexible, 
too much markup is bloated.



More information about the thelist mailing list