¿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>
* {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, TOP (ó BOTTOM), LEFT (ó RIGHT) 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>
<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.
Y muchos más artículos interesantes si nos sigues en...
Hola, Oloman
ResponderEliminarA 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?
Yo te la doy, pero dale el valor justo.
ResponderEliminarPrueba 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
Hola:
ResponderEliminarPrimero 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"
Eso te pasa por usar plantillas tan cutres :D
ResponderEliminarLa 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.
Hola oloman! gracias por comentar. :)
ResponderEliminaruna pregunta, como creo una categoria en la sidebar como tenes vos cn el efecto plegar/ desplegar y q muestre los ultimos comentarios?
Gracias, Oloman
ResponderEliminarLo haré sin el http://
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.
ResponderEliminarAnó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
Ahh!
ResponderEliminarIE6 (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!
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.
ResponderEliminarHola; 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...
ResponderEliminarSaludos.
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.
ResponderEliminarMuchísimas gracias por tu pronta respuesta. Gracias.
ResponderEliminarHola, está buenisimo el blog.
ResponderEliminarte 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 .
No pillo del todo la idea Sergio, pero debe ser una de estas dos:
ResponderEliminara) 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?
Sos un genio oloman es el primer caso,
ResponderEliminarse puede hacer eso?
Sí. Es tal y como está montado este blog. Te anticipo que no lo sé explicar mejor. Ahí va:
ResponderEliminarEn 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.
me habia vuelto loco buscando como usar z-index para lograrlo y todos lo explicaban desde una div y no desde el body,
ResponderEliminarmuchisimas gracias man voy a intentarlo ,...
Normalmente hay diversas formas de conseguir lo mismo. Esta es sólo la que yo utilicé ;)
ResponderEliminarGracias 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.
ResponderEliminarEstoy 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/
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:
ResponderEliminar.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;
}
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.
ResponderEliminarHola, ¡gracias por toda la información que das!
ResponderEliminarSiendo esta entrada de 2010 voy a intentar usarlo porque en Safari 9 tampoco va bien "position: fixed;" y ando buscando arreglos, ya que una "probadora" de mi blog no sabe/quiere actualizar su Safari a pesar de que está arreglado https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html y lo he comprobado en un Safari 10.
¡Gracias! aunque todavía no he probado tu solución :)
... ya no tengo amigas con IE6: o las he convencido de cambiarse de navegador o hemos dejado de ser amigas por no querer cambiarse de navegador :-D
ResponderEliminarLo de Safari 9 es más difícil porque gente con IOS suele no querer tocar configuraciones ni nada, sólo como viene el I-chisme de fábrica y a veces no actualizan. De todas formas, no me gusta cómo me queda el fijo-sin-fixed porque ya veo que se ubica desde el centro y luego hacia arriba e izquierda, pero se descuadra con distintas alturas de ventana (eso con fixed estaba clavau)... Mi idea era dejar fijo el contenido de un sidebar a la izquierda (tiene el logo y un menú) pero además, al querer añadir gadgets ya se me complica porque hay que hacerse a mano todo, y yo sólo llego al CSS, pero poco más ;-(
EliminarSí, la verdad es que este sistema es sólo un apaño para casos extremos. Casos que afortunadamente cada vez son menos frecuentes por la actualización de los navegadores.
EliminarSaludos BBW