Posicionamiento fixed y centrado

MadDunDee · #1 (**permalink**) 14/09/2009, 06:14

Hola amigos!!

estoy intentando montar un banner de promo que tiene ciertas peculiaridades.

El planteamiento es crear un div que se posicione en la parte inferior del viewport y q permanezca fijo ahí, es decir, que aunq se realice scroll sobre la página el banner permanece en la misma posición. Además ese div contendrá un slider q en mouseover haga aparecer el banner promocional.

Este div debe de aparecer centrado en la página y en la parte inferior.

Pues bien, me gustaría que me pudierais indicar como realizar esto de la mejor manera. Si alguiente tiene idea y me puede echar un cable, se lo agradecería mucho!!

Antes que nada deciros que position:fixed no me lo interpreta correctamente IE, sabéis como solucionar este problema?? había leido q en IE6 había problemas con esta regla, pero en IE7 descubro q sucede lo mismo.

Ah, y otra particularidad de la página donde quiero montar esto es que está escrita en tablas...

uuuf, cuantas cosas al final!!

Espero alguna respuestas, muchas gracias como siempre!!!

kseso? · #2 (**permalink**) 14/09/2009, 06:36

Ie7, hasta donde yo, se no tiene problemas con 'fixed'.

Si quieres código compatible con ie6 para simular el fixed, en www.araudi.net tienes algunos ejemplos, pero... nada de tablas en ellos.
Tienes una buena escusa para plantearte ir dejando las tablas únicamente para lo que se deben utilizar (presentar en pantalla datos estructurados en una matriz, o dicho como siempre: tabulados)

Un saludo

MadDunDee · #3 (**permalink**) 14/09/2009, 06:57

Bueno, en realidad la maquetación no es mía. Yo no maqueto con tablas, más que en los casos semánticamente necesarios.

En cualquier caso mi problema es con IE y he estado mirando los ejemplos q proponen en el enlace q me dejabas y no me solucionan el problema. El comportamiento del PU/8&&!!/O IE es incompresnible.

Alguien conoce alguna solución a través de JS, porq con CSS puro y duro no puedo solucionarlo. Imagino que algo tendrá que ver la maquetación con tablas.

De todas formas, muchas gracias por tu interés!!

CidDeMizar · #4 (**permalink**) 14/09/2009, 07:26

Si vas a la página CSS Zen Garden (csszengarden.com), el estilo "Under the sea" puede que te sirva de ayuda. en el menú lateral de esta página aparecen los estilos que puedes aplicarle. El primero de todos es el que te comento. Verás que en la parte inferior, centrado y fijo, tiene una imagen quebien podría ser tu banner.

Desde esa dirección puedes bajarte tanto el código HTML como las hojas CSS.

Espero que te sirva de ayuda.

Un saludo.

kseso? · #5 (**permalink**) 14/09/2009, 07:30

¿Cómo no vas a poder utilizar la técnica que emplea en este ejemplo Mikmoro?
Este es el código css que utiliza:

Código css:

Ver original* {margin:0; padding:0;}
html, body {width:100&#37;; 
height:100%; 
overflow:hidden; 
}
#contenido {width:100%; 
height:100%;
overflow: auto;
} 
#fijo { 
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-100px;
top:50%;
margin-top:-100px;
}

Y su estructura en el html es:

Código html:

Ver original<body>
<div id="contenido">
<!-- Sólo tienes que meter aquí el contenido de tu body -->
</div>
<div id="fijo">y en esta caja el contenido de fixed</div>
</body>
</html>

Y lo puedes completar algo más haciendo uso de los comentarios condicionales para ie6.

Un saludo

Edito:
Hola CiddeMizar.
El problema con el ejemplo que enlazas es que para lograrlo utiliza el valor "fixed":

Código css:

Ver original#extraDiv2 {
position: fixed;
bottom:0;
}

abimaelrc · #6 (**permalink**) 14/09/2009, 07:40

@kseso? el codigo tuyo esta enviando un varlo & #37; que significa para aquellos que no sepan %. Lo digo por si acaso

kseso? · #7 (**permalink**) 14/09/2009, 07:58

Gracias por la observación, abimaelrc, pero es una cuestión de la etiqueta [ HIGHLIGHT="css"][ /HIGHLIGHT] que convierte el símbolo % en su equivalente

Código css:

Ver original&#37;

abimaelrc · #8 (**permalink**) 14/09/2009, 08:15

Si lo se, por eso hago la observación para que aquella persona que no sepa que significa eso, lo tenga en mente. Me pasa mucho por eso lo dije

MadDunDee · #9 (**permalink**) 14/09/2009, 09:09

Quería agradeceros vuestro interés en este tema.

He conseguido por fin fijar este problema en IE con el siguiente código:

*div#fija {
position: fixed;
bottom: 0;
left: 0px;
width: 100%;
background-color:Black;
height: 60px;
z-index: 2;
}

* html div#fija {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));
left: expression("0px");
}

div#fija a
{
color:black;

background-color:White;
margin: -40px -300px -100px 0;
position: relative;
margin-left:50%;
margin-right:50%;
}

Asñi consigo centrar además el contenido como necesitaba. Es un banner publiccitario q va justo en el bottom de la página.

Pues lo dicho, muchas gracias y espero q sirva el análisis este para alguien más.

un abrazo!!

Anaep · #10 (**permalink**) 04/06/2010, 05:04

Hola
Tengo problemas con el posicionamiento fijo en una columna, he usado el códico que pasaste y lo nunca visto funciona en ie6, pero en ie7 no...

Paso el código para que lo puedas ver y si eso ayudarme...

Código CSS:

Ver original#columna{
    position:fixed;
    width: 250px;
    margin-left:95px;
    float:left;
    background-color:#CCC;
    padding:15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 5px 5px 7px #888;
    -moz-box-shadow: 5px 5px 7px #888;
    -webkit-box-shadow: 5px 5px 7px #888;
    
}
* html #columna {
    position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));
    left: expression("95px");
}

El posicionamiento absoluto lo tiene el div general
Quiero que se coloque en la margin-left:95px; y en ie6 funciona, pero en el ie7 se me coloca en medio de la página...

Gracias

Anaep · #11 (**permalink**) 04/06/2010, 05:12

Casi mejor que os dejo la página que ya está subida y así te haces a la idea

www.oscarlopezplaza.com

El problema está en el posicionamiento fijo de la columna de la izq en ie7

#12 (**permalink**) 04/06/2010, 11:20

bueno lo que yo aria seria lo siguiente

Código HTML:

<body>
<div id="content">
</div>
<div id="contentBaner">
<div id="baner">
</div>
</div
</body>

Código CSS:

Ver original#content {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
padding-botttom: 100px;
}
 
#contentBaner {
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 100px;
}
 
#baner {
width: 800px;
margin: auto;
}

explico

la capa content es donde va todo el contenido de la pagina y tiene un padding inferior de 100px que es donde se mostrara el baner y como ambos estaran con posicion absoluta pues se quedaran fijos como se desea, de ahi el resto del contenido y estilo es tuyo

#13 (**permalink**) 01/07/2011, 15:25

Jajaja de cuando recien comenzaba XD

Durabite · #14 (**permalink**) 23/01/2012, 14:54

Creo que existe una manera aun mas simple de hacer esto.

Una vez tengas indentificado tu div que estara sobre todo basta con colocar en un css lo siguiente.

Código CSS:

Ver original#contenedor{
    margin:0 auto;
    padding:0;
    position:fixed;
        height: 25px; /*Tamaño de tu div*/
        width: 500px; /*Anchura de tu div*/
    top:75px;
    left:-50%;
    right:-50%;
    z-index: 1;

Esto centrada tu div por encima de todo y lo posicionaras como tu los desees, ten en cuenta que porcentajes negativos empujan hacia la derecha y los negativos hacia la izquierda, de ahi que tengas que colocar los porcentajes en negativo para que se centre tu div.

Saludos

#15 (**permalink**) 23/01/2012, 16:22

Yo sigo apoyando lo que dije...
Como veras pide soporte para IE7 ( ascooo :s )... y a mi parecer, en puro CSS esa es la única forma.

Pero creo que esto es de hace más de 6 meses :s

kseso? · #16 (**permalink**) 24/01/2012, 10:19

Coño!!
Otro post zombi que resucita al menos una vez al año.
Como sugerencia a quien corresponda:
Visto el querer de los arqueólogos y que la duda era con el no soporte de ie6 ?no sería mejor cerrarlo?