How do I make my navigation bar go across the whole screen?
Question
I am making a very fancy navigation bar to look like this: Here is my css:
.header
{
width:100%;
height:80px;
background:#939393;
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position:relative;
margin-bottom:30px;
}
body
{
margin:0;
}
ul
{
margin:0;
padding:0;
}
ul.menu
{
height:80px;
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li
{
overflow:hidden;
width:200px;
list-style: none;
float:left;
height:79px;
text-align:center;
background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:-moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a
{
display:block;
padding:0 20px;
border-left:1px solid rgba(255,255,255,0.1);
border-right:1px solid rgba(0,0,0,0.1);
text-align:center;
line-height:79px;
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 1500ms;
-moz-transition-property:background;
-moz-transition-duration:1500ms;
}
ul li a:hover
{
background:transparent none;
}
ul li.active a
{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
And here is my HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<div class="navbar">
<ul class ="menu" rel="sam1">
<li class="active"><a href="Home.htm">Home</a></li>
<li><a href="Compare.htm">Compare Products</a></li>
<li><a href="Contact.htm">Contact</a></li>
<li><a href="Download.htm">Download</a></li>
</ul>
</div>
</div>
</body>
</html>
What I want to do is span the whole navigation links across the whole page. I can put each link to 25%, and that works fine, but when I try to set...
ul.menu
{
width:100%;
}
It puts a scrollbar at the bottom, and 2 pixels of white at the right edge. Is there anything I can do to remove those?
Hopefully this doesn't sound confusing.
3 answers
solution1
1 2014-01-16 20:35:16
Remove the following from ul.menu
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
solution2
1 2014-01-16 20:38:32
You can go about this in two ways, css box-sizing or css calc(0) .
Here is what I did with box-sizing: border-box; :
.header * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
What this is doing is applying box-sizing to all elements inside of the header tag. With box-sizing: border-box; the padding, border, margin, etc are all calculated into the width. Otherwise when you do width 100% it is adding 100% plus your border-left/border-right.
or you can leave width: 100%; out completely since it is a block level element it will display its self as 100% width. That is why it works correctly until you add width: 100%; .
solution3
1 ACCPTED 2014-01-16 21:15:04
You are adding a border at the edge which is making it push out from the edge of your document. You need to remove the border from the edge by remove these lines of code from your ul.menu in your css file.
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
That will remove the border from the edges, and then you will not get the white pixels around the edges.
Hope this helps.
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.