RE: [WSG] td != div
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 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Kenny Graham Sent: Wednesday, 7 September 2005 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] td != div In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ ** 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] td != div
For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. I never really noticed this, but I tend to code this way too. Here's a small sample i've been playing with: div id=wrapper div id=header h1 class=hideImage replaced title here/h1 /div div id=nav ul lia href=#Home/a/li lia href=#Products/a/li lia href=#Services/a/li lia href=#Contact Us/a/li /ul /div /div By what you're saying, I could simply have my outer wrapper for the margins/bg stuff, and then the h1 id'ed to replicate the whole header, and the ul id'ed to the nav list. This makes sense. div id=wrapper h1 id=headerImage replaced title here/h1 ul id=nav lia href=#Home/a/li lia href=#Products/a/li lia href=#Services/a/li lia href=#Contact Us/a/li /ul /div is much less cluttered, and can still perform the same structure for display. Good topic. I'm going to re-think the whole approach on this project. ** 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] td != div
G'day By what you're saying, I could simply have my outer wrapper for the margins/bg stuff, and then the h1 id'ed to replicate the whole header, and the ul id'ed to the nav list. This makes sense. div id=wrapper h1 id=headerImage replaced title here/h1 ...etc... I'd even drop id=header and just style the h1 element. Unless you use more than one h1 per page... Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] td != div
Bert Doorn wrote: I'd even drop id=header and just style the h1 element. Unless you use more than one h1 per page... Good point, Bert. Time to put this mark-up on a diet. ** 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] td != div
Geoff Pack wrote: Some reasons for div-itis: 1. Columns. table cell = div is wrong, but usually columns = divs is correct. now we are really getting into semantics. i began designing via wysiwyg and tables. when i made the change to html/css i was having problems with positioning and other browser quirks. i didn't really understand positioning with css. i knew i didn't want to go back to tables and i knew i could figure this thing out, but how do you get someone who is coming from a tables environment to understand how to use css for positioning? you need to relate to them in terms they understand and teach them the cross-over names for them. for me, div=cell and viewport=table. i reasoned that with css i could put that cell=box anywhere on the page i wanted using css rules and i was not constrained by a bunch of other connected cells. this reasoning helped much to understand in terms from where i was coming to get to where i wanted to be. to say what you did above is correct for some one who understands the language of css, but does a disservice if you want to convert someone from tables to html/css. it was easier for me to grasp css when i understood the freedom i had over tables by using boxes and positioning them where i wanted with this epiphany. then i found out through the use of the float property that i could take blocks of content and put them together like a jigsaw puzzle to create my design. my feeling is that if comparison language was used, many would see the benefits of html/css over tables and would be more likely to make the change, because they would understand quicker what is being done and how to do it. cheers, dwain -- dwain alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The Savior replied; There is no such thing as sin;... 'The Gospel of Mary of Magdala' ** 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] td != div
Good topic. I'm going to re-think the whole approach on this project. My work here is done. Now I can go get some Krystals (eg. Whitecastles + Mustard - Holes in meat) and say to myself I might not know what I'm eating, but at least my pet peeve is silenced for the moment.
[WSG] td != div
In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables.
Re: [WSG] td != div
On 07/09/2005, at 9:31 AM, Kenny Graham wrote: In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. I'd actually be inclined to agree with you, even though I did start out in web development with table-based design. It made sense then, and was especially easy when you used something like Photoshop or Fireworks to design a beautiful graphical layout, carve it up, and export it directly as a table. In hindsight, however, I think it mostly made sense because we knew no other way. Since I've started working towards standards-based design, I actually haven't really done the whole replace every table cell with a div thing. One of the attractions for me was that I could create much cleaner code that was easier to edit by hand (which I much prefer to using a WYSIWYG, most of the time) and so hanging IDs and classes directly on the elements I wanted to style just made sense. I have, however, seen a lot of the sites that you are thinking of here. I've even seen a number of tutorials that follow the table cell = div method. I usually follow the tutorial to make sure I get all the bits right, then go back and try to clean it up by eliminating unnecessary divs. It doesn't always work, and sometimes I find I've completely ballsed it up, but I have learned a lot that way. *grin* Cheers, Seona. ** 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] td != div
Kenny Graham said: In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. overusing elements in the manner you describe is not the best approach, and is often a result of poor generators, or lack of decent descendant selector support, or (as you imply) simply using divs and spans as surrogates for table elements. As stated on the other current css v. table thread, using tables exclusivly for tabular data makes it easier to scrape the page at a later date for data. what are you hoping to learn about? kind regards Terrence Wood. ** 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] td != div
what are you hoping to learn about? I don't have a clue. But in my experience, every time I've asked a debate-causing question on here, it's gone off on 50 tangents and I've learned a lot. *evil grin*
Re: [WSG] td != div
I think it's also important to bare in mind that there might be very good reasons for putting a ul inside a div. The most obvious one I can think of is the need for two background images. I think once the next standard incorporates this and browsers support it, there will be even less need for unwarranted code. Another thing to remember is that, in the same way table layouts were used as CSS wasn't supported at the time, so too are multiple divs being used to compensate for a lack of support in browsers. Just thing of the dreaded Vertical Align hacks that have been thrown around across the web. One quote I keep remembering was Tm Berners Lee saying something like, HTML was never designed to be a tool for graphically displaying data. Browsers are still catching up with CSS Support and CSS itself is still being developed to allow us humble designers the ability to realise our vision in code. Give it time, the standards will soon allow us to eliminate unnecessary code - it might take a bit to get there though. PS: How did you manage to avoid table layouts Lucky boy! R :o) ** 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] td != div
On 07/09/2005, at 9:31 AM, Kenny Graham wrote: In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. I think one of the sources of this problem is the common misconception that CSS Layout = Layers and that Layers = DIVs Too often, when I speak about CSS layout to developers who are still using tables for layout, they react with: Ah, that's layers, right?. And when layers first came out everybody was using DIVs for them. So you now need to grab those old-fashioned developers by the collar, shake them a little, and explain to them in a honey-sweet voice that there is so much more to css layout than plastering your HTML with DIVs. For somebody like yourself who never came across the table layout business and didn't hear somewhere over the grapevine about DIVs and Layers, it is probably much easier to use CSS in the way it is meant to be done. ** 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] td != div
Kenny Graham wrote: I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? No, div-wrapping-mania isn't much better. However, standards and weak browsers put limitations on what we can do with CSS on single elements. I dislike the use of 'style-hooks' in serious designs, but I can rarely get a design that I may actually like, to become cross-browser stable without some of these 'extras'. On less serious designs -- private site and so on, playing with these messy divitis-constructions is more like a game to me. I see the use of these multiple wrapper-divs and other 'style-hooks' as short term solutions, while standards and browsers grow up. Maybe I'll grow up too... Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. I left tables behind because of the limitations they put on design. Not that the tools available to me make me totally free to design as I want just yet, but at least there's some progress. regards Georg -- http://www.gunlaug.no ** 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] td != div
PS: How did you manage to avoid table layouts Lucky boy! I'm only 21, and didn't start doing commercial sites until recently. Before there was wide browser support for CSS, I was just doing web design as a hobby, and didn't really care if a single browser in the world displayed it correctly.
Re: [WSG] td != div
The most obvious one I can think of is the need for two background images. Sometimes this is the case, but often times it can be avoided with a little creativity, such as using a background image on the ul, and classing the first and last li to give them more height and different background images (good for vertical nav bars). But still, I guess sometimes it's necessary if the design isn't negotiable.
Re: [WSG] td != div
At 06:15 PM 9/6/2005, Kenny Graham wrote: The most obvious one I can think of is the need for two background images. Sometimes this is the case, but often times it can be avoided with a little creativity, such as using a background image on the ul, and classing the first and last li to give them more height and different background images (good for vertical nav bars). But still, I guess sometimes it's necessary if the design isn't negotiable. Kenny, Of course sloppy markup abounds -- as Theodore Sturgeon was known to remark, 90% of everything is crap -- a principal that applies fairly equally to every field of human endeavor -- but don't be too quick to assume that apparently extraneous divs are truly unnecessary until you've carefully dissected the HTML-CSS interrelationships. Sometimes wrapping a div around a structure seems to be required to stabilize an effect cross-browser, to contain floats, to maintain a columnar structure, etc. Often the necessity of wrapping divs won't be obvious until you bring the markup and stylesheet onto your own computer and start deleting tags in an effort to simplify things -- then you'll find in some cases exactly what the original developer discovered, that containers are sometimes necessary to keep things together and to keep everything behaving similarly from one browser to another. Many of us strive constantly to produce the layout effects we want without adding extra divs, and discoveries of how to truly do without them in this circumstance or that are always greeted with great huzzahs and confetti in the streets. I look forward to your own contributions to the field. Regards, Paul ** 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] td != div
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 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Kenny Graham Sent: Wednesday, 7 September 2005 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] td != div In most of the previous table layout vs css layout arguments I've seen on here, people refer to divs vs tables. Now, I never learned table based layouts, and don't understand them (spacer gifs, etc). Because of this, I don't/can't think along the lines of I'm replacing tables with divs. But many of the XHTML/CSS sites I see clearly do. For instance, they'll put a ul inside a div id=menu, just so that they can style the ul, instead of just giving the ul itself an id. Or put the contents of a paragraph inside a span id=p1 instead of giving the paragraph itself an id of p1. The only time divs don't make me cringe is when they're used to enclose a group of elements with the header that applies to them, and this purpose of divs is being replaced with section. I know that divs are more semantically neutral than tables, but is wrapping an element in 5 divs and a span really that much better than wrapping it in a table? Hopefully this will start a debate that I can learn something from, since I have a limited background in tables. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
