DIV与桌面或CSS对愚蠢

时间:2008-09-14 10:24:54

标签: css layout

我知道表格是用于表格数据的,但是将它们用于布局是很诱人的。我可以处理DIV以获得三列布局,但是当你有4个嵌套DIV时,它会变得棘手。

是否有教程/参考来说服我使用DIV进行布局?

我想使用DIV,但我拒绝花一个小时将DIV / SPAN放在我想要的位置。

@GaryF:Blueprint CSS必须是CSS保密的秘密。

很棒的工具 - Blueprint Grid CSS Generator

13 个答案:

答案 0 :(得分:24)

Yahoo Grid CSS可以做各种各样的事情。

但请记住: CSS不是宗教。如果通过使用表而不是css来节省时间,请执行此操作。

我永远无法想到的一个角落案例是形式。我喜欢在CSS中做到这一点,但它比表格复杂得多。

你甚至可以争辩说表格是表格,因为它们有标题(标签)和数据(输入字段)。

答案 1 :(得分:17)

在英国和美国,有一个法律要求支持在表格上使用CSS布局。第508节(美国)和“残疾歧视法”(英国)均涵盖视力有限的用户的无障碍标准。

在英国,立法延伸至实际上使商业化生产网站成为非法,这种网站阻碍了视力不佳的用户的能力,就像现在有一个商店进入它的步骤一样非法并且没有办法让轮椅使用者进入 - 不可否认,目前还没有关于网站可访问性的起诉。但是我会一直使用CSS,因为这意味着您的网站设计在长期内更容易维护。

投入时间学习CSS(我使用的是W3C学校和.Net杂志http://www.netmag.co.uk)将获得回报。

答案 2 :(得分:9)

答案 3 :(得分:6)

在我看来,偏见应该是支持CSS而不是IE6 - 即除非有一个非常好的理由(例如你的网站只针对使用IE6的人,这将是怪异的),最好使用IE6“疏远”人,而不是视力不佳的人和/或自动用户代理。 IE6的使用正在减少;后一组人数正在增加。即使您的网站在IE6中看起来不是很完美,但对于那些看不到它的用户来说,这些用户可能很容易阅读它而不是基于表格的布局。

这是一个非常笼统的问题,因此很难回答具体问题。这两本优秀的资源是:

如果您只需要花一个小时来设计整体网站布局,那就不错了。

答案 4 :(得分:5)

CSS可能不是宗教,但它是浏览器如何解释HTML的布局。无论喜欢与否,所有现代浏览器都使用(某些版本)的W3C盒子模型。继续依赖表格继续依赖于在设计Web渲染技术的人眼中完全错误的方法。

我知道CSS有时看起来非常复杂,但我相信这是当今时代的必需品(相信我,你的客户会想要它)。

如果你不习惯花时间真正学习CSS(所以你需要几秒钟或几分钟来定位元素......不是一小时),那么你需要将布局工作传递给知道真正知道的人前端。

是的,CSS的当前浏览器实现存在很多问题,但没有什么比这更激烈的了,您应该感觉需要返回基于表的布局。只需坐下来花点时间学习它,就像你使用任何其他语言或框架一样。

我发现的最佳在线参考资源是: http://reference.sitepoint.com/css

但是看一下像Designing With Web Standards这样的书可能没什么坏处,这本书可以帮助你理解为什么这些东西很重要。

答案 5 :(得分:4)

在我看到YAML(又一个多列布局)之前,我也在想蓝图。有online builder tool太棒了。我可以在5分钟内获得一个很酷的多列布局。

答案 6 :(得分:2)

过了一会儿你甚至都没想过。使用带有CSS的div似乎更容易选择imo。另外,在使用jQuery等框架时,您可以更自由。我无法想象在不使用css或div的情况下做一些很酷的jQuery。如果你使用表格进行风格和布局,我觉得你错过了许多新技术并且坚持在90年代。

答案 7 :(得分:1)

这可能没什么用,但我不知道所有这些与CSS相关的问题。如果报纸设计师试图在广告页面中嵌入电影,那么每个人都会同意他有点疯狂。但是,在HTML中的三列布局之后,仍然是那些人。 HTML目前还不太适合处理这种布局。此外,多列布局通常不太适合在计算机监视器上阅读。没有足够的可行替代方案吗?

顺便说一句,即使是表格也没有提供一种实现流畅的列布局的好方法,所以这完全没有理由去诉诸这种黑客行为。假设有一个中途的现代浏览器(即> MSIE 6),表格与我所知的干净HTML + CSS相比没有任何优势。

答案 8 :(得分:1)

我会用这张桌子。

根据我的经验,使用表格进行布局在所有浏览器中都会起作用,而CSS则不会(特别是如果你试图支持IE6)。使用表格在10分钟内完成编辑时,使用CSS编写布局是不值得的。

使用表的另一个好处是,您的布局可以非常容易地动态调整内容的大小。试图用CSS完成这件事是一个巨大的噩梦。

答案 9 :(得分:1)

我发现CSS存在很多限制,似乎暗示规范设计师不会以网站为生。

如果你不能在CSS中轻松完成,请使用HTML表。

话虽如此,一些框架确实有帮助,如果你可以管理它,它总是更好用CSS。

答案 10 :(得分:1)

您可以在这里找到一些灵感:http://blog.html.it/layoutgala/

答案 11 :(得分:1)

A List Apart是使用语义HTML的绝佳参考,Holy Grail article可能是最好的例子之一。另外,请查看CSS Zen Garden以获取有关该主题的一些灵感,或阅读Dave Shea的优秀书籍“CSS设计之禅”。

答案 12 :(得分:1)

您使用CSS进行布局,因为它不仅在语义上正确,而且因为表有多个缺点。

表格对于可访问性而言非常糟糕,因为它们几乎打破了所有屏幕阅读器,这反过来又因为表格的读取方式而给视障人士提供了无用的信息。

它们的渲染速度也比CSS版本快得多。表必须绘制两次,一次用于布局,再次用于内容。这可能意味着如果您在具有慢速连接的服务器上有一个或两个远程图像,则您的整个布局将无法呈现。

当你有一个hashmap时,你会使用数组来存储字典吗?不可以。如果有更好的东西,你就不应该使用桌子。