Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/01/2014, 13:41
Avatar de Iknash
Iknash
 
Fecha de Ingreso: enero-2014
Ubicación: Pilar, Buenos Aires
Mensajes: 2
Antigüedad: 10 años, 2 meses
Puntos: 0
Header Fixed. Problema

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:

Cita:
<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.

Cita:
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 ^^.

Última edición por Iknash; 29/01/2014 a las 13:47