Principiante con CSS "position:fixed"

crayWolf #1 Feb '13

Bueno,estoy aprendiendo por lo que es una duda muy fácil de responder,me imagino.

Estoy probando a poner un header fijo,pero al mover el scroll el "#contenedor" (donde va el texto,debajo del header) pasa que sobresale por unos pixeles encima del header,es decir,me está creando un margin-top y un margin-left por defecto :S haciendo que las letras se vean un par de pixeles por encima... no sé si me explico bien o hace falta una screen para explicarlo.

Aquí os pongo el código para que comprobeis que no estoy metiendo margenes xD
#3

Foto del problema

Saludos y muchas gracias,a ver si alguien contexta rápido para no tirar la mañana a la basura por esta tonteria.

EDIT: El código puede estar mal,pues estaba haciendo pruebas y ya no sé ni cual copie,en breves intentaré editarlo para ponerlo como lo tenía

SOLUCIÓN:

Despues de un par de pruebas añadiendo margin-top,lo conseguí poniendo a 0 los margenes en el body.

CSS final

body
{
margin-top: 0;
background:#F3F3F3;
margin-left:0;
}
#top
{
position: fixed;
width:100%;


}
#cabecera
{
width:100%;
height:8em;
background-image: url("images/fondo2.gif") ;

}
#imagen
{
margin-left:25%;
margin-right:25%;


}
#menu
{
width:100%;
height:2em;
background-image: url("images/prueba4.gif") ;

}
#contenedor
{
width:76%;
margin-left:12%;
margin-right:12%;
background:black;
clear:left;
}
#texto
{
width:70%;
margin-left:15%;
margin-right:15%;
background:#F3F3F3;
}

Imagen final

Merkury #2 Feb '13

Pon también el HTML y edita usando el tag [ code ][ /code ] (sin espacios entre los [] para meter dentro tanto el HTML como el CSS y asi lo vemos mejor.

Por cierto al #contenedor le estas pasando margenes en % para asegurarte que no agregas margenes pro arriba y por abajo definete margin-top: 0 y margin-bottom: 0.

1

crayWolf #3 Feb '13

codigos

body
{
background:#F3F3F3;
}
#top
{


}
#cabecera
{
width:100%;
height:8em;
background-image: url("images/fondo2.gif") ;



}
#imagen
{
margin-left:25%;
margin-right:25%;
}
#menu
{
width:100%;
height:2em;
background-image: url("images/prueba4.gif") ;
}
#contenedor
{
width:76%;
margin-left:12%;
margin-right:12%;

margin-top:1em;
background:#00FE00;
clear:left;
}
#texto
{
width:70%;
margin-left:15%;
margin-right:15%;
background:#F3F3F3;
}

y el html..

<html>
<head>
<meta http-equiv="Content-Type"content ="text/html;charset=iso-8859-1"/>
<title>H0l4 mund0 by pcg26</title>
<link rel="stylesheet" type="text/css" href="estilo.css"media="screen"/>
</head>
<body>
<div id="top">

<div id="cabecera">
<div id="imagen">
<img src="images/PCG26.gif">
</div>
</div>

<div id="menu">
</div>
</div>
<div id="contenedor">
<div id="texto">HOLA KE ASE</div>
</div>
</body>
</html>

crayWolf #4 Feb '13

La verdad es que no comprendo muy bien la utilidad de position fixed,pues al usarlo desordena totalmente el header,y sigue dando el problema ese que se ven un par de pixeles del contenedor pasando por encima xD

Merkury #5 Feb '13

El fixed coloca la cabecera en una posición relativa a la ventana del navegador

1 respuesta

crayWolf #6 Feb '13

#5 como se logra pues el efecto de http://www.salsalol.com/
donde el menu no se oculta por mucho que muevas el scroll?

1 respuesta

FouNNdeR #7 Feb '13

Así a botepronto necesitas meterle un fixed y si te da problemas de que no se ve todo, puede que con un zindex lo tengas arreglado.

EDIT: Vale, he vuelto a leer. Según dices, aunque una screen no haría daño, las letras de dentro del contendor que estás metiendo en fixed sobresalen no? Entonces eso ya es un problema de margin/padding/overflow o vete a saber tu sin verlo ahora.

Beavis #8 Feb '13

para este tipo de temas estaría bien que pusierais el ejemplo en una herramienta tipo http://jsfiddle.net/ o http://codepen.io/pen/ y así la gente que quiera ayudar puede toquetear el codigo directamente

Merkury #9 Feb '13

#6 El tema de salsalol esta hecho con un fixed y un top:0 al contenedor global de la parte de arriba.

Pero tu problema creo que viene porque al meter el texto asi a saco, eso genera el margen, lo dicho prueba a meterle un margin-top: 0.

Pero me parece que la forma en que estas planteando el header tiene algo que no encaja, no sabría decirte exactamente lo estoy mirando en el curro al vuelo, si no te lo solucionan esta tarde cuando llegue a casa lo miro bien.

crayWolf #10 Feb '13

Creo que me estoy volviendo loco,probando con los "fixed" he llegado a esta conclusion:

fixed en el header y el menu:

Screen1

El menu(esas barras verdes y negras)se colocan encima del header,cuando yo lo que quiero es tenerlo debajo,aún así se siguen viendo por detrás el contenedor XD.

Si solo pongo un fixed,en la cabecera,entonces el menu desaparece,y vuelve a pasar lo del contenedor.

Si lo que hago es ponerle el fixed en #TOP:

Screen2

Creo que estoy haciendo un lio para la tonteria que es,siento las molestias xD

EDIT: Solucionado una parte,he puesto :
margin-top: 0 al body y ha dejado de generar el margen.
Ahora el problema lo tengo en que el header se ha descentrado no ocupando el 100% del ancho XD seguiré investigando

1 respuesta

Merkury #11 Feb '13

#10 Yo creo que deberías tirarlo todo y volver a empezar.

El tema de que estas usando width con %, con posiciones fixed, con margenes tambien porcentuales, te esta descojonando todo.

P.D como consejo los screenshots, ponlos siempre de toda la web para poder ver en conjunto, porque ver como un margen se sale por un lado, eso nos lo imaginamos todos.

1 respuesta

crayWolf #12 Feb '13

http://i48.tinypic.com/2guazgg.gif

#11 ahí cuelgo una foto a diferentes resoluciones de la web,yo no le veo problemas con los % y los em... pero al ser un principiante,estoy encantado de poder escuchar consejos para no acostumbrarme a malas formas y saber la manera de trabajar de otros diseñadores,asi que bienvenido soy a sabios consejos.

Saludos y muchas gracias a todos por mirar el codigo,por cierto,#8,probaré esas webs ya que no conocía su existencia.

Principiante con CSS "position:fixed"

Usuarios habituales

Tags