[thelist] Total separation of content and presentation

James Hardy evolt at weeb.biz
Tue Dec 21 09:52:38 CST 2004


And lo; it came to pass that the great prophet, Ellen Kanner spake. And 
the huddled masses rejoiced to hear:
> We are looking to use <divs>, most definitely.
> 
> What we're trying to accomplish is a page laid out in the CSS, 
> independent of the order/structure it appears in the HTML.  <divs> that 
> are independent of one another and could be relocated, within the CSS, 
> without having to go into the HTML.  Not using container <divs>, if it's 
> possible.
> We're trying to establish our 'perma-code', so should a new design come 
> down the pike, we could modify the style sheets in a few locations, 
> rather than go in to thousands of HTML pages and do the restructuring 
> there. Anyone done tests without container <divs> and hacks? Our layout 
> will be three fluid columns, any length, with flexible vertical sizing 
> on divs so text can be resized.
> 
> We'd like to talk with anyone who has experience with this...
> 
> : )  ellen
> 

*Long winded reply - feel free to ignore*

Hi Ellen,
I did actually try something like this about a year or so ago as a bit 
of a proof-of-content, I created lots of bits of content, each one in 
seperate div with its own id. Then absolutely positioned them all using css.

it was pretty funky to be able to change the layout based on the style 
rather than changing the markup or using any script. However with great 
funkiness came great problems.

Because all the divs had to be absolutely positioned they sizes had to 
be fixed. This meant that when the content overflowed it ended up 
scrolling (just getting it to display meant that it covered everything 
up so I decided that overflow:scroll was a much better solution) This 
soon got annoying - just imagine a page where everything was in its own 
iframe.

The second version looked a lot better, but required client side scripting.

Again, each section was in its own identified DIV, however the page also 
had a script that manipulated the DOM to reorder where things were, so 
for example the menu could be appended to a previously empty div which 
was defined as navigationSection. Then it loaded a stylesheet to make it 
look nice. This meant that the DIVs could have content of variable 
lengths and would flow nicely, but the entire layout could be changed at 
the click of a button.

With the previous absolute stylesheet staticly linked as a fallback 
position for people with scripting turned off it ended up as a nice 
solution: Content in one file, Style in another, but linked together 
with script in a third. very separate and complient.

To be honest though, it seemed a lot more hassle than it was worth, and 
I haven't done it the same since (though have used certain elements of 
the concept). I think a certain amount of presentation is appropriate 
within the content if it of a contextual nature (if that makes sense). 
for example I am happy to hard code that my navigation elements will all 
appear together in a block (a container div) since I can't really forsee 
a situation where I would not want them to appear together, and 
semanticly they ARE all navigation elements so being in #navBlock is 
fine for me from a semantic point of view.

Anyway, I hope this has helped a little bit.

James


More information about the thelist mailing list