溢出CSS股利超過到相鄰的容器（WordPress的創作）

我試圖複製以下網站上的樣子：http://lousrestaurant.net/溢出CSS股利超過到相鄰的容器（WordPress的創作）

你會看到標誌是底部溢出到菜單欄（一WP中的獨立分隔）。標題徽標和菜單欄都是一個圖像。 WP生成菜單文本格式，所以只需要擔心背景圖片。

我已經使用菜單欄（實心帶）在標題圖像底部Photoshop我自己的標題圖像，但不能讓它溢出到導航欄div。

利用這一點，我已經部分成功：

#branding img 
{ 
clear: both; 
display: block; 
background-image:url('myimage.png'); 
background-size: 940px 185px; 
background-repeat: no-repeat; 
position: absolute; 
}

這是古怪的，雖然，原因有二：然後

主頁容器的位置需要進行設置，由於上述position:absolute它。
某些瀏覽器認爲沒有標題圖片，因爲我將上面的CSS插入style.css，並且不使用WP的「非常有幫助」的標題圖片上傳器。

我已經有了很多年的HTML和CSS經驗，但是我對WordPress並不熟悉，而且我越來越掛在那裏。

來源

2012-01-30 John Pate

如果你看看他們的代碼，它基本上

<div id="header"> 
    <a href="/"></a> 
    <div id="nav"></div> 
</div>

他們將背景圖像到#header然後使a佔據這個空間是點擊，所以他們不會溢出的div，圖像是包裝元素的背景。看起來您正在添加一個元素來溢出它，如果您在層次結構中升級時不需要溢出。

來源

2012-01-30 18:09:01 JKirchartz

有趣。我會玩增加背景圖片到#header，而不是#header img。 href只是使圖像可點擊回到主頁。我會告訴你！ – 2012-01-30 18:27:28

沒有工作。 #header將img放在FF中的標題上，但Chrome，IE認爲沒有標題;他們顯示img，但Chrome有灰色框，IE有X指示「我們認爲有一個空的圖像容器」。最後，標題圖像不會溢出到菜單上。我將#access（nav）設置爲「透明」背景，但沒有去，除非我使用Position Absolute，然後運行，但Chrome和IE仍然不滿意。 – 2012-01-30 19:42:36

你是否在元素上設置高度和寬度？使用螢火蟲或鉻開發工具，看看他們使用什麼代碼和模擬... – JKirchartz 2012-01-30 19:50:29

溢出CSS股利超過到相鄰的容器（WordPress的創作）

回答

相關問題