Page 2 of 3

Posted: Fri Jan 09, 2004 2:43 pm
by Roja
Gen-ik wrote: First of all the page size was reduced by about 50% (or 50K) which is good... but the actual CSS file will increase dramatically with the number of different divs on the page... so page-size reduction using Divs is really not worth mentioning because it balances itself out.
I'm not sure thats a fair statement. Stylesheets rarely change, and thus are cached for longer periods of time. Unlike the dynamic main (html) page, the stylesheet doesnt change each day - or each story.

The net result is that once you've been there, you've got the stylesheet, and shouldnt have to download it again - perhaps for as much as a month. Whereas with the style information embedded in the html, you have to grab that (lets say 50k) of style information each load.. thats a substantial benefit in terms of bandwidth savings, and for clients that visit more than once (i'd say the majority of espn.com's viewers are return visitors).
Gen-ik wrote: Next. Two other major problems with div-layouts are true vertical-alignments (which is mentioned in the interview) and also centering the entire page on-screen. Using absolute positioned divs and trying to make your page centered is impossible unless you use very heavy amounts of JS code to detect and position each div, and using non-absolute positioned divs will cause display problems on various browsers.
True. Absolute control is either more difficult, or impossible. But thats actually part of the purpose of css - it also empowers users to be able to change font sizes, layout, and more. In mozilla, you can specify your OWN stylesheet for a site. Its amazingly helpful for people with sight difficulties.

But that said, yes, I agree. A div-only layout makes some things hard, and others impossible.So does tag-soup.

It also makes some things possible, and some things easy, as does tag-soup.
Gen-ik wrote: Like I said I am more convinced than I was, but I'm still not 100% about the whole div-no-table concept due to the number of problems for site layout it can cause. Placing a footer at the bottom of a page is another problem mentioned in the interview, especially if the content of the page is dynamic, and using a single table for this seems like the most logical way of doing it.
Css Zen garden, and sites like it are making huge strides in css designs, inspiring purely css-driven layouts like three columns with header and footer..

The original poster asked why "no tables was good" (paraphrasing).

Four reasons:

1. Tables are meant to represent tabular data, only.
2. Effective use of css deeply reduces bandwidth (see caching above)
3. Effective use of css increases semantic content - your html MEANS something.
4. Its much more effective on cellphones, next-gen devices, and easier to parse.

Notice, none of those really reject tables COMPLETELY, just emphasize that much like flash, frames, and innerHTML, there are effective ways to avoid doing things that webpages shouldnt, and good reasons to do so.

Tables still have a role - just a very small one, much smaller than some people would like (similar to the use of flash).

Posted: Fri Jan 09, 2004 9:22 pm
by m3mn0n
Websites without tables are like Automobiles without steel...

FUBAR! :wink:

Posted: Sat Jan 10, 2004 3:00 am
by Pyrite
Ok, somebody beat me to it. That CSS Zen Garden was the link I was going to post.

http://www.csszengarden.com/

Go over to view all designs on the right and look through some of them.

Posted: Tue Jan 13, 2004 2:15 am
by McGruff
Tables should not be used for layout because of accessibility issues, for example:
Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).
More at: http://www.w3.org/TR/WCAG10

Posted: Tue Jan 13, 2004 3:04 am
by JayBird
also check out http://www.bluerobot.com/web/layouts/

Im coming round to the idea of layout using DIVS now too.

Mark

Posted: Tue Jan 13, 2004 8:38 am
by Gen-ik
After reading all of these replies and checking out some other resources I'm also now 'seeing the light' when it comes to DIV layouts.

As far as I can work it's as simple as...... Divs are good, but tables are sometimes unavoidable in certain situations.

For example lining up 10 divs horizontally to create a menu (or something similar) is pretty much impossible using divs... unless you use absolute-positioning which will require your webpage to be left-aligned, which 9 times out of 10 looks cr@p... but that's another topic :)

Posted: Tue Jan 13, 2004 9:58 am
by Weirdan
Gen-ik wrote: For example lining up 10 divs horizontally to create a menu (or something similar) is pretty much impossible using divs... unless you use absolute-positioning which will require your webpage to be left-aligned, which 9 times out of 10 looks cr@p... but that's another topic :)
Try display-style:inline or float:left

Posted: Tue Jan 13, 2004 11:32 am
by Gen-ik
Weirdan wrote:Try display-style:inline or float:left
Tried it and it doesn't work... well it does up to a point. If you set a div as inline and try to apply either a border or padding to it (ie border:1px #000000 solid; padding:2px 10px 2px 10px;) in-line divs will ignore any thing bottom-like... so you will get no bottom border or bottom padding... which is stupid.

I'm working on various ways of doing this using divs and no tables but haven't had any luck so far.

If anyone can create a menu like the one in the following pic without using absolute positioned divs (this is a center-aligned site) then I will be impressed. The width of the divs are determined by the text inside them.

Image

The 'tabs' also need to be seperate (ie not one single div) because the tab backgrounds change colour when the mouse is moved over and off them.

Posted: Tue Jan 13, 2004 12:10 pm
by Roja
Gen-ik wrote: The 'tabs' also need to be seperate (ie not one single div) because the tab backgrounds change colour when the mouse it moved over and off them.
It's clear you want to duplicate the functionality of existing code.

To do so, it would be helpful to have the original code to compare/contrast against. Can you put up a link with test code?

Posted: Tue Jan 13, 2004 12:18 pm
by Gen-ik
Roja wrote:It's clear you want to duplicate the functionality of existing code. To do so, it would be helpful to have the original code to compare/contrast against. Can you put up a link with test code?
Not really because it's still work-in-progress and sitting on my HD. I'm only using a table because I can't find a way of doing the same thing with divs.


The menu (seen in the pic) is just a basic table with, at the moment, a mouseover and mouseout command.


Here's the CSS and the menu bit of the code...

CSS

Code: Select all

table.mainMenu { background-color:#ffffff; margin-bottom:2px; }

td.mainMenuBreak { width:2px; font-size:1px; background-color:#000000; }

td.mainMenuUp { padding:3px 10px 3px 10px; color:#ffffff; background-color:#808080; font-weight:bold; cursor:pointer; }

td.mainMenuOv { padding:3px 10px 3px 10px; color:#000000; background-color:#ccff00; font-weight:bold; cursor:pointer; }

td.mainMenuOn { padding:3px 10px 3px 10px; color:#000000; background-color:#ccff00; font-weight:bold; cursor:default; }

HTML

Code: Select all

<table class="mainMenu" cellpadding="0" cellspacing="0">
<tr>

<td class="mainMenuOn">Home</td>

<td class="mainMenuBreak">&nbsp;</td>

<td class="mainMenuUp" onmouseover="this.className='mainMenuOv'" onmouseout="this.className='mainMenuUp'">Technology</td>

<td class="mainMenuBreak">&nbsp;</td>

<td class="mainMenuUp" onmouseover="this.className='mainMenuOv'" onmouseout="this.className='mainMenuUp'">Games Arcade</td>

<td class="mainMenuBreak">&nbsp;</td>

<td class="mainMenuUp" onmouseover="this.className='mainMenuOv'" onmouseout="this.className='mainMenuUp'">Community</td>

<td class="mainMenuBreak">&nbsp;</td>

<td class="mainMenuUp" onmouseover="this.className='mainMenuOv'" onmouseout="this.className='mainMenuUp'">Contact</td>

</tr>
</table>

Posted: Tue Jan 13, 2004 12:50 pm
by McGruff
There must be something I've missed because this seems pretty straightforward, ie each tabbed link wapped in a span tag, a tab CSS style, and the whole lot wrapped up in a div?

PS: javascript has a bit of a problem with accessibility too.
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. (Priority 1)

Posted: Tue Jan 13, 2004 1:15 pm
by Gen-ik
McGruff wrote:There must be something I've missed because this seems pretty straightforward, ie each tabbed link wapped in a span tag, a tab CSS style, and the whole lot wrapped up in a div?
DOH! I really should get some more sleep... I've been concentrating on trying to get it working with divs that I forget about other objects I could use like (as you say) spans.

I'll give it a try now.

McGruff wrote:PS: javascript has a bit of a problem with accessibility too.
No, this is one thing I'm not going to be doing. As far as I'm concerned (and I don't want to start any arguments) if someone has got JavaScript disabled on their browser, or are using a non-JavaScript browser, then sod 'em. The contents of the site (ie Flash based interactive apps) require JavaScript and require the use of FSCommands... so if you don't have/can't use JavaScript then you won't be using the site. It's as simple as that.

Posted: Tue Jan 13, 2004 1:51 pm
by McGruff
Gen-ik wrote:No, this is one thing I'm not going to be doing. As far as I'm concerned (and I don't want to start any arguments) if someone has got JavaScript disabled on their browser, or are using a non-JavaScript browser, then sod 'em. The contents of the site (ie Flash based interactive apps) require JavaScript and require the use of FSCommands... so if you don't have/can't use JavaScript then you won't be using the site. It's as simple as that.
Sometimes you can't make pages conform but you can always offer a text-based alternative. For example, at the moment I'm working on a revamped graphical design & accessible html for whoownsscotland.org.uk. Even if the GIS map-based nav could be made accessible there wouldn't be a lot of point so a text fork is provided as an alternative (also not everyone has the SVG plug-in or broadband).

Posted: Tue Jan 13, 2004 2:18 pm
by Gen-ik
McGruff wrote:Sometimes you can't make pages conform but you can always offer a text-based alternative. For example, at the moment I'm working on a revamped graphical design & accessible html for whoownsscotland.org.uk. Even if the GIS map-based nav could be made accessible there wouldn't be a lot of point so a text fork is provided as an alternative (also not everyone has the SVG plug-in or broadband).
Text-based alternatives are a good way to go when dealing with pages which use JavaScript, using static images instead of images which 'flip' when the mouse is moved over them for example.

Unfortuantly though when dealing with Flash and FSCommands it's not that simple. For example I can't provide a text-based version of Flash, so if the user doesn't have JavaScript enabled then they won't be able to use the Flash content. I'm not talking about Flash menus or anything but things like Multi-player games and Virtual Worlds. All I can do in a no-JS situation is to display a message saying "You need JavaScript enabled".

Posted: Tue Jan 13, 2004 2:21 pm
by Gen-ik
Oh by the way... the <span> thing didn't seem to work. They act in the same way as inline divs... ie they seem they ignore any bottom padding set on them.

I'm not too worried about it though to be honest. Having one table in the entire page won't cause to many problems.