Hola Erik
Sería bueno que pusieses un enlace a tu trabajo. Así podríamos ver qué está ocurriendo.
Porque es extraño lo que comentas, que la inclusión de una caja con posición fixed te descuadre todo. Digo que extraño porque al asignar ese valor, la caja sale del flujo y el resto se debería comportar como si no existiese.
Pero bueno, vamos a dejar la teoría para otro momento y nos centramos en una estructura simulando una caja fixed válida para ie6 también.
Voy a ir paso a paso, quizás encuentres que muchas cosas ya las conoces, pero voy a enfocarlo como algo didáctico y pensando en los más nóveles con css.
Lo primero y fundamental es crear la estructura del html, comenzando por un doctype para evitar sorpresas desagradables posteriores, un título y la declaración de la codificación:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>DvillB en Cristalab: Fixed para ie6</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
/*aquí iran los estilos*/
</style>
</head>
<body>
<div id="caja_fija">
</div>
<div id="contenedor_pagina">
</div>
</body>
</html>
El contenedor "#caja_fija" será el que se mantenga en su lugar aunque se desplace la ventana.
En la caja "#contenedor_pagina" deberás meter toda tu página.
Por lo tanto de tu parte queda ajustar las propiedades/valores que le vamos a asignar en los estilos.
Vamos con la parte de css:Lo primero es un pequeño
reset, su función es más que conocida, así que no la explico:
Código :
* {margin: 0; padding: 0; border: 0; outline: none;}
A continuación declaramos las propiedades:
Código :
html, body {
width:100%;
height:100%;
overflow:hidden;
}
Es necesario declarar altura y anchura para que haya una referencia al definir el tamaño de la caja "#contenedor_pagina"
La regla "overflow: hidden;" forzará a que no salgan la barras de scroll propias de la ventana.
Siguiente paso, las propiedades del div donde alojarás todos tus contenidos "#contenedor_pagina":
Código :
#contenedor_pagina {
width:100%;
height:100%;
overflow: auto;
position: relative;
}
La anchura y alturas al 100% harán que ocupe toda la ventana del navegador (por eso antes hemos definido su tamaño, porque el porcentaje necesita un valor su cálculo) y con la regla "overflow: auto;" hará que aparezca el scroll cuando los contenidos sobrepasen el tamaño de la ventana. Pero esta es la gracia, lo que se desplazará será esta caja, no el "body" que permanecerá inmovil, siempre en la misma posición.
Por lo tanto, todo lo que sea hijo directo del "body" (que no esté metido en el div "#conteendor_pagina") no se moverá aunque se haga scroll (según las propiedades que se declaren).
El valor "relative" se lo asigno para que todo lo que alojes en ella tenga como referente esta caja. Aunque en puridad, como tiene las mismas medidas que el body pues eso...
Las propiedades de la caja que se va a mantener siempre visible:
"#caja_fija", simulando el fixed para que ie6 no la desplace al hacer scroll:
Código :
#caja_fija {
position: absolute;
width: 250px;
height: 250px;
border: 3px double #444;
background: #435266;
left: 50%;
margin-left: -125px;
top: 50%;
margin-top: -125px;
z-index: 10;
}
La psosición absoluta es la que hace que se mantenga en su sitio y no se desplace con el scroll porque su referente es el body, que recuerda que no se desplaza.
El resto de declaraciones son para colocarla en un punto específico del body (centrada en la vertical y en la horizontal de la ventana), asignarle tamaño y un fondo para que la identifiques.
Y el "z-index" para que se superponga en el eje-Z al contenido restante. Se conseguirá el mismo efecto si en vez de ponerla al inicio del html, la colocamos después de cerrar "#contenedor_pagina"
Así que nuestro archivo html final, con una caja siempre en el mismo lugar quedaría así, añadiendo un poco de "lorem ipsum" para ver el efecto:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>DvillB en Cristalab: Fixed para ie6</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding: 0; border: 0; outline: none;}
html, body {
width:100%;
height:100%;
overflow:hidden;
}
#contenedor_pagina {
width:100%;
height:100%;
overflow: auto;
position: relative;
}
#caja_fija {
position: absolute;
width: 250px;
height: 250px;
background: #435266;
left: 50%;
margin-left: -125px;
top: 50%;
margin-top: -125px;
z-index: 10;
}
#contenedor_pagina p {
font-size: 1.2em;
margin-bottom: 2em;
}
</style>
</head>
<body>
<div id="caja_fija">
<p>Caja fija</p>
</div>
<div id="contenedor_pagina">
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
<p>Lorem ipsum dolor sit amet consectetuer mauris vel tortor consectetuer et. Ut Phasellus neque faucibus consectetuer Nullam ipsum Aliquam nibh Suspendisse Vestibulum.</p>
</div>
</body>
</html>
Ahora sólo tienes que adaptarlo a tus necesidades.
Ya comentarás.
Saludos
es capaz de moverlo de su sitio?
