Fijar sin usar FIXED. | Oloblogger Este pequeño trabalenguas de título, intenta ser una descripción breve de lo que vamos a hacer: fija...

3 de marzo de 2010

Fijar sin usar FIXED.

Este pequeño trabalenguas de título, intenta ser una descripción breve de lo que vamos a hacer: fijar un elemento en un lugar determinado de nuestra página, pero sin usar POSITION:FIXED.

¿Pero por qué no usar FIXED siendo tan fácil su aplicación? Pues realmente por muy poca cosa y es que ¡esta propiedad no funciona en IE6! De momento todavía queda gente que usa esta versión, así que si queremos que vean las cosas cómo las personas decentes ;) no nos queda
más remedio que suprimir de nuestro catálogo el susodicho FIXED.


El truco consiste en aplicar a toda la página, un DIV que ocupe el 100% del alto y del ancho disponible. Esta capa incluirá un OVERFLOW:AUTO para generar el scroll de todo el contenido. El DIV que contendrá el elemento que pretendemos fijar, será lo único que quede fuera del anterior.

Para no alterar mucho las propiedades de nuestro BODY y poder quitar todo esto fácilmente en el futuro, el estilo necesario lo vamos a meter antes de </head>. Podría ser que por las características de vuestra plantilla, este código produjera problemas de desplazamiento en alguna capa, especialmente si incluye la propiedad POSITION. Pero como con Vista Previa podeis ver cómo queda la cosa antes de grabar, pues eso... ¡adelante!

<style type='text/css'>
* {margin:0; padding:0;}

html, body {width:100% !important;
height:100% !important;
overflow:hidden !important;
}

#contenido {width:100%;
height:100%;
overflow: auto;
}

#fijo {position:absolute;
width:150px;
height:300px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-310px;
top:50%;
margin-top:-150px;
z-index:200;
}
</style>


Los valores de las propiedades de #FIJO pueden ser alteradas según nuestras necesidades, pero siempre incluyendo POSITION:ABSOLUTE, TOPBOTTOM), LEFTRIGHT) y los márgenes para reubicar el elemento. Z-INDEX puede hacer falta o no, dependiendo de si se usa en otras capas de la página.

Ahora ya sólo nos queda insertar después de <body> el DIV con ID FIJO y meter dentro de la capa CONTENIDO el resto de nuestro código,

<body>

<div id='fijo'>TEXTO O LO QUE QUERAMOS</div>
<div id='contenido'>

CODIGO ORIGINAL
...

</div>

</body>


Esto lo hemos aprendido en Recursos CSS.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. Anónimo3/3/10 14:59

    Hola, Oloman

    A parte del tema de arriba, mme gustaría saber tu opinión

    quiero anunciar mi blog en el cartel de las fiestas de mi pueblo y como los que lo van a ver son gente poco entendida no sé si poner delante de la dirección de mi blog el http://

    ¿Tú que opinas?

    ResponderEliminar
  2. Yo te la doy, pero dale el valor justo.

    Prueba a poner tu dirección sin HTTP en la barra de direcciones de tu navegador y tú mismo tendrás la respuesta.

    Creo que no es necesario ser un entendido para saber que algo del tipo NOMBRE.BLOGSPOT.COM, NOMBRE.ES, NOMBRE.AR, etc., es una dirección web. Normalmente con que tengas un ordenador, internet y ¡lo hayas usado alguna vez!, será suficiente para entender eso.

    Utiliza siempre lo más sencillo y corto que sea posible porque será más fácil de recordar. Igual pasa en algunos casos con las tres w.

    ¿Entendida mi opinión? ;D

    ResponderEliminar
  3. Hola:

    Primero que todo gracias por todos los posts que colocan, se que es un trabajo arduo, pero alguien tiene que hacerlo, lo sigo por google.reader, ya que se me facilita asi leer todos sus posts...

    Se que no es el medio para formular mi pregunta pero no encontre otra forma de contactarlo!!!

    Ahora si mi problema:

    Estuve actualizando mi blog con algunos de sus trucos y de otros blogs que sigo (de uno y de otro), pero al terminar de actualizarlo, decidi probar ciertas cosas en cada post mio y cual seria mi sorpresa que al hacer click en cualquier post me abre otra ventana y se me redirecciona a otra pagina en vez de mostrar el post de mi blog seleccionado y mire en sus post un articulo que me ayudara con eso, pero no lo encontre, asi que si no es mucha molestia, ya que ud. tienen una vida fuera de blogger, me podrian ayudar a resolver este problema!!!

    Este es el blog con el problema: http://portablesmiscelaneos.blogspot.com

    Se los agradecere grandemente!!!

    Un amigo y fiel seguidor de uds.!!!

    David "El Chiko de Rojo"

    ResponderEliminar
  4. Eso te pasa por usar plantillas tan cutres :D

    La causa de que TODOS los enlaces se abran en una nueva ventana la tienes en esta línea que está al principio <base target='_blank'/>

    Si la quitas, todo se abrirá en la misma ventana.

    Por otra parte he visto un par de enlaces en el menú superior que apuntan a una dirección con dominio TK. No sé si lo quieres así, pero en caso contrario, con ajustarlos a la dirección de blogspot correpondiente, ya lo tienes solucionado.

    ResponderEliminar
  5. Hola oloman! gracias por comentar. :)
    una pregunta, como creo una categoria en la sidebar como tenes vos cn el efecto plegar/ desplegar y q muestre los ultimos comentarios?

    ResponderEliminar
  6. Anónimo5/3/10 15:13

    Gracias, Oloman

    Lo haré sin el http://

    ResponderEliminar
  7. Rodry.D, eso que llamas categoría, realmente se denomina dentro de la plantilla como SECCION. Teclea eso en el buscador y te saldrán una serie de entradas que versan sobre eso. Te anticipo que requieren al menos un nivel intermedio de conocimientos.

    Anónimo, que te vaya bien... y la próxima vez habilita tu perfil para que veamos tu sitio, que esa publicidad es casi mejor que la de un cartel para "no entendidos" :D

    ResponderEliminar
  8. Anónimo9/3/10 21:21

    Ahh!

    IE6 (Internet Explored 6) es una porquería...! la maldición viviente de Microsoft, que gracias a la ignorancia, y otras tonterías de los usuarios, ya sabes "Mas vale malo conocido que bueno por conocer" entre otras cosas, ha sobrevivido después de tantos años, todavía un 20% de las personas que usan Internet lo usan, no lo puedo creer....! 2 de cada 10..!

    No lo entiendooo!

    Por que no se actualizan....!

    -Además Google dejará de dar soporte a IE6...

    lo puedes ver aquí:

    http://www.elpais.com/articulo/tecnologia/Google/deja/dar/soporte/Internet/Explorer/elpeputec/20100201elpeputec_2/Tes

    -También lo hará YouTube:

    http://www.ethek.com/youtube-deja-de-dar-soporte-a-ie6/

    -Y aquí en Excelente articulo sobre el problema con IE6:

    http://www.enriquedans.com/2009/08/el-problema-con-internet-explorer-6.html

    Hay que informarse y actualizarse y dejar de escribir cosas apoyando a este mediocre Navegador, queriendo solucionar sus deficiencias, con trucos que solo prolongan su existencia.

    Hay que enterrarlo! y sololos usuarios pueden hacerlo no usándolo.

    Hay muchas alternativas y son Gratuitas!

    Actualícense!

    ResponderEliminar
  9. Estamos casi totalmente de acuerdo, pero como todavía hay un 20% que lo usan (¡pufff! pensaba que serían menos), no creo que sobre programar también para ellos. Además según el enlace que me pasaste de Enrique Dans, parece que la mayoría de los que lo sufren, es porque no tienen otra opción.

    ResponderEliminar
  10. Hola; mira, tengo un problema con mi blog www.milodoncitychachacha.blogspot.com En la página principal no aparece la sidebar en donde debe estar sino que abajo. No es un gran probelma, pero...
    Saludos.

    ResponderEliminar
  11. Hola hugo. La cosa me parece que está en la propia estructura de la plantilla. Hay un sidebarlock que en un principio sobra y luego, todo lo demás de la barra lateral, creo que debería estar dentro de content-wrapper. Lo que ocurre es que es complicado para mí averiguar exactamente qué es lo que ocurre y decirte de manera más concreta cual es la solución. Lo siento.

    ResponderEliminar
  12. Muchísimas gracias por tu pronta respuesta. Gracias.

    ResponderEliminar
  13. Hola, está buenisimo el blog.
    te cuento mi inquietud, llegué a este post buscando como posicionar en capas dos fondos, el primero sería un patrón simple y reiterativo que usaría de fondo general, el segundo sería el encabezado del blog pero deberian estar uno sobre el otro para que al no estar como fixed luego de la imagen de fondo se mantenga corriendo el texto sobre ese patrón que elegí.
    no se si hice mucho lío, o si se entiende de todas formas muchas gracias .

    ResponderEliminar
  14. No pillo del todo la idea Sergio, pero debe ser una de estas dos:
    a) Fondo con repeat y otro fondo encima de ese ocupando una parte de LA PAGINA. Al hacer scroll el segundo desaparece.
    b) Fondo con repeat y otro fondo encima de ese ocupando una parte del NAVEGADOR. Al hacer scroll el segundo se mantiene siempre visible.

    ¿Acierto con alguna?

    ResponderEliminar
  15. Sos un genio oloman es el primer caso,
    se puede hacer eso?

    ResponderEliminar
  16. Sí. Es tal y como está montado este blog. Te anticipo que no lo sé explicar mejor. Ahí va:

    En el selector BODY del estilo es dónde tienes que poner el fondo a repetir.
    body {
    background: url(DIRECCION_PATRON);
    ETC...

    Luego creas una capa con un alto determinado (el mismo de la imagen que hayas diseñado), sin repetición y que se fija con POSITION:ABSOLUTE; En el ejemplo, le llamamos #FONDO.

    #fondo {
    background:url(DIRECCION_CABECERA_O_LO_QUE_SEA) no-repeat top center;
    position:absolute;
    width:100%;
    height:900px; /* Poner el ancho de tu imagen */
    z-index:0;
    }

    Por último, detras de <body> insertas (creas) la capa con el estilo anteriormente definido:

    <div id='fondo'/>

    Dependiendo de tu plantilla, puede que tengas que hacer algún ajuste más, pero en un principio, esa es la manera.

    Suerte.

    ResponderEliminar
  17. me habia vuelto loco buscando como usar z-index para lograrlo y todos lo explicaban desde una div y no desde el body,
    muchisimas gracias man voy a intentarlo ,...

    ResponderEliminar
  18. Normalmente hay diversas formas de conseguir lo mismo. Esta es sólo la que yo utilicé ;)

    ResponderEliminar
  19. Gracias a blogs como el tuyo podemos personalizar y dejarlos espectaculares. ¡muchas gracias! no se puede agradecer todo el tiempo y dedicación que le pones.

    Estoy de rediseño con el blog, pero...hay una parte imposible de lograr en la que seguro me podrás ayudar.

    Quiero dejar fija la cabecera y el menú de páginas que queda debajo de tal forma que al hacer scroll se vea todo el rato y los post se "metan por debajo". He implementado la primera parte de tu código y se queda toda la página fija sin poder hacer scroll.

    La otra parte en donde le dices a la plantilla que parte se mueve (eso creo entender) no consigo ponerlo. ¿me puedes ayudar? muchas gracias.

    La dirección del blog de pruebas es http://bisperolas.blogspot.com.es/

    ResponderEliminar
  20. Este sistema de la entrada es precisamente para no tener que usar fixed, pero hoy día hasta IE lo entiende, así que los más rápido sería añadir esto al CSS de tu plantilla:

    .header-outer {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -438px;
    background: white;
    z-index: 99;
    }
    .tabs-outer {
    position: fixed;
    top: 261px;
    background: white;
    z-index: 99;
    width: 900px;
    padding-bottom: 40px;
    }
    .main-outer {
    margin-top: 300px;
    }

    ResponderEliminar
  21. Muchas gracias. Justo lo que necesitaba. Ahora toca integrar en la cabecera los botones sociales para que quede más estrecha y se pueda ver el post mejor al hacer scroll.

    ResponderEliminar