[英]Navigation Bar to Stay on top
I created a nice navigation bar and I want to stay on the top of the page even if the user is scrolling. 我创建了一个不错的导航栏,即使用户正在滚动,我也希望停留在页面顶部。 I've created a separate PHP file for the header named header.php and included it on the main page.
我为标题header.php创建了一个单独的PHP文件,并将其包含在主页中。
CSS for headermenu 标头菜单的CSS
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
It worked good though but it won't stay on the top when the user scrolls, so I decided to put some additional codes: 虽然效果很好,但是当用户滚动时它不会停留在顶部,因此我决定添加一些其他代码:
.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
position: fixed;
top: 0;
}
After putting those two codes my navigation bar won't display on the page. 输入这两个代码后,导航栏将不会显示在页面上。
I tried asking some people on the net and they all come up with the position:fixed; top:0;
我试图在网上问一些人,他们都提出了这个
position:fixed; top:0;
position:fixed; top:0;
code. 码。 Why it's not working?
为什么不起作用?
HTML HTML
<div class = "headerMenu">
<div id = "menu">
<a href = "home.php" />What's New</a>
<a href = "home.php" /><?php echo $firstname; ?></a>
<a href = "signout_com.php" />Sign Out</a>
</div>
</div>
Try this :) 尝试这个 :)
.headerMenu {
position:fixed;
top:0;
width:100%;
background-color:#FF0000;
background-image:url(../img/background_white.png);
height:56px;
}
Remove the padding, then remove the self closing tag for your anchors :) 删除填充物,然后删除锚点的自闭合标签:)
Also make sure you are putting content underneath it :) and then add 56px margin to the top of the content element. 另外,请确保将内容放在其下方:),然后在内容元素的顶部添加56px的边距。
I hope this helps 我希望这有帮助
Nothing wrong in css but in html: CSS没错,但html没错:
Demo : http://jsfiddle.net/lotusgodkk/xpgzP/99/ 演示: http : //jsfiddle.net/lotusgodkk/xpgzP/99/
HTML: HTML:
<div class="headerMenu">
<div id="menu"> <a href="home.php">What's New</a>
<a href="home.php">Name</a> <a href="signout_com.php">Sign Out</a> <!--Incorrect closing tags removed-->
</div>
</div>
<div id="content">content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>
</div>
<div id="footer"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.