Twitter徽章毁了我的页脚[关闭]

Question

在今天的新闻中，官方 twitter 小部件 (http://twitter.com/about/resources/widgets) 完全摧毁了我的页脚。而且我不知道为什么，因为该脚本无法访问我的 style.css

还是这样？

我尝试重新排列并重做页脚，但 twitter 小部件创建的漂亮空白区域仍然存在。 WTF正在发生吗？在我所做的所有调整中，唯一可行的就是删除整个页脚。很棒的解决方案！

有人可以帮我吗？

页脚.php：

</div> <!-- End of pagewrap -->

    <footer class="group">
        <div id="logo"></div>
        <div id="twittertitle"><h3>The Director's Production Diary @iampineros</h3>   </div>
        <div id="twitterbox"><div id="winfo"></div></div>

        <div id="sociallist">
            <ul>               
                <li><a href="#"><div id="facebooklogo"><h3>Facebook</h3></div></a></li>
                <li><a href="#"><div id="twitterlogo"><h3>Twitter</h3></div></a></li>
                <li><a href="#"><div id="flickrlogo"><h3>Flickr</h3></div></a></li>
                <li><a href="#"><div id="vimeologo"><h3>Vimeo</h3></div></a></li>
                <li><a href="#"><div id="youtubelogo"><h3>Youtube</h3></div></a></li>
            </ul>                                
        </div>
            <div id="disclaimer">All material published in this website is property of Filmliga unless stated otherwise. Please, don’t mess with us, thank you. Copyright 2011 FIlmliga/Benjamin Piñeros. All rights reserved. This site is powored by Wordpress.</div>

</footer>            

<?php wp_footer(); ?>


</body>

</html>

style.css：

#page-wrap { width:1020px; margin: 0px 0px 0px 0px; padding: 0px 0px 20px 0px; background: white; }

footer { width: 1020px; height: 300px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }

#logo { width: 221px; height: 222px;position:relative; bottom: -20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat;  }

#twittertitle { position:relative; bottom: 208px; left: 270px; padding: 0px 0px 0px 0px; }

#twitterbox { position:relative; top: -203px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }

#winfo { position:relative; top: 0px; left: 0px; padding: 0px 0px 0px 0px; background:none; width: 500px; height: 180px; }

#sociallist { position:relative; bottom: 393px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }

#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }

#sociallist li h3:hover {color: #1ad4ff; }

#facebooklogo { background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 10px; left: 103px; }

#facebooklogo h3 { position:relative; bottom: 3px; right: 90px; }

#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position:relative; top: 20px; left: 98px; }

#twitterlogo h3 { position:relative; bottom: 3px; right: 85px; }

#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 30px; left: 103px; }

#flickrlogo h3 { position:relative; bottom: 2px; right: 90px; }

#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position:relative; top: 40px; left: 101px; }

#vimeologo h3 { position:relative; bottom: 2px; right: 87px; }

#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position:relative; top: 50px; left: 104px; }

#youtubelogo h3 { position:relative; bottom: 2px; right: 90px; }

#disclaimer { position: relative; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }

Answer 1

问题是您在页脚中以一种非常奇怪的方式定位内容...您在具有 position: relative 的元素上指定了许多 top、left 和 bottom 值—这些元素仍然会导致事情像在文档的正常流程中一样进行布局（这说明了您看到的巨大底部间隙），然后它们也会被您的定位值移动。

一种更常见（也更容易）的方法是给你的页脚（或.group）position:relative，然后将position: absolute 应用到孩子——这样孩子将相对于父母绝对定位。

Answer 2

问题在于你的布局。您对绝对/相对定位的广泛使用正在搞乱后续的 div 放置。考虑重做布局。

这里有一个快速修复： 申请#disclaimer：

margin-top: -330px;