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

Question

我正在学习一个教程如何创建从Photoshop开始到HTML + CSS代码的固定tabless CSS布局。

这是提出府本教程的最后一个例子（它如何有看起来像在年底）：

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

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

你怎么能看到我在左边栏的左边的影子（与其他浏览器我有其他问题）在Firefox的一些问题

正如在示例模板中，我已经创建了这个sh

#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; 
} 

为什么通过本教程的工作提出了很好，在我的例子不工作：通过设置bgpage.gif IMMAGE为#container的DIV的背景，并把它放在这个div右侧adow？

有人可以帮我解决吗？

TNX

安德烈

Answer 1

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

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

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

因此，添加到您的CSS：

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

...这正是本教程示例使用，你应该会看到一些改善。 （虽然这确实揭示了其他一些问题 - 也就是说，您的图片资源如何相互冲突）

如果这不是您要查找的内容，请随时通知我，我们很乐意为您提供进一步的帮助。祝你好运！