Critique, image slicing for fluid CSS layout tutorial

dorayme wrote:

In article <13j5b6j72c0ahfc (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

Nik Coughlin wrote:

I believe that this is the minimum amount of markup necessary to achieve
this effect Would love to be proven wrong.


Is the effect worth the internal complexity?

Depends on how you count it. It only has to be done once by the
author, and from then on it can give multiple pleasure. On
principle, this may well be worth it.

I'll have to trust others reports that it gives them pleasure.

Like the often seen attempts at rounded box corners, it looks
mid-90s kitschy to me, but as you say below, individual choice might
be allowable.

Forcing markup like this:
div class="hr"><div><div><hr></div></div></div
is just unsemantic, even though it is technically valid.

This is yet another issue. But, given that there are limitations
in browser implementations of some css where this sort of thing
can be more easily done in a kosher manner, it is very severe to
never fall to temptation. Perhaps it is an area where a little
individual choice might be allowable.

In article <13j5f4djrkk9213 (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

dorayme wrote:
In article <13j5b6j72c0ahfc (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

Nik Coughlin wrote:

I believe that this is the minimum amount of markup necessary to achieve
this effect Would love to be proven wrong.


Is the effect worth the internal complexity?

Depends on how you count it. It only has to be done once by the
author, and from then on it can give multiple pleasure. On
principle, this may well be worth it.

I'll have to trust others reports that it gives them pleasure.

Like the often seen attempts at rounded box corners, it looks
mid-90s kitschy to me, but as you say below, individual choice might
be allowable.

One has to abstract from the individual implementations. The
argument might be on a higher level, namely, are all designs that
stretch and bend and flex various things that cannot be so easily
done 'purely', to be ruled out of order on grounds of a semantic
ideal, is semantic purity in web matters such a very strong and
clear concept that it can bear the weight of such strictness?

So weighty and poignant are these questions that I urge a
humbleness before them, a patience from rushing to judgement.

--
dorayme

Well bust mah britches and call me cheeky, on Thu, 08 Nov 2007 07:07:53
GMT dorayme scribed:

I believe that this is the minimum amount of markup necessary to
achieve this effect Would love to be proven wrong.


Is the effect worth the internal complexity?

Depends on how you count it. It only has to be done once by the
author, and from then on it can give multiple pleasure. On
principle, this may well be worth it.

That line never works on dates.

Forcing markup like this:
div class="hr"><div><div><hr></div></div></div
is just unsemantic, even though it is technically valid.

This is yet another issue. But, given that there are limitations
in browser implementations of some css where this sort of thing
can be more easily done in a kosher manner, it is very severe to
never fall to temptation. Perhaps it is an area where a little
individual choice might be allowable.

Despite your rationalization, the least css is the best css. I believe
GTalbot has already resolved the original issue, but Nik is no dummy so the
real problem is the complexity of the styling.

--
Bone Ur
Cavemen have formidable pheromones.

F'ups set to c.i.w.a.s

GTalbot wrote:

Also, this universal selector rule
* {
margin: 0;
padding: 0;
}
is a clear sign of over-declaring, over-defining. The use of the
universal selector is very rarely recommendable and is discouraged by
many CSS gurus.

But not all.

By removing all margin and padding on all elements, you are later
force to add them back almost everywhere (for almost all elements like
p, li, headings, etc) instead of relying on browser default
declarations. I personally never do that and I certainly do not
encourage that practice because it invariably lead to over-declaring,
over-defining.

Being later forced to add spacing back to elements is one of the reasons
Eric Meyer *likes* it (see his "Reset Reloaded" article at
<http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/> with some
more of the reasoning behind it at
<http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/> ),
although he does specifically say he doesn't like the * universal
selector, he does do this:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
etc.

While I see his reasoning, I'm not yet persuaded I want to do this for
every page/site I do. But then, I'm not a CSS guru, so maybe my lack of
experience keeps me unenlightened. So like you, Gérard, I never do it
either.

Other discussions of the "reset all" philosophy can be found via an
article called "CSS Frameworks + CSS Reset: Design From Scratch" at
<http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/>
, although that page is best visited with CSS (and JS) turned off.
Ironically enough, with CSS enabled, the page takes forever to load and
respond to scrolling. (Disabling JS just keeps the ad count down.)


--
John

On Nov 7, 11:44 pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

I am halfway through writing a tutorial on image slicing for fluid CSS
layouts, I would love some feedback on what I've done up until this point:
http://nrkn.com/index.html

Nice tutorial, I like the layered header idea. Of course you make the
assumption that the header graphic has something on the right and
left, but the middle can be expanded. But when the header can be
handled like that, this is a nice plan.

On 8 Nov, 06:35, mbstevens <NOXwebmast... (AT) xmbstevensx (DOT) com> wrote:

Forcing markup like this:
div class="hr"><div><div><hr></div></div></div
is just unsemantic, even though it is technically valid.

So what? Who says HTML should be entirely semantic.

CSS is _very_ simple and deliberately (read Hakon Lie's PhD thesis)
doesn't include some of the features of other styling langauges.
Amongst these is the ability to do powerful content generation,
sufficient to generate the necessary "hooks" to hang each necesary box
of the rendering model onto. This is particularly evident when
clearing after a sequence of floated boxes.

Some stylesheet languages do support this, but they're more complex
than CSS. CSS gains its simplicity here by requiring the HTML to
already contain a sufficiency of "hook" elements that deliberately
have no smenatic purpose, they're only used (and necessary for)
presentation.

It would be nice to have a purely presentation-free HTML, but not at
the cost of needing to use DSSSL to style it!

On 8 Nov, 05:22, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:

Web Page Development: Best Practices
Classitis and Divitishttp://developer.apple.com/internet/webcontent/bestwebdev.html

(sobs) 8-(

dorayme wrote:

In article <13j5f4djrkk9213 (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

dorayme wrote:
In article <13j5b6j72c0ahfc (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

Nik Coughlin wrote:

I believe that this is the minimum amount of markup necessary to achieve
this effect Would love to be proven wrong.


Is the effect worth the internal complexity?
Depends on how you count it. It only has to be done once by the
author, and from then on it can give multiple pleasure. On
principle, this may well be worth it.
I'll have to trust others reports that it gives them pleasure.

Like the often seen attempts at rounded box corners, it looks
mid-90s kitschy to me, but as you say below, individual choice might
be allowable.

One has to abstract from the individual implementations. The
argument might be on a higher level, namely, are all designs that
stretch and bend and flex various things that cannot be so easily
done 'purely', to be ruled out of order on grounds of a semantic
ideal, is semantic purity in web matters such a very strong and
clear concept that it can bear the weight of such strictness?

So weighty and poignant are these questions that I urge a
humbleness before them, a patience from rushing to judgement.

I see a kind of smooth scale from pure semantic markup to
clog dancing monkeys. Different people place different points along that
scale where you should just control yourself, or switch over
to Flash or Java Applets. I would resist using the kind of code here
because I would not want to maintain it, and I just find its appearance
unneeded aesthetically. Of course you have to occasionally give in
to clients. (This is also my answer to Andy's reply.)

Travis Newbury wrote:

On Nov 7, 11:44 pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:
I am halfway through writing a tutorial on image slicing for fluid
CSS layouts, I would love some feedback on what I've done up until
this point: http://nrkn.com/index.html

Nice tutorial, I like the layered header idea. Of course you make the
assumption that the header graphic has something on the right and
left, but the middle can be expanded. But when the header can be
handled like that, this is a nice plan.

I would love to expand it to include other scenarios in mind, can you think
of any examples? Thanks!

In article <13j6irgpbt0sh4e (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

dorayme wrote:
In article <13j5f4djrkk9213 (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

dorayme wrote:
In article <13j5b6j72c0ahfc (AT) corp (DOT) supernews.com>,
mbstevens <NOXwebmasterx (AT) xmbstevensx (DOT) com> wrote:

Nik Coughlin wrote:

I believe that this is the minimum amount of markup necessary to
achieve
this effect Would love to be proven wrong.


Is the effect worth the internal complexity?
Depends on how you count it. It only has to be done once by the
author, and from then on it can give multiple pleasure. On
principle, this may well be worth it.


I see a kind of smooth scale from pure semantic markup to
clog dancing monkeys. Different people place different points along that
scale where you should just control yourself, or switch over
to Flash or Java Applets. I would resist using the kind of code here
because I would not want to maintain it, and I just find its appearance
unneeded aesthetically. Of course you have to occasionally give in
to clients. (This is also my answer to Andy's reply.)

You have to abstract from particular cases. In plain terms, this
means that you cannot know in advance that it is not worth an
author's time for any site at all. Perhaps we need more examples
of the actual use of code that gets tut tuts from some but which
are plainly nice in effect and hard or impossible to do without.

The fair and substantial complaints are for sites that

(1) Look bloody awful anyway

(2) Work badly in other respects, partly as a result of an
authors over attention to the fancy at the expense of the very
important and unarguable criteria like decent font sizes, screen
flexibility and so on. (Lemme point out that the effect of the
OP's interesting attempts is to at least avoid the often unwanted
fixed nature of images when they are for decoration, this is a
positive for fluid construction).

About maintenance, there are several issues. If an author is in
command of what he has done then it may be very easy for *him* to
maintain it. As for the business of others taking over the site
to maintain it, a sense of perspective is needed. Many of these
fancy things can be commented by the author so the next person
can understand, the commentary might even explain how to dispense
with the fancy parts altogether. Then it is the choice of the new
person (if he has the authority).

--
dorayme