Critique, image slicing for fluid CSS layout tutorial

Discussion in 'HTML' started by Nik Coughlin, Nov 8, 2007.

  1. Nik Coughlin

    Nik Coughlin Guest

    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

    I am still writing parts 3 & 4, "optimising the layout" and "alpha
    transparency".

    Also, does anyone know why I don't get numbers or bullets on my ul and ol in
    Internet Explorer (6 or 7)?

    Thanks!
     
    Nik Coughlin, Nov 8, 2007
    #1
    1. Advertising

  2. Nik Coughlin

    GTalbot Guest

    On 7 nov, 23:44, "Nik Coughlin" <> 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
    >
    > I am still writing parts 3 & 4, "optimising the layout" and "alpha
    > transparency".
    >
    > Also, does anyone know why I don't get numbers or bullets on my ul and ol in
    > Internet Explorer (6 or 7)?
    >
    > Thanks!


    Nik,

    Whatever the explanations are for the semi-disappeared (or entirely
    disappeared) list markers in Internet Explorer 7, I truly and
    completely believe that you should avoid this kind of markup code:

    Line 27: <div id="mainT"><div><div></div></div></div>

    Line 30: <div id="contentTL"></div>
    <div id="contentTR"></div>

    Line 34: <div class="hr"><div><div><hr></div></div></div>

    Line 81: <div class="hr"><div><div><hr></div></div></div>

    Line 89: <div id="mainB"><div><div></div></div></div>

    There is such a thing as over-excessively declaring, using and abusing
    <div> declarations: it's called divitis and it is defined at

    Developing With Web Standards
    Recommendations and best practices
    Superfluous elements and classes
    http://www.456bereastreet.com/lab/developing_with_web_standards/css/#css

    and at

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

    Remember/keep in mind that the original purpose and goal of using CSS
    was to reduce resorting/recourse of bloated markup code: if your CSS
    code does not achieve that, then you should examine how you could
    reduce the depth and the width of the DOM tree of nodes.

    Regards, Gérard
     
    GTalbot, Nov 8, 2007
    #2
    1. Advertising

  3. Nik Coughlin

    Nik Coughlin Guest

    GTalbot wrote:
    > On 7 nov, 23:44, "Nik Coughlin" <> 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
    >>

    > I truly and
    > completely believe that you should avoid this kind of markup code:
    >
    > Line 27: <div id="mainT"><div><div></div></div></div>


    Hi Gérard!

    It's not divitis, believe it or not.

    It is totally necessary to create the fluid effect. Have a look at
    http://nrkn.com/basic.html#markUp for an explanation of what those are
    doing.

    You *can't* do this otherwise. Seriously :) With CSS 3 you can assign
    multiple backgrounds to one element, but there's no support for it yet, so
    for now you have to nest multiple elements in order to do this. I use a
    series of nested divs as div is semantically neutral.

    > Line 30: <div id="contentTL"></div>
    > <div id="contentTR"></div>


    These are also necessary. They're spacers that stop the content of the page
    going where it shouldn't (because of the curved shape of the top part of the
    design).

    > Line 34: <div class="hr"><div><div><hr></div></div></div>
    > Line 81: <div class="hr"><div><div><hr></div></div></div>


    Again, necessary for that graphical effect, having the horizontal divider
    shrink and grow to the width of the viewport. Same principle as above.

    > There is such a thing as over-excessively declaring, using and abusing
    > <div> declarations: it's called divitis and it is defined at


    Yep, totally agree, but this ain't it :)

    > Remember/keep in mind that the original purpose and goal of using CSS
    > was to reduce resorting/recourse of bloated markup code: if your CSS
    > code does not achieve that, then you should examine how you could
    > reduce the depth and the width of the DOM tree of nodes.


    I believe that this is the minimum amount of markup necessary to achieve
    this effect :) Would love to be proven wrong.
     
    Nik Coughlin, Nov 8, 2007
    #3
  4. Nik Coughlin

    GTalbot Guest

    On 7 nov, 23:44, "Nik Coughlin" <> 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
    >
    > I am still writing parts 3 & 4, "optimising the layout" and "alpha
    > transparency".
    >
    > Also, does anyone know why I don't get numbers or bullets on my ul and ol in
    > Internet Explorer (6 or 7)?
    >
    > Thanks!


    Hello again,

    You first declared

    ol {font-weight: bold;}

    in

    ol {
    color: #5ac90f;
    font-weight: bold;
    margin: 1em;
    }

    and ol span {font-weight: normal;}

    ol span {
    color: #b95207;
    font-weight: normal;
    }

    (Notice here that you re-declare the color for the span instead of
    using inheritance. All you had to do is declare color: #b95207 for the
    ol element and that was it!)

    then used <strong> on 3 chunks of text (only 6 words)

    and then declared 7 <span> with font-weight: normal;.

    When debugging your code, I removed all that. Everything. And just let
    the 3 semantic <strong> for the 3 chunks of text (a grand total of 6
    words). I removed 7 non-semantic <span>, removed both font-weight
    declarations, remove 1 color declaration and replace the remaing one
    with #b95207, then removed the ol span CSS rule.

    Your CSS code is definitevly improvable, optimizable.

    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.
    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.

    Finally, regarding your question of disappearing list markers in MSIE
    7, you need to increase the margin on the ol to at least 1.5em. I have
    created a reduced testcase showing this phenomenon, where the list
    markers disappear at around margin: 1.1em. IE has a particular way of
    displaying list markers..

    Regards and good luck,

    Gérard
     
    GTalbot, Nov 8, 2007
    #4
  5. Nik Coughlin

    mbstevens Guest

    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?
    Maybe it would be better to just spend more time in the Gimp
    perfecting normal images, keeping the page itself simple.

    Forcing markup like this:
    <div class="hr"><div><div><hr></div></div></div>
    is just unsemantic, even though it is technically valid.
     
    mbstevens, Nov 8, 2007
    #5
  6. Nik Coughlin

    Nik Coughlin Guest

    GTalbot wrote:
    > On 7 nov, 23:44, "Nik Coughlin" <> 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

    >
    > Hello again,


    Hi!

    > You first declared
    >
    > ol {font-weight: bold;}
    >
    > in
    >
    > ol {
    > color: #5ac90f;
    > font-weight: bold;
    > margin: 1em;
    > }
    >
    > and ol span {font-weight: normal;}


    You're right, I'm not quite sure why I did that :)

    > ol span {
    > color: #b95207;
    > font-weight: normal;
    > }
    >
    > (Notice here that you re-declare the color for the span instead of
    > using inheritance. All you had to do is declare color: #b95207 for the
    > ol element and that was it!)


    Actually, the reason for declaring a color for the ol and then wrapping the
    li content in a span is so that that the list markers have a different
    colour to the list items. There *is* method to the madness! Some would say
    that it's not worth having to have the extra markup just to have different
    coloured markers, but I think it makes quite a big difference visually, so I
    am willing to make that sacrifice.

    > then used <strong> on 3 chunks of text (only 6 words)
    >
    > and then declared 7 <span> with font-weight: normal;.


    Yeah, the font-weight thing is a cock-up.

    > When debugging your code, I removed all that. Everything. And just let
    > the 3 semantic <strong> for the 3 chunks of text (a grand total of 6
    > words). I removed 7 non-semantic <span>, removed both font-weight
    > declarations, remove 1 color declaration and replace the remaing one
    > with #b95207, then removed the ol span CSS rule.
    >
    > Your CSS code is definitevly improvable, optimizable.


    Yep, there are some rules that can be combined that I can see right off the
    bat. Anything else off the top of your head that you've noticed is
    particularly in need of improvement, or do you just mean combining rules
    that are repeated?

    > 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.


    We will have to agree to disagree on this :) I like this a lot as it
    equalizes the way browsers set margins and padding, which are different
    between different browsers for different elements.

    > 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 find with the layouts that I tend to do it's the opposite, I am always
    turning margin and paddings *off* on multiple elements, and with the
    universal selector I only end up turning them back on in a few places.

    > Finally, regarding your question of disappearing list markers in MSIE
    > 7, you need to increase the margin on the ol to at least 1.5em. I have
    > created a reduced testcase showing this phenomenon, where the list
    > markers disappear at around margin: 1.1em. IE has a particular way of
    > displaying list markers..


    Excellent, thank you very, very much!

    > Regards and good luck,


    Thanks again. I really appreciate you taking your time to discuss this with
    me. It has been a pleasure, even if we disagree on some things!
     
    Nik Coughlin, Nov 8, 2007
    #6
  7. Nik Coughlin

    Nik Coughlin Guest

    mbstevens 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?
    > Maybe it would be better to just spend more time in the Gimp
    > perfecting normal images, keeping the page itself simple.


    No amount of time spent in the Gimp will help me make an image that
    stretches to fit the available width though!

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


    Well, for me, sometimes there are trade offs between getting a visual
    effect, and being semantically correct. The extra div wrappers are to get
    the visual effect (divider that fades away at the edges and resizes to fit
    the available width), the <hr> is there so that there is still a horizontal
    rule when CSS isn't present.

    Some of these things are just necessary to address the shortcomings of
    browser support for HTML/CSS -- almost all of these shortcomings are
    addressed in CSS3. If IE/Opera/FF supported multiple background images on a
    single element (Safari does) then it wouldn't be necessary.

    How I wish it were so!

    Thanks for your time :)
     
    Nik Coughlin, Nov 8, 2007
    #7
  8. Nik Coughlin

    dorayme Guest

    In article <>,
    mbstevens <> 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.

    > 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.

    --
    dorayme
     
    dorayme, Nov 8, 2007
    #8
  9. Nik Coughlin

    Nik Coughlin Guest

    dorayme wrote:
    > In article <>,
    > mbstevens <> 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.
    >
    >> 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.


    I hope so :) I try to only compromise on these things when a visual effect
    that I want is otherwise unattainable. Oh, for multi-browser support of
    CSS3!
     
    Nik Coughlin, Nov 8, 2007
    #9
  10. Nik Coughlin

    dorayme Guest

    In article <fguco1$fro$>,
    "Nik Coughlin" <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > mbstevens <> 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.
    > >
    > >> 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.

    >
    > I hope so :) I try to only compromise on these things when a visual effect
    > that I want is otherwise unattainable. Oh, for multi-browser support of
    > CSS3!


    Indeed, tell you what though: I would at this moment settle for
    multi-browser support of CSS 2.1

    :)

    --
    dorayme
     
    dorayme, Nov 8, 2007
    #10
  11. Nik Coughlin

    mbstevens Guest

    dorayme wrote:
    > In article <>,
    > mbstevens <> 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.
    >
     
    mbstevens, Nov 8, 2007
    #11
  12. Nik Coughlin

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > mbstevens <> 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
     
    dorayme, Nov 8, 2007
    #12
  13. Nik Coughlin

    Bone Ur Guest

    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.
     
    Bone Ur, Nov 8, 2007
    #13
  14. Nik Coughlin

    John Hosking Guest

    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
     
    John Hosking, Nov 8, 2007
    #14
  15. On Nov 7, 11:44 pm, "Nik Coughlin" <> 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.
     
    Travis Newbury, Nov 8, 2007
    #15
  16. Nik Coughlin

    Andy Dingley Guest

    On 8 Nov, 06:35, mbstevens <> 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!
     
    Andy Dingley, Nov 8, 2007
    #16
  17. Nik Coughlin

    Andy Dingley Guest

    On 8 Nov, 05:22, GTalbot <> wrote:

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


    (sobs) 8-(
     
    Andy Dingley, Nov 8, 2007
    #17
  18. Nik Coughlin

    mbstevens Guest

    dorayme wrote:
    > In article <>,
    > mbstevens <> wrote:
    >
    >> dorayme wrote:
    >>> In article <>,
    >>> mbstevens <> 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.)
     
    mbstevens, Nov 8, 2007
    #18
  19. Nik Coughlin

    Nik Coughlin Guest

    Travis Newbury wrote:
    > On Nov 7, 11:44 pm, "Nik Coughlin" <> 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!
     
    Nik Coughlin, Nov 8, 2007
    #19
  20. Nik Coughlin

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > mbstevens <> wrote:
    > >
    > >> dorayme wrote:
    > >>> In article <>,
    > >>> mbstevens <> 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
     
    dorayme, Nov 8, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    747
    clintonG
    Dec 24, 2004
  2. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
  3. Nik Coughlin
    Replies:
    0
    Views:
    360
    Nik Coughlin
    Nov 8, 2007
  4. Nik Coughlin
    Replies:
    1
    Views:
    389
  5. William Gill

    when is fluid a design too fluid?

    William Gill, Aug 17, 2010, in forum: HTML
    Replies:
    9
    Views:
    630
Loading...

Share This Page