Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Critique, image slicing for fluid CSS layout tutorial

Reply
Thread Tools

Critique, image slicing for fluid CSS layout tutorial

 
 
Nik Coughlin
Guest
Posts: n/a
 
      11-08-2007
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!


 
Reply With Quote
 
 
 
 
GTalbot
Guest
Posts: n/a
 
      11-08-2007
On 7 nov, 23:44, "Nik Coughlin" <(E-Mail Removed)> 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/de...dards/css/#css

and at

Web Page Development: Best Practices
Classitis and Divitis
http://developer.apple.com/internet/...estwebdev.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

 
Reply With Quote
 
 
 
 
Nik Coughlin
Guest
Posts: n/a
 
      11-08-2007
GTalbot wrote:
> On 7 nov, 23:44, "Nik Coughlin" <(E-Mail Removed)> 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.


 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      11-08-2007
On 7 nov, 23:44, "Nik Coughlin" <(E-Mail Removed)> 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

 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      11-08-2007
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.
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      11-08-2007
GTalbot wrote:
> On 7 nov, 23:44, "Nik Coughlin" <(E-Mail Removed)> 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!


 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      11-08-2007
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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-08-2007
In article <(E-Mail Removed)>,
mbstevens <(E-Mail Removed)> 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
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      11-08-2007
dorayme wrote:
> In article <(E-Mail Removed)>,
> mbstevens <(E-Mail Removed)> 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!


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-08-2007
In article <fguco1$fro$(E-Mail Removed)>,
"Nik Coughlin" <(E-Mail Removed)> wrote:

> dorayme wrote:
> > In article <(E-Mail Removed)>,
> > mbstevens <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
when is fluid a design too fluid? William Gill HTML 9 08-18-2010 12:17 AM
Image slicing for fluid CSS designs tutorial finished Nik Coughlin HTML 1 11-12-2007 05:46 AM
Critique, image slicing for fluid CSS layout tutorial Nik Coughlin HTML 0 11-08-2007 04:45 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments