Nav inside Header, Position Fixed? - css

Question

I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;

Answer 1

If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.

Answer 2

#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}