csszengarden.com and span tags

i've noticed that the CSS Zen Garden (csszengarden.com) almost always
places what seem to me to be extranious span tags inside other tags.
here's an example:

<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style
Sheets">CSS</acronym> Design</span></h2>
</div>

what are the span tags between the h1 and h2 supposed to do that h1 and
h2 (or pageHeader, or some other, "parent" tag) can't, already, do?

yawnmoth wrote:

i've noticed that the CSS Zen Garden (csszengarden.com) almost always
places what seem to me to be extranious span tags inside other tags.
here's an example:

div id="pageHeader"
h1><span>css Zen Garden</span></h1
h2><span>The Beauty of <acronym title="Cascading Style
Sheets">CSS</acronym> Design</span></h2
/div

what are the span tags between the h1 and h2 supposed to do that h1 and
h2 (or pageHeader, or some other, "parent" tag) can't, already, do?

Sometimes you might want to style a header in a way which requires both
block & inline form. I discovered this only recently - I needed my
headers to have clear: left, to drop below floated images in any
previous sections, thus they had to be displayed as block level
elements, which by default h<x> will be.

However I also wanted a background colour/image on the heading which
only extended as far as the text of the heading plus some small padding.
The span gives this. Further, there's no other (at least not widely
supported) means of directly sizing the block level h<x> element to
shrink wrap its text, so styling of the span is required.

Since Zen Garden is marking up the content to allow generic styling, the
above becomes necessary at all such points where designers might need
support for this kind of structure.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

allow you to pull elements out of context?
for example - your h1 style coulds specify a monster-sized background
image with the words "css Zen Garden" in a tripped out font... and you
apply display:none to the span so that the original text doesn't cover
it up...

Or even to position it in a different spot from the h1 tag all
together...

Just some thoughts on the reasoning behind that.

Once upon a time *thulsey (AT) gmail (DOT) com* wrote:

allow you to pull elements out of context?
for example - your h1 style coulds specify a monster-sized background
image with the words "css Zen Garden" in a tripped out font... and you
apply display:none to the span so that the original text doesn't cover
it up...

Or even to position it in a different spot from the h1 tag all
together...

Just some thoughts on the reasoning behind that.

Behind what?

Please, read the guidelines for posting on newsgroups, e.g. about
quoting what you are replying to!

Quote from C.I.W.A.S. FAQ
------------------------------
Include quoted material but trim it to the essentials. When quoting,
make sure that it's clear who said what! Many participants consider it
rude to snip out their attributions.

Make your comment in a natural conversation order, below each section
of the material you have decided to quote and comment. Do not
"top-post", e.g. in the style that a faulty configured ("out of the
box") MS-Outlook(Express) invites you to do.
-------------------------------

--
/Arne

Michael Rozdoba <mroz (AT) nowhere (DOT) invalid> writes:

Since Zen Garden is marking up the content to allow generic styling,
the above becomes necessary at all such points where designers might
need support for this kind of structure.

I'm planning on enabling generic styling for ourdoings.com later this
month. Is Zen Garden the only site to look at for hints about how to do
so, or are there other resources?

--

http://ourdoings.com/ Let your digital photos organize themselves.
Sign up today for a 7-day free trial.