You are here: Re: Critique, image slicing for fluid CSS layout tutorial « HTML « IT news, forums, messages
Re: Critique, image slicing for fluid CSS layout tutorial

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.

 

Navigation:

[Reply to this message]


УдалСнная Ρ€Π°Π±ΠΎΡ‚Π° для программистов  •  Как Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Google AdSense  •  England, UK  •  ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π° английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Π‘Π°ΠΉΡ‚ ΠΈΠ·Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ Π² Π‘Ρ‚ΡƒΠ΄ΠΈΠΈ Π’Π°Π»Π΅Π½Ρ‚ΠΈΠ½Π° ΠŸΠ΅Ρ‚Ρ€ΡƒΡ‡Π΅ΠΊΠ°
ΠΈΠ·Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²Π΅Π±-сайтов, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, поисковая оптимизация