Foros del Web » Creando para Internet » CSS »

Posicionamiento fixed y centrado

Estas en el tema de Posicionamiento fixed y centrado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/09/2009, 06:14
 
Fecha de Ingreso: octubre-2006
Mensajes: 199
Antigüedad: 10 años, 4 meses
Puntos: 3
Posicionamiento fixed y centrado

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!!!

  #2 (permalink)  
Antiguo 14/09/2009, 06:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Posicionamiento fixed y centrado

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 14/09/2009, 06:57
 
Fecha de Ingreso: octubre-2006
Mensajes: 199
Antigüedad: 10 años, 4 meses
Puntos: 3
Respuesta: Posicionamiento fixed y centrado

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!!

  #4 (permalink)  
Antiguo 14/09/2009, 07:26
 
Fecha de Ingreso: septiembre-2009
Mensajes: 17
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Posicionamiento fixed y centrado

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.
  #5 (permalink)  
Antiguo 14/09/2009, 07:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Posicionamiento fixed y centrado

¿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
  1. * {margin:0; padding:0;}
  2. html, body {width:100%;
  3. height:100%;
  4. overflow:hidden;
  5. }
  6. #contenido {width:100%;
  7. height:100%;
  8. overflow: auto;
  9. }
  10. #fijo {
  11. position:absolute;
  12. width:200px;
  13. height:200px;
  14. border:1px solid #000;
  15. background:#cff;
  16. left:50%;
  17. margin-left:-100px;
  18. top:50%;
  19. margin-top:-100px;
  20. }
Y su estructura en el html es:
Código html:
Ver original
  1. <div id="contenido">
  2. <!-- Sólo tienes que meter aquí el contenido de tu body -->
  3. </div>
  4. <div id="fijo">y en esta caja el contenido de fixed</div>
  5. </body>
  6. </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
  1. #extraDiv2 {
  2. position: fixed;
  3. bottom:0;
  4. }
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 14/09/2009, 07:40
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 7 años, 10 meses
Puntos: 1512
Respuesta: Posicionamiento fixed y centrado

@kseso? el codigo tuyo esta enviando un varlo & #37; que significa para aquellos que no sepan %. Lo digo por si acaso
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #7 (permalink)  
Antiguo 14/09/2009, 07:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Posicionamiento fixed y centrado

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
  1. &#37;
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 14/09/2009, 08:15
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 7 años, 10 meses
Puntos: 1512
Respuesta: Posicionamiento fixed y centrado

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
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #9 (permalink)  
Antiguo 14/09/2009, 09:09
 
Fecha de Ingreso: octubre-2006
Mensajes: 199
Antigüedad: 10 años, 4 meses
Puntos: 3
Respuesta: Posicionamiento fixed y centrado

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!!

  #10 (permalink)  
Antiguo 04/06/2010, 05:04
 
Fecha de Ingreso: junio-2010
Mensajes: 8
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Posicionamiento fixed y centrado

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
  1. #columna{
  2.     position:fixed;
  3.     width: 250px;
  4.     margin-left:95px;
  5.     float:left;
  6.     background-color:#CCC;
  7.     padding:15px;
  8.     border-radius: 5px;
  9.     -webkit-border-radius: 5px;
  10.     -moz-border-radius: 5px;
  11.     box-shadow: 5px 5px 7px #888;
  12.     -moz-box-shadow: 5px 5px 7px #888;
  13.     -webkit-box-shadow: 5px 5px 7px #888;
  14.    
  15. }
  16. * html #columna {
  17.     position: absolute;
  18. top:expression(eval(document.compatMode &&
  19. document.compatMode=='CSS1Compat') ?
  20. documentElement.scrollTop
  21. +(documentElement.clientHeight-this.clientHeight)
  22. : document.body.scrollTop
  23. +(document.body.clientHeight-this.clientHeight));
  24.     left: expression("95px");
  25. }

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
  #11 (permalink)  
Antiguo 04/06/2010, 05:12
 
Fecha de Ingreso: junio-2010
Mensajes: 8
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Posicionamiento fixed y centrado

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)  
Antiguo 04/06/2010, 11:20
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 48
Respuesta: Posicionamiento fixed y centrado

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
  1. #content {
  2. position: absolute;
  3. top:0;
  4. left:0;
  5. width: 100%;
  6. height: 100%;
  7. padding-botttom: 100px;
  8. }
  9.  
  10. #contentBaner {
  11. position: absolute;
  12. bottom: 0;
  13. left:0;
  14. width: 100%;
  15. height: 100px;
  16. }
  17.  
  18. #baner {
  19. width: 800px;
  20. margin: auto;
  21. }

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
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Última edición por danneg; 04/06/2010 a las 11:29
  #13 (permalink)  
Antiguo 01/07/2011, 15:25
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 48
Respuesta: Posicionamiento fixed y centrado

Jajaja de cuando recien comenzaba XD
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #14 (permalink)  
Antiguo 23/01/2012, 13:54
 
Fecha de Ingreso: enero-2012
Mensajes: 1
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Posicionamiento fixed y centrado

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
  1. #contenedor{
  2.     margin:0 auto;
  3.     padding:0;
  4.     position:fixed;
  5.         height: 25px; /*Tamaño de tu div*/
  6.         width: 500px; /*Anchura de tu div*/
  7.     top:75px;
  8.     left:-50%;
  9.     right:-50%;
  10.     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

Última edición por Durabite; 23/01/2012 a las 13:58 Razón: Me falto codigo
  #15 (permalink)  
Antiguo 23/01/2012, 15:22
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 48
Respuesta: Posicionamiento fixed y centrado

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
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #16 (permalink)  
Antiguo 24/01/2012, 09:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Posicionamiento fixed y centrado

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?
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 17:49.