Re: [WSG] divitis - chronic vs. mild stages
Drake, Ted C. wrote: Here's why I would continue to use div id="navigation" on a large web site. There are situations that could require a subsection to be inserted below the navigation. Having a div container allows you to insert elements in the container, below the nav list. ... I think this is the first time we actually disagreed on something! Not necessarily disagreeing. Of course, if utter flexibility is the key (i.e. maybe need to add something else later), then yes by all means wrap things up. My comment was mainly aimed at situations in which there is no change planned in future, i.e. (to get back to my example) you will only ever have that one unordered navigation list. In that case, wrapping an additional wrapper around the list is a waste of bandwidth. Of course, every real life situation is different. That's why it's difficult to just give absolute rules like "never use a div around a ul" or similar...it always depends on the actual circumstances (which is partly what may frustrate some people who are looking for dogmatic rules). :) -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] divitis - chronic vs. mild stages
Hi Patrick
Here's why I would continue to use div id="navigation" on a large web site.
There are situations that could require a subsection to be inserted below
the navigation. Having a div container allows you to insert elements in the
container, below the nav list.
This would be especially important on very large sites where you have
multiple divisions or products. The department may need to put an additional
contact box below the nav. Assuming the nav div is actually more of a side
bar. Of course, it would be better described as . I guess
my point is: will the nav div ever contain more than that one unordered
list? If so, use the div. If not, apply the styles to the unordered list.
Once again, this is where experience leads.
I guess this is one of those instances where you need to strike the balance.
Also, let's say you want to give the navigation a rounded top and make it
fluid. You could apply the top right corner to the div and the top left
corner to the ul.
This is what makes me cringe
blah
blah
blah
div.row {border-top:1px solid #333; margin-top:10px;}
I actually just saw a page like this on our server only the paragraphs were
one row tables!
I need two cups of coffee to hit that file.
I think this is the first time we actually disagreed on something!
Ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Patrick H. Lauke
Sent: Wednesday, September 07, 2005 11:33 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] divitis - chronic vs. mild stages
Drake, Ted C. wrote:
> Now, the goal of a medium to advanced CSS-based programmer is to find the
> elegant balance of essential divs, spans, ids and classes. Consider it a
> challenge.
Indeedy. I cringe, however, when I see DIVs where they're not necessary.
For example things like
...
where a simple
...
will do.
That's the kind of stuff that should be avoided: if you already have a
perfectly good block level element, don't wrap it in a generic div
unless you have a very good reason for it.
--
Patrick H. Lauke
__
re*dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] divitis - chronic vs. mild stages
Drake, Ted C. wrote: Now, the goal of a medium to advanced CSS-based programmer is to find the elegant balance of essential divs, spans, ids and classes. Consider it a challenge. Indeedy. I cringe, however, when I see DIVs where they're not necessary. For example things like ... where a simple ... will do. That's the kind of stuff that should be avoided: if you already have a perfectly good block level element, don't wrap it in a generic div unless you have a very good reason for it. -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] divitis - chronic vs. mild stages
I think you go through stages of CSS/XHTML maturity as you learn how to move away from tables to table-less design. Our first instinct is to use divs the same way we used tables. It feels safe to load up the page with structural divs. That's ok, especially if it is what helps you get from x to y. However, you will get to the point where you realize the first CSS based sites you built had too many divs and you start looking for ways to place the styles on the unordered list or paragraph instead of wrapping those elements in a div. I still see a valid reason to have divitis. If I am building a site that has to be flexible, modified by a large group of people AND uses server-side includes, I would rather make those include files self-contained units. Sure, I could remove the container div on many of the includes, but I prefer to know that if an include is added to a page, the elements within it are not going to inherit the styles of the page's container. Does that make sense? Now, the goal of a medium to advanced CSS-based programmer is to find the elegant balance of essential divs, spans, ids and classes. Consider it a challenge. I sometimes cringe when I see divitis. I sometimes chuckle. I even at times yell, "hey Brian check out this site's chronic divitosis!" But let's face it, this is an evolutionary process and those of us that have been doing it for a while need to remember what it was like on the first pass. Disclaimer: don't forget the horrible, horrible, horrible, horrible divitis and absolute-positionitis generated by some of the Office software and CMS systems. I once looked at a form that had hundreds of inputs and labels in individually positioned divs. That wasn't the programmer's fault. We just didn't have time yet to build a new generator from scratch. Ted www.tdrake.net P.S. Someone in the office just mentioned using the marquee tag. I need to sound the emergency siren and get to work. Some reasons for div-itis: 1. Columns. "table cell => div" is wrong, but usually "columns => divs" is correct. 2. Boxes. The designer wants to put a box around a group of items. There might be a heading, a list or two and a paragraph, with border and a background. You could do this without a div (for example, by setting side borders on all the items, and a top and bottom borders on the first and last items respectively), but it's easier to just wrap it in a div and give it an id and a single style. And since box = section = div, it's the correct thing to do anyway. 3. Multiple backgrounds. 4. Expandability. Sometimes you know you have only one item in a box or a column, and you know you don't need a wrapper div. But you can bet that in a couple of months the designer/editor/cleaner will want to add a more items. So you build the structure to grow. 5. Box model work-arounds. You want to give an item a width, some padding and a border. You could use some CSS hacks, or you could just set the width on a wrapper div, and the margin/border/padding on the item itself. e.g. with columns, I set the width on the column div, then set the margins/borders/padding on the contents. 6. Laziness and deadlines. Sometimes it takes a lot of effort to make things simple. Not always worth it. cheers -- Geoff Pack Developer ABC New Media ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
