My goal is to have a menu with 95% width of the header centered.
Why doesn't the background color of the #header
or the #menu
show up?
When I do manage to have the background colors appear, it's not centered within the header.
Here's my code:
HTML:
<header id="header">
<nav id="menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
CSS:
#header {
background: black;
}
#menu {
background: #bf4040;
position: relative;
width: 95%;
margin: 0 auto;
}
ul#nav {
margin: 0;
padding: 0 20px;
width: auto;
}
ul#nav li {
float: left;
padding: 0;
list-style: none;
list-style-image: none;
margin: 2px 2px;
}
ul#nav li a {
font-size: 12px;
font-weight: bold;
text-decoration: none;
line-height: 37px;
display: block;
text-align: left;
padding: 0px 15px;
white-space: nowrap;
text-transform: uppercase;
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ul#nav li.current a, ul#nav li a:hover {
color: #ffe200;
background: #3d5a81;
}
It's because they have no height! This is due to all the float:
you are using, try replacing that with display:inline-block
and you should be close to a solution.
http://jsfiddle.net/px4Qy/2/
I added text-align:right;
to position the nav. Change this to text-align:center;
to center the menu.
The #menu
element isn't getting a background colour as it has no computed height since the nav items are floating, either set a fixed height on it or add overflow: hidden
#menu {
background: #bf4040;
position: relative;
width: 95%;
margin: 0 auto;
overflow:hidden /* clears the floating elements giving the container height */
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.