2009-12-30 59 views
1

我正在研究一个当前有基于表格布局的Web应用程序。理想情况下,我想去纯粹的CSS,或失败,一个混合表和CSS和布局*。Web应用程序的纯CSS布局?

我已经在试图理解css布局和定位的墙上碰撞了我的头。我遇到的主要问题是,根据应用程序的状态,我在布局的“部分”中出现了不同的东西 - 可能包含在div或表中。例如,我可能会有一些文本和链接,然后在用户交互之后,可能会有一个表单,一个表格,一些图像,不同的文本等等。任何时候我找到一个CSS解决方案,它是一个固定元素的布局,或者在特定情况下工作等等,换句话说,它们不是健壮的解决方案。

从此在寻找一个真正的布局,作者关于“横跨网格/列垂直放置元素”:“设计师面临的选择依赖于元素是一个特定的高度,诉诸表或根本不打扰。 “这是真的?在我的应用程序中,我不能依赖于特定高度的元素。

当我有各种各样的元素(实际上是相当多的网站)时,我是否会回到桌子上?我注意到很多备受尊敬的人员和组织在某些地方使用表格进行布局,而不仅仅是表格数据!包含此网站。

回答

7

可能有CSS技术可以实现您想要的功能,但如果对复杂布局使用CSS是新功能,它们可能并不明显您。

就你的情况来说,为了“完成它”,我会推荐一个混合类型布局,并且对使用表格来布置需要这些特定行为的应用程序片段并不感到不满。

如果它即使对于CSS专家来说,表格也许是最好也是最简单的方法。

0

动态高度只是一个问题,如果你需要实现soem排序或背景图像的特殊效果,还有解决方法。这实际上取决于视觉设计以及需要做些什么才能使每个“块”灵活使用。有时候事情是不可能的,但大多数时候他们都是 - 他们只是倾向于增加标记的复杂性。但即使这样增加的复杂性对于我来说也比嵌套表更容易理解:-)

0

我的建议是,如果你想要得到的东西做,花费大量的时间可笑的量上的CSS布局,浏览器兼容性,CSS复位,字体:

  1. 写简单的,有效的,语义HTML
  2. 使用简单的CSS框架(如blueprint)。您将依靠简单的网格系统进行定位和布局。
  3. CSS类添加到您的HTML
  4. 添加自定义CSS的颜色,背景...

请考虑使用表格布局“把它做”;你会感到失望的,特别是如果你想稍后添加一些JS魔术。

+0

等待 - 你主张语义HTML *和*蓝图,这完全违背了? – 2009-12-30 19:53:33

+0

@meder:不完全正确。您可以在开发中使用网格类,然后使用命令行工具将它们转换为语义类。我真的不会主张这样做来取代每个'span- *',但我通常会为主模板和模板布局的顶层块以及固定宽度的“小部件”执行此操作。 – prodigitalson 2009-12-30 21:53:25

+0

忘了说你需要为语义命名空间使用compress.rb。 http://jdclayton.com/blueprints_compress_a_walkthrough.html – 2009-12-31 09:57:09

0

我为我的web应用程序使用CSS布局。但是,我的应用程序没有大量不同的信息,因此我可以设置内容区域,而不必担心布局会“关闭”,因为列与其余内容失去平衡。

如果您在CSS布局和定位时遇到问题,我会先建议表格,详细了解CSS/HTML定位,然后再转换布局。我确信这是为了在一个“真实”项目上学习CSS而感到沮丧的经历。与此同时,为CSS提供一些非常好的资源:Andy Budd,Simon Collison,Eric Meyer等人的书籍。人。另外,去他们的博客,并深入到档案。对于CSS布局,定位和一般使用来说,一本很好的书是来自APress的Beginning CSS Web Development by Simon Collison。所有的事情都有很好的实例。