Menu
I would like to have my navbar stretch to the edges of the browser. I can do that by specifying the width by pixel but when I make width="100%" it is not working + it shows scroll bar at the bottom.....so how can I make it stretch to the window size of the browser horizontally?
Here is the Demo
<html>
<head>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width:100%;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float: left;
color:#d4d4d4;
padding: 15px 97px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: red;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li:hover ul {
left: auto;
}
#nav li li:hover ul {
visibility:visible;
}
</style>
</head>
<body>
<div id="nav" >
<ul >
<li width="300px" ><a href="#">Home</a></li>
<li><a href="#">Sell</a>
<li><a href="#">Services</a>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign In/Register</a></li>
</ul>
</div>
589
I quess you try to style 'ul li a' instead of 'ul li' elements. As someone mentioned above give to each li element 20%, style everything with 'box-sizing: border-box' and you're ready to go ;) Here you can see solution: http://codepen.io/czaras/pen/Auqtn
127
The width specifies the width of the content. The padding and border sizes are added to that specified width. If you want it including the border to be 100%, you must remove your border.
See this illustration:
_______________________
| margin |
| ___________________ |
| | border | |
| | _______________ | |
| | | padding | | |
| | | ___________ | | |
| | | | content | | | |
| | | |___________| | | |
| | | | | | | |
| | | |<- width ->| | | |
| | |_______________| | |
| |___________________| |
|_______________________|
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
