|
|
Posted by Nik Coughlin on 11/08/07 05:42
GTalbot wrote:
> On 7 nov, 23:44, "Nik Coughlin" <nrkn....@gmail.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
>>
> 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.
[Back to original message]
|