如何使Twitter Widget像其他任何元素一样？

时间：2014-07-13 06:16:40

标签： html css html5

我已经尝试了几天来修复我在内容上遇到的问题，特别是文本问题，但一般来说我的内容框已经出现在我的Twitter Widget上。窗口小部件似乎被忽略，就好像它不存在一样，当浏览器变得太小时，文本将与窗口小部件重叠。我怎么能解决这个问题？

我希望Twitter Widget和'Footer'保持在彼此之上和之下（我最终会在小部件下方移动'页脚'）。随着浏览器变得越来越小，我希望带有段落和视频的内容框会移动到小部件和“页脚”附近而不会重叠它们，也不会在它们下面形成。只需强制页面滚动即可。作为参考，您可以查看任何Twitter提要。

我不希望发生这种情况：http://i.imgur.com/d79CvQL.png

请记住，我对这件事情都很陌生。我打算成为一名后端开发人员，但我知道如果我想在任何职业机会中取得成功，我需要在开发的各个方面都得到全面的帮助。非常感谢任何提供提示，技巧和修复的人和所有人！此外，对不起，如果这不是正确的格式！

以下是标记的Jsfiddle：http://jsfiddle.net/Codewow/8LeNV/

如果未来的开发人员处理同样的问题，我一定会保留这些文件的备份。

HTML标记：

<body>
<div class=wrapper>
<div class=header>
<!-- Insert header image here via CSS-->
</div>
    <nav>
        <ul>
            <li><a href=#>Home</a>

            </li>
            <li><a href=#>Server Rules</a>

            </li>
            <li><a href=#>News</a>

            </li>
            <li><a href=#>Forums</a>

            </li>
            <li><a href=#>PvP Stats</a>

            </li>
            <li><a href=#>MCF Thread</a>

            </li>
            <li><a href=/IRC.php>IRC</a>

            </li>
        </ul>
    </nav>
    <div id=content>
        <div id=footer>
            <div id="sidebar">
                <ul>
                    <li class="footer-item">&copy; 2010-2014 SyroCraft</li>
                    <li class="footer-item">Jobs</li>
                    <li class="footer-item">About</li>
                    <li class="footer-item">Help</li>
                    <li class="footer-item">Terms</li>
                    <li class="footer-item">Yada</li>
                    <li class="footer-item">Yada</li>
                    <li class="footer-item">Yada</li>
                </ul>
            </div>
            <p class=twitter><a class="twitter-timeline" height="485px" width="310px" href="https://twitter.com/SyroCraft" data-widget-id="335981577555308544">Tweets by @SyroCraft</a>

        </div>
        <script>
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + "://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, "script", "twitter-wjs");
        </script>
        </p>

    <div id=maincontent>
         <h3>SyroCraft Minecraft Server</h3>

<p>Here at SyroCraft, we strive to create and expand a dedicated and upstanding             community of builders, role-players, pvp-ers and socialize-ers. Our main focus is on community involvement. Whether it be an event or content for our website. We work together to create the best place to play and enjoy Minecraft. Click around a bit and check us out!    Watch our server trailer below!</p>
        <p id=video>
            <object>
                <param name="movie" value="//www.youtube.com/v/tNwfnvkDFB0?version=3&amp;hl=en_US"></param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed src="//www.youtube.com/v/tNwfnvkDFB0?version=3&amp;hl=en_US"      type="application/x-shockwave-flash" height=300 width=500 allowscriptaccess="always" allowfullscreen="true"></embed>
            </object>
        </p>
        <!-- insert trailer here! -->
    </div>
    </div>
</div>
</body>
</html>

CSS标记：

.wrapper {
margin: 0 auto;
width: 100%;
height: 100%
}
/*body{
background: url(images/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover; 

}*/
html {
font-family: arial, sans-serif, times;
font-size: 1.1em;
background: #666666;
}
.header {
height: 100px;
width: 100%;
margin: 0 auto;
margin-bottom: -2px;
background-image:url(images/logo.jpg);
background-size: 700px;
background-repeat: no-repeat;
background-position:center;
background-color: #00dc00;
}
#IRC {
height: 95%;
width: 100%;
margin: 0 auto;
}
nav {
margin: 0;
width: 100%;
background-color: #00d100;
}
nav ul {
margin: 0;
padding: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
text-align: center;
}
nav ul li {
display: inline-block;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 105px;
margin: -2px;
background-color: #05d100;
overflow: hidden;
}
nav a:link {
text-decoration: none;
color: #555555;
}
nav a:visited {
color: #99FF99;
}
nav li:hover {
background-color: #00FF00;
}
@media screen and (max-width: 769px) {
nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
}
}
@media screen and (max-width: 700px) {
.header {
    display: block;
    background-image:url(images/mobilehead.png);
    background-size: 380px;
    background-position: top;
}
}
/*#twitter {
display: inline-block;
float: left;
position: static;
margin: 0 auto;
text-align: center;
width: 14%;
height: 500px;
padding: 60px;
border: dashed;
overflow: hidden;

}*/
#content {
display: inline-block;
position: static;
margin: 0 auto;
text-align: center;
width: 93%;
height: 650px;
padding: 60px;
border: dashed;
z-index: 1;
}
#footer {
border-radius: 5px;
float: left;
text-align: left;
height: 60px;
width: 310px;
background-color: #00dc00;
/*padding: 5px;*/
font-size: .8em;
z-index: 1;
margin-top: 50px;
}
#footer ul {
text-align: center;
margin: 0 auto;
margin-left: -35px;
text-decoration: none;
list-style-type: none;

}
.footer-item {
margin: 0 auto;
display: inline-block;
padding: 5px;
}
.twitter {
/*position: static;*/
margin-top: 10px;
margin-bottom: 30px;
float: left;
z-index: 0;
overflow: auto;
}
#siderbar {
display:inline;
padding:20px;
z-index: 0;
border: groove;
}
#maincontent {
float: none;
position: static;
margin: 0 auto;
width: 600px;
border: solid;
z-index: 3;
overflow: auto;
}
@media screen and (max-width: 1377px) {
.sidebar {
display: block;
}
}
/*#right {
display: inline-block;
float: left;
position: static;
margin: 0 auto;
text-align: center;
width: 15%;
height: 500px;
padding: 60px;
border: dashed;
overflow: hidden;


}*/
p {
margin-bottom: 50px;
}
#video {
margin: 0 auto;
margin-top: 10px;
}

2 个答案:

答案 0 :(得分：0)

尝试将Twitter Feed标记为position: absolute;，以防止文本重叠。

请参阅小提琴：http://jsfiddle.net/8LeNV/1/

希望这有帮助。

答案 1 :(得分：0)

所有这一切的答案都很简单，而Link13在回答问题时回答了问题，但没有回答我的意思。

我发现通过在CSS中为包装器添加最小宽度和最大宽度，它会将页面锁定到一定的大小并强制它添加水平滚动条。

参见代码：

.wrapper {
margin: 0 auto;
width: 100%;
height: 100%
max-height: 1092px;
min-height: 1020px;
}

这完美地解决了我在内容框移动到信息框下方和推特小部件后面的问题。

相关问题
最新问题