0

我正在学习如何创建从 Photoshop 到 HTML+CSS 代码的固定表格 CSS 布局的教程。

这是本教程提出的最后一个示例（它在最后的样子）：

http://www.html.it/articoli/1688/template/11-css.html

这是我以前模板的个人版本：http: //onofri.org/example/WebTemplate/

你怎么能看到我在 Firefox 中左栏的左阴影有问题（在其他浏览器中我有其他问题）

在示例模板中，我通过将 bgpage.gif 图像设置为 #container div 的背景并将其放在此 div 的右侧来创建此阴影：

#container {
    /* consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano) */
    margin: 0 auto;
    width: 770px;   /* Imposto la larghezza */
    background: url(../images/bgpage.gif) repeat-y scroll 103% 0 transparent;
}

为什么在本教程提出的示例中运行良好而在我的例子中不起作用？

有人可以帮我解决吗？

肿瘤坏死因子

安德烈亚

4

1 回答 1

0

嗯，我认为您指的是侧边栏和左侧内容之间的阴影没有出现。

尽管将其作为重复背景，但您的#container元素未创建阴影的原因是该元素不会低于该#header元素。由于其中几乎所有元素#container都是浮动的，它们的高度不会导致父级扩展，因此其背景不会显示在那里。

要解决此问题，您需要使用clearCSS 属性 - 本教程示例通过#clearer元素样式实现该属性。

因此，添加到您的 CSS 中：

#clearer{
    clear:both;
    visibility:hidden;
}

...这正是教程示例所使用的，您应该会看到一些改进。（尽管这确实揭示了其他几个问题 - 即，您的图像资产如何相互冲突。）

如果这不是您想要的，请随时告诉我，我很乐意为您提供进一步的帮助。祝你好运！

于 2013-07-08T17:27:31.627 回答