背景圖像在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; 
} 

...這正是本教程示例使用，你應該會看到一些改善。 （雖然這確實揭示了其他一些問題 - 也就是說，您的圖片資源如何相互衝突）

如果這不是您要查找的內容，請隨時通知我，我們很樂意爲您提供進一步的幫助。祝你好運！