顶级栏(固定) – 正如在Twitter和Facebook上看到的那样,试图模仿我正在进行的网络项目 – 无论我尝试多少,内容都会消失在滚动之外.本教程
http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
但是,当分辨率改变或缩放时,内容会重叠.不要这样 – 正如我们在twitter / FB上看到的那样 – 希望滚动显示变焦(或更低的分辨率)
自2天以来一直在围绕这个问题,没有积极的结果.
这是我从教程中编辑的测试代码 –
<html>
<style type="text/css">
#footpanel {
position: fixed;
top: 0; left: 0;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-top: none;
width: 100%;
height: 25px;
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
}
#footpanel ul li a{
padding: 5px;
float: left;
height: 16px; width: 36px;
text-decoration: none;
color: black;
position: relative;
}
#footpanel a.home{
width: 50px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.chat{
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel,#footpanel li#alertpanel { float: right; } /*--Right align the chat and alert panels--*/
</style>
<div id="footpanel">
<ul id="mainpanel">
<li><a href="#" class="home">A </a></li>
<li><a href="#" class="profile">B </a></li>
<li><a href="#" class="editprofile">C </a></li>
<li><a href="#" class="contacts">D </a></li>
<li><a href="#" class="messages">E </a></li>
<li><a href="#" class="playlist">P </a></li>
<li><a href="#" class="videos">V </a></li>
<li id="alertpanel"><a href="#" class="alerts">S</a></li>
<li id="chatpanel"><a href="#" class="chat">F (<strong>18</strong>)</a></li>
</ul>
</div>
</html>
发生了什么 – 在缩放(或更低的分辨率)脚板的内容出来(我可以防止这个溢出：隐藏,但这不是我想要的)容器(footpanel)
我想要它做什么 – 比如twitter / FB,我想要一个滚动进来和脚板来保存它的布局而不是不合适.
请帮忙
–CSS初学者
解决方法
我想不出在纯CSS中这样做的方法和Twitter似乎使用Javascript来实现这种效果.
首先,在#footpanel和body上设置相同的min-width.您可能还希望将各种项目的高度设置为auto或em等效项,以便在缩放和文本大小调整时很好地调整大小.
然后将此Javascript放在您的页面上：
<script type="text/javascript">
function hscrollbar() {
/* First,we need the horizontal scroll position of the viewer's display,but there are different ways to call it in JS depending on browser.
I'm using the if/else shorthand notation to detect if a call is legit:
somevar = (statement) ? statement_true_value : statement_false_value */
var left =
/* window.pageXOffset should work for most recent browsers: */
window.pageXOffset ? window.pageXOffset :
/* If it DOESN'T,let's try this: */
document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
/* And if THAT didn't work: */
document.body.scrollLeft;
/* Now that we have the horizontal scroll position,set #footpanel's left
position to NEGATIVE the value,so it APPEARS to follow the scroll: */
document.getElementById('footpanel').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>
