Question

在今天的新闻中，官方的推特小部件（http://twitter.com/about/resources/widgets）彻底摧毁了我的页脚。我不知道为什么，因为该脚本无法访问我的style.css

还是吗？

我试图重新排列并重做整个页脚，而推特小部件创建的漂亮空白区仍然存在。 WTF正在发生？在我所做的所有调整中，唯一可行的是删除整个页脚。梦幻般的解决方案！

任何人都可以帮助我吗？

footer.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

问题是你在页脚内部以一种非常奇怪的方式放置内容...你在元素上指定了很多top，left和bottom值那些position: relative - 这些元素仍然会使事物布局，好像它们处于文档的正常流程中（这说明了你看到的巨大底部间隙），然后它们也被你的定位所改变值。

更常见（也更简单）的方法是给你的页脚（或.group）position:relative，然后将position: absolute应用于孩子 - 这样孩子就可以绝对定位相对于父母。

Answer 2

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

这是一个快速解决方案：申请#disclaimer：

margin-top: -330px;

Twitter Badge摧毁了我的页脚

2 个答案: