Question

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

这是教程中提出的最后一个例子（最后看起来如何）：

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

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

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

在示例模板中，我通过将bgpage.gif immage设置为#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;
}

为什么教程中提出的示例工作得很好并且在我的工作中不起作用？

有人可以帮我解决吗？

TNX

安德烈

Answer 1

嗯，我想你是指边栏和左边内容之间的阴影没有出现。

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

要解决此问题，您需要使用#clearer CSS属性 - 教程示例通过#clearer{ clear:both; visibility:hidden; }元素的样式实现。

所以，添加到你的CSS：

{{1}}

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

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

用于在CSS布局中创建阴影的背景图像的问题

1 个答案: