Nik Coughlin wrote:
Further to my earlier post in alt.html, I ended up preparing these pages:
http://nrkn.com/skinning/
In my opinion only variations of the nesting are in practice, practical.
At least for modern layouts.
I'm not at this time reading alt.html, do you have a pointer for that
post so I can look it up.
I had been working on a "Standard Module Format", whereas the same
"block" could be styled as you wish.
It's not that different than yours:
<div class="skinContainer flat">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="left">
<div class="right">
<p>nesting technique</p>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom"></div>
</div>
</div>
</div>
Except I've added an inner wrapper to do the drop shadows, and/or
top/bottom double backgrounds. (I also didn't do the topLeft and
bottomLeft wrappers, but I like that idea.)
I see you can do that (drop shadow) with your left/right classes if
you turn off (not use) the rest. Dropping a shadow on all of it would be
difficult, unless I've missed something.
Also, I wonder if the top container block couldn't be a heading,
since content placed there typically is a heading. You could still have
the nested div inside for corner effects...
Let us (or at least myself) know how this has been working out for you!
I'd like to see more.
Jeff
>
They list different ways to "skin" an HTML element (ie add rounded
corners, drop shadows, various other graphical effects) using images
while still allowing for viewport and text re-sizing.
Anyone know of any other techniques that I've missed?
Any other comments?