2011-10-31 39 views
0

我試圖創建以下文件:帶覆蓋圖像的底部DIV - 這甚至可能嗎?

http://www.pillerdesigns.com/ftn/design6.jpg

的問題是在右下角的調查。我寧願它坐在窗口的底部,但不要與最新的博客框(右邊欄)重疊(或者不足),不管最新的博客邊欄獲得多長時間。但如果沒有別的,它可能會在邊欄後面出現。

我最關心的部分是覆蓋投票的狗窩圖像,輪詢按鈕仍然是可點擊的。此外,這是在WordPress的,所以右邊欄只有150像素寬,並且狗窩不知何故需要擴展通過其包含邊欄div。

這可能嗎?

這裏是基本的HTML結構:

<div id="container"> 

    <div id="content"> 
     page content 
    </div> 

    <div id="primary"> 
     left sidebar 
    </div> 

    <div id="secondary"> 
     right sidebar 
    </div> 

    <div id="third"> 
     poll 
    </div> 

    <div id="footer"> 
     footer 
    </div> 

</div> 

這裏是CSS:

#container { 
    float: left; 
    width: 100%; 
} 
#content { 
    margin: 0 170px; 
} 
#primary, #secondary { 
    float: left; 
    width: 150px; 
} 
#primary { 
    margin: 0 0 0 -100%; 
} 
#secondary { 
    margin: 0 0 0 -150px; 
} 

#third { 
    position: fixed; 
    bottom: 0; 
    right: 20px; 
    width: 150px; 
    z-index: -1; 
} 

#footer { 
    clear: left; 
    width: 100%; 
} 

謝謝!

+0

有人已經低估了這一點,而不是給你一個理由,這是一種恥辱。是的,有可能實現你打算做的事情,但我們需要知道你已經嘗試了什麼。如果您顯示您遇到問題的CSS和HTML,並且如果您有到目前爲止完成的工作的鏈接,那麼這也很有用。然後,我們可以爲您提供一些幫助和建設性的反饋。 –

+0

這很棘手,因爲我使用的代碼顯然不是正確的想法。但我已經添加了我所做的嘗試。 – Zade

+0

它表明你已經嘗試總是很好 - 如果它是正確的,那麼你就不會在這裏;) –

回答

2

這裏有一些選擇

這其中有在側邊欄底部的狗窩:下面

http://jsfiddle.net/PfnVd/

例子有在網站底部的狗窩。 (以上頁腳mostlikely)

http://jsfiddle.net/PfnVd/1

這下一個只是有側邊欄內容比現有鏈接 http://jsfiddle.net/PfnVd/2少 - 這是顯示側邊欄沒有按怎麼走過來的「狗窩」分區。

http://jsfiddle.net/PfnVd/3/ - 中心的IMG ..

http://jsfiddle.net/PfnVd/4/ - 長內容區域。

http://jsfiddle.net/PfnVd/5/ - 文本..

而在所有的這些,你可以像通常那樣在圖像上添加文字。

+0

+1建議方法的好選擇 –

+0

令人驚歎。太感謝了。 – Zade