2011-10-31 95 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