CSS布局、Vis Studio 2005和AJAX选项卡容器

Question

在IDE Web应用程序VS2005(我避免使用2008，因为我发现C#很难处理)中，我遇到了布局难题。

我正在从绝对定位转向CSS相对定位。

我想把屏幕分成四个块:顶部(页眉区域)，中间左侧(堆叠菜单)，中间右侧(内容-这里是AJAX标签容器)和底部(页脚区域)，所有4个块都相对定位，但中间右侧(内容)块中的控件绝对相对于块的左上角定位。一个很好的附带好处是让IDE设计窗口按实际显示的方式显示所有控件，但我怀疑这是可能的。IDE将所有控件定位在相对于设计窗口左上角的选项卡面板内；相当混乱。

现在，我的偏见是CSS在相对定位块、图片、文本等方面很好，但不适合输入表单，因为在输入表单中，排列大量标签、文本框、ddl、复选框等很重要。

无论如何，我的CSS还不能胜任这项任务--有没有好的文章、书籍、博客等讨论CSS在ASP.NET中的实现，其中可能包括一个带有AJAX选项卡控件的示例？任何帮助都将不胜感激。

非常感谢

迈克·托马斯

Answer 1

据我所知，并没有特定于ASP.NET的东西，您没有使用引用的样式表是对的(至少在2008年是这样)。

但是，这些可能会对您有所帮助：

http://www.positioniseverything.net/ - Position就是一切，一个很好的CSS资源。

http://www.alistapart.com/topics/code/css/ -一个单独的列表CSS部分，关于特定技术的建议。

从本质上讲，你需要的是4个主要的div:页眉，页脚，菜单，内容。根据你的喜好放置每个div，然后调整它们的子目录的位置，大多数浏览器会将其视为“相对于父目录的位置”(除非它是绝对的，IIRC)。

Answer 2

我很感谢这可能不是你想要的全面的答案，但它可能会有所帮助…

要使右侧块的内容相对于其左上角绝对定位，只需给容器元素一个position: relative;样式。这将把该元素变成一个包含块，导致所有绝对定位的子元素都定位在它的边界上。这里有一篇关于这个主题的有用的文章：CSS Positioning。ASP.NET控件的问题之一是让它输出有效的标记，尤其是AJAX控件工具包。最好使用能让你100%控制标记的控件，有时这意味着创建复杂的UserControl或者在你的aspx文件中添加一些讨厌的脚本。

关于让IDE正确呈现的问题，甚至不必费心。我已经有近两年没有在VS中使用设计视图了，这是有充分理由的:它很糟糕，而且是基于IE的。任何IDE都不会给你提供实时测试所能提供的完整的渲染体验，所以就我个人而言，我并不担心。我知道新的MS工具对此有更好的支持，尽管它仍然不完美，也不像真正的浏览器那样可靠(显然你想在这里使用Firefox！)。

Answer 3

正如Jeff所说，关于如何实现ASP.NET，并没有什么特别的东西。关于使用CSS设置表单样式，请阅读这些内容，以获得一些想法：

• http://www.sitepoint.com/article/fancy-form-design-css/
• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
• http://www.quirksmode.org/css/forms.html