Ok, thanks David. That is of course a possibility. After deployment it
would be nice not to mess with code, and just change CSS. Having
pluggable code involves of course all kinds of testing and checking.
CSS is not necessarily easier to test and check, but at least one
knows one is not touching the data.


Here is my conclusion for now.

At the outset, it would seem CSS should allow "branding" out of the
box. That is more or less what it is designed for - to be able to
change the appearance of a page.

But it doesn't. It seems adding extra spans and divs is just so
powerful. Ironically, these are features of CSS itself, which lead to
more possibilities of changing the appearance.

For example, look at instructions like at

  http://www.1976design.com/blog/archive/2003/11/14/shadows/

which shows how to have nice shadow border around images.

<div class="img-ilus" style="width: 270px;"><img src="cat.gif"
width="260" height="200" alt="A stupid waving cat" /></div>

Ordinarily you might expect

<img src="cat.gif" width="260" height="200" alt="A stupid waving cat" />

to be enough, and the CSS would be able to handle adding the shadow as desired.

But not so. Adding the extra div allows more CSS mechanisms to take hold.

Another example which applies to the whole page. Look at http://www.andybudd.com

The HTML begins like this

<body>

<div id="wrapper">
<div id="logo"></div>
<div id="top"></div>

<div id="bg">
<div id="branding"></div>

<div id="nav">
:
:

And one can see how each div plays a role in altering the appearance.

And so it seems to me, to allow more pure CSS based appearance tweaks,
one should
add extra divs here and there and wrap all kinds of elements in extra divs.

So in general I propose this answer to my original question :

Wrapping 1.
Instead of

<body>

:
:
</body>

use

<body>
<div id='top'></div>
<div id='content'>
:
:
</div>
</div id='bottom'></div>
</div>

Wrapping 2.
Instead of
<ul>
  <li> list element 1 </li>
  <li> list element 2 </li>
</ul>

use

<div>
  <ul>
    <li class='first'> <span> list element 1</span></li>
    <li> <span> list element 2</span></li>
    <li class='last'> <span> list element 3</span></li>
  </ul>
</div>


And similar for images.

It would appear most of these extra divs and spans are good for
stretchable image elements (see also
http://www.dynamicdrive.com/style/csslibrary/item/plastic-tabs-menu/P10/).

If CSS allowed background-image-topleft, background-image-topright,
in addition to just background-image that would help.

So it seems the power of CSS has bitten itself.

I hope this is not too long. Please let me know your opinion.

Stephan


On 11/7/06, David Hucklesby <[EMAIL PROTECTED]> wrote:
> On Tue, 7 Nov 2006 10:49:19 -0800, Stephan Wehner wrote:
> > Hi there,
> >
> > I'm currently working on developing the HTML for a website which is going
> > to be deployed for several clients. These clients will be offered a
> > branding option.
> >
> > Now, I'm finding all kinds of little CSS tricks here and there, which use
> > extra spans and divs, so that a page can be made to look prettier.
> > Rounded corners here, another shade of a border there. The spans and divs
> > are only introduced to let CSS have another hook.
> >
> [snipped code sample ...]
> >
> > If another client came along, the #pagefooter .right #pagefooter .content
> > may be left unspecified in the CSS, if the #pagefooter specification
> > allows enough flexibility.
> >
> Hi Stephan,
> You may like to look at another tack, using some lightweight CMS.
> I am looking at TextPattern right now. It works with a set of "outline"
> pages populated with textpattern tags that pull in smaller sets of code
> called "forms". This makes the whole process of customization very much
> easier. You have your pages, which are basically templates, and the
> tiny amounts of XHTML code for the "forms" can be changed just as
> easily and quickly as the CSS for branding purposes.
>
> As this is a CSS discussion, I'll just point you to
> http://textpattern.com/
> and let you take a look.
>
> Cordially,
> David
> --
> www.hucklesby.com
>
>
>
>


-- 
Stephan Wehner
> http://stephan.sugarmotor.org
> http://stephansmap.org
> http://www.trafficlife.com
> http://www.buckmaster.ca
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to