Foros del Web » Creando para Internet » CSS »

Header Fixed. Problema

Estas en el tema de Header Fixed. Problema en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/01/2014, 13:41
Avatar de Iknash  
Fecha de Ingreso: enero-2014
Ubicación: Pilar, Buenos Aires
Mensajes: 2
Antigüedad: 8 años, 9 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
  #2 (permalink)  
Antiguo 29/01/2014, 14:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 3 meses
Puntos: 2114
Respuesta: Header Fixed. Problema

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.
  #3 (permalink)  
Antiguo 29/01/2014, 14:22
Avatar de Iknash  
Fecha de Ingreso: enero-2014
Ubicación: Pilar, Buenos Aires
Mensajes: 2
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Header Fixed. Problema

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:

Cita:
div#footer{
margin-top:20px;
width:100%;
min-height:100px;
background-color:black;
border-top: 1px solid black;
overflow: hidden;
}
  #4 (permalink)  
Antiguo 29/01/2014, 14:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 3 meses
Puntos: 2114
Respuesta: Header Fixed. Problema

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?

Etiquetas: background, color, fixed, header, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:25.