2

我的问题是关于封装徽标和菜单的顶部水平条。我不想指定它的高度，因为我更喜欢浏览器根据用户配置（文本大小、禁用 CSS 或图像）自动调整它。

我找到了一个解决方案：http position: absolute;: //jsfiddle.net/5GmWp/30
这个解决方案还避免了黑色顶栏周围的白色间隙。 

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* "absolute position" avoids a white gap around the #top black bar */
      position: absolute;
      /* Using absolute position, I do not have to specify the height */
      height: auto;
      width: 100%;
      top: 0;
      left: 0;
      padding-left: 3em; }

但是这个顶部的水平条显示在前台，页面的其余部分部分在其背景上。要解决我用来reset.css规范化 CSS 的问题：http: //jsfiddle.net/UKYrR/12

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* reset.css removes the white gap around the #top box */
      /* position: absolute; // "absolute position" is not required */
      /* However I have to specify the height :( */
      height: 90px;
      /* If height=auto, the logo is partially outside the #top box */
      width: 100%;
      top: 0;
      left: 0;
      padding: 0.5em;
      padding-left: 3em; }

但现在我必须指定高度以将徽标图像保留在黑色顶框内。

编写这样的水平顶栏有哪些好的做法？
我也很欣赏优秀而小巧的 CSS 教程；）

编辑： 在我用来<table>解决这类问题之前。但我注意到大多数网站使用<div>CSS 代替。另一个问题：为什么大多数网站更喜欢使用<div>而不是<table>显示水平条？是为了简化网站的复制粘贴吗？

更多细节： 我在业余时间开发了一个网站，允许任何人创建视觉障碍人士可以访问的地图。因此，我希望网站在所有可能的配置中都能很好地显示：禁用 CSS、禁用图像、大文本大小、旧浏览器......但同时，该网站也应该在最近的浏览器上引人注目。并且 CSS/HTML/JavaScript/images 文件应该很小。并且可能不依赖外部 CSS/JavaScript 文件。我将很快在顶部水平栏中添加菜单。我也在重新编写地图编辑器 web 应用程序（SVG+JavaScript），但这是另一个故事......

4

2 回答 2

3

http://jsfiddle.net/UKYrR/16/

这很容易（并且可以通过多种方式解决），我不知道该解释什么。请向我询问您想要的一切。

至于divvstable战争，甚至还有特殊的术语，例如table-based 或inline-block-based layouts。这里没有最差或最好的。它们只是你工作的不同地下室范式。我坚持inline-blocks 半年多，从来没有见过s甚至s (with JS) 做不到table的完全令人兴奋的事情。这完全足以让我更喜欢s。inline-blockfloatblockinline-block

于 2013-05-19T22:24:45.553 回答
1

最后我找到了一个最简单的解决方案：http: //jsfiddle.net/5GmWp/32/

  • 添加body { margin: 0; }
  • 移除#top { position: absolute; }

结果：

body { margin: 0; }

#top { color: white;
       background: none repeat scroll 0 0 #444;
       height: auto;
       width: 100%;
       top: 0;
       left: 0;
       padding: 1em;
       padding-left: 3em; }
于 2013-05-23T04:16:48.270 回答