Header Fixed. Problema

[Iknash]

Hola.

El problema es que, al poner fixed a mi header, éste es modificado por los márgenes del div body, y, el div body queda debajo del header dejando imposible leer el principio del body.
Les dejo el código:

<div id="header">
<div id="menu">
<div id="cssmenu">
<ul>
<li class='active'><a href='index.html'><span>Inicio</span></a></li>
<li><a href='#'><span>Juegos</span></a></li>
<li><a href='#'><span>Gameplays</span></a></li>
<li class='last'><a href='#'><span>Literatura</span></a></li>
<li class='last'><a href='#'><span>Amor</span></a></li>
<li class='last'><a href='#'><span>Radio</span></a></li>
<li class='last'><a href='#'><span>Sobre mi</span></a></li>
<li class='last'><a href='#'><span>Contacto</span></a></li>
</ul>
</div>
</div>
</div>

<div id="body">
</div>

Y, aquí les dejo el css de los dos.

div#header{
width:100%;
height:260px;
background-color:black;
background-position: center top;
position:fixed;
}

div#menu{
margin:auto;
width:960px;
height:260px;
background: url(banner.png);
background-repeat: no-repeat;
background-position: center top;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom: 1;
text-align:center;
height: 60px;
border-radius: 2px;
width:960;
margin-left:1%;
position:absolute;
top:195px;
}
#cssmenu ul {
height: 60px;
}
#cssmenu ul li {
float: left;
list-style: none;
}
#cssmenu ul li a {
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a {
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #72e3ff;
opacity: 1;
}

div#body{
margin:auto;
margin-top:20px;
width:960px;
height:1000px;
background-color:#c1c1c1;
}

Ayuda TwT.

Desde ya, muchas gracias ^^.

[pzin]

Pues tendrás que ponerle un margen a ese div.body. Si pones una posición absoluta (posición fija es igual que una absoluta con anabolizantes) lo estás sacando del flujo natural del documento, lo que significa que no interactúa con los demás elementos.

[Iknash]

Si le pongo una posición absoluta se me superpone con el header y me queda así. Y el footer por alguna razón se me fue arriba atrás del Header

Screen:



El footer no se ve pero está debajo del header. Por si sirve de algo, dejo el código del footer:

div#footer{
margin-top:20px;
width:100%;
min-height:100px;
background-color:black;
border-top: 1px solid black;
overflow: hidden;
}

[pzin]

Nadie dijo que le pusieras una posición absoluta. Si lo quieres fijo, entonces tendrás que poner una posición fija.

Decía que le pusieran un margen a div.inline para empujarlo hacia abajo, que es lo que querías, ¿no?