Geek Answers Handbook

How to make navigation full width

I want my navigator to stretch to the edge of the browser. I can do this by specifying the width per pixel, but when I do width = "100%" it doesn’t work + it shows the scroll bar at the bottom ..... so how can I make it stretch the browser window horizontally?

Here is a 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>
+4
source share
3 answers

I do not want you to try styling "ul li a" instead of "ul li" elements. As mentioned above, each li element is 20%, you need to create everything using "box-sizing: border-box", and you are ready to work;) Here you can see the solution: http://codepen.io/czaras/pen/ Auqtn

+2
source

Width defines the width of the content. The fill and border size is added to the specified specified width. If you want it to include the border 100%, you must delete your border.

See this illustration:

  _______________________ | margin | | ___________________ | | | border | | | | _______________ | | | | | padding | | | | | | ___________ | | | | | | | content | | | | | | | |___________| | | | | | | | | | | | | | | |<- width ->| | | | | | |_______________| | | | |___________________| | |_______________________|
+1
source

#nav is 100% width, but individual buttons do not occupy the necessary space, since they correspond to the width of their text ( width:auto ). The easiest way to get the effect you are looking for (for any number of buttons) is to use a table with 100% width. A more complicated way is to give each button an equal percentage width so that the number of buttons is up to 100%. You have 5 buttons, so you can set width:20%; at #nav ul li . You will also want to eliminate the 97px large left-right padding that you have in this style and choose a much lower value.

To handle the scroll bar below, specify box-sizing: border-box; on #nav .

0
source

More articles:


All Articles