I've been trying to get the navbar in this html to fit the page but I just can't seem to get it do that. It's within a container and then within another div so I suspect that might be the problem but I simply cannot get this to work and it would be a big help if I knew how to fix things like this in the future.
我一直试图让这个html中的导航栏适合页面,但我似乎无法做到这一点。它在一个容器内,然后在另一个div内,所以我怀疑这可能是问题,但我根本无法让它工作,如果我知道如何在将来修复这样的事情,这将是一个很大的帮助。
HTML:
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<title>Zurvo - Collaborative Research</title>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- END: Page Content -->
</body>
</html>
CSS:
/* BEGIN: Header Style */
/* Reset body padding and margins */
body { margin:0; padding:0; background-color:
#F5F1DE; }
/* Make Header Sticky */
#header_container { background-color:#4682B4; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; border-bottom: 2px solid #ced7df; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Format Positions Of The Login Form */
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.container {
margin: 50px auto;
width: 640px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: 3399FF;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #3399FF;
text-decoration: none;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
/* Design The Box */
.container {
position: relative;
top: 80px;
margin: 50px auto;
width: 640px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: steelblue;
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: white;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
/* Set The Navbar For Homepage Styling */
#content {min-height:1000px;width:300px;}
ul#list-nav {
position:relative;
bottom:39px;
margin:20px;
padding:0;
list-style:none;
width:800px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
2 个解决方案
#1
0
Total width of list-nav is 840px space available (.container) is 640px. It can not fit.
list-nav的总宽度是840px可用空间(.container)是640px。它不适合。
Try
ul#list-nav {
position:relative;
bottom:39px;
margin:20px;
padding:0;
list-style:none;
/* replace this line width:800px; */
width:600px; /* plus margin left 20px, margin right 20px ... 640px */
}
Nobody can duplicate because page is incomplete. I assumed you removed the closing tags to compress the question, but it also means everybody must assume what does not fit means.
没有人可以复制,因为页面不完整。我假设你删除了结束标签以压缩问题,但这也意味着每个人都必须承担不适合的意思。
#2
0
Here is your fixed css, the changes i've made:
这是你固定的CSS,我做的改变:
#container {
width:100%;
}
#content {
width:100%;
}
ul#list-nav {
margin-top:20px;
width:100%;
display:flex;
}
ul#list-nav li {
width:100%
}
ul#list-nav li a {
width:100%;
}
And here is the full fixed code
这是完整的固定代码
/* BEGIN: Header Style */
/* Reset body padding and margins */
body {
margin:0;
padding:0;
background-color: #F5F1DE;
}
/* Make Header Sticky */
#header_container {
background-color:#4682B4;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
border-bottom: 2px solid #ced7df;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:100%;
}
/* Format Positions Of The Login Form */
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: 3399FF;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #3399FF;
text-decoration: none;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
/* Design The Box */
.container {
position: relative;
top: 80px;
margin: 50px auto;
width: 640px;
}
.login:before {
content:'';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: steelblue;
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: white;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
/* Set The Navbar For Homepage Styling */
#content {
min-height:1000px;
width:100%;
}
ul#list-nav {
position:relative;
bottom:39px;
margin-top:20px;
padding:0;
list-style:none;
width:100%;
display:flex;
}
ul#list-nav li {
width:100%
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100%;
background:#485e49;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
display:inline-block;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">Header Content</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<ul id="list-nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Products</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<!-- END: Page Content -->#1
0
Total width of list-nav is 840px space available (.container) is 640px. It can not fit.
list-nav的总宽度是840px可用空间(.container)是640px。它不适合。
Try
ul#list-nav {
position:relative;
bottom:39px;
margin:20px;
padding:0;
list-style:none;
/* replace this line width:800px; */
width:600px; /* plus margin left 20px, margin right 20px ... 640px */
}
Nobody can duplicate because page is incomplete. I assumed you removed the closing tags to compress the question, but it also means everybody must assume what does not fit means.
没有人可以复制,因为页面不完整。我假设你删除了结束标签以压缩问题,但这也意味着每个人都必须承担不适合的意思。
#2
0
Here is your fixed css, the changes i've made:
这是你固定的CSS,我做的改变:
#container {
width:100%;
}
#content {
width:100%;
}
ul#list-nav {
margin-top:20px;
width:100%;
display:flex;
}
ul#list-nav li {
width:100%
}
ul#list-nav li a {
width:100%;
}
And here is the full fixed code
这是完整的固定代码
/* BEGIN: Header Style */
/* Reset body padding and margins */
body {
margin:0;
padding:0;
background-color: #F5F1DE;
}
/* Make Header Sticky */
#header_container {
background-color:#4682B4;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
border-bottom: 2px solid #ced7df;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:100%;
}
/* Format Positions Of The Login Form */
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: 3399FF;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #3399FF;
text-decoration: none;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
/* Design The Box */
.container {
position: relative;
top: 80px;
margin: 50px auto;
width: 640px;
}
.login:before {
content:'';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: steelblue;
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: white;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
/* Set The Navbar For Homepage Styling */
#content {
min-height:1000px;
width:100%;
}
ul#list-nav {
position:relative;
bottom:39px;
margin-top:20px;
padding:0;
list-style:none;
width:100%;
display:flex;
}
ul#list-nav li {
width:100%
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100%;
background:#485e49;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
display:inline-block;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">Header Content</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<ul id="list-nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Products</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<!-- END: Page Content -->