Position: Imágenes fijas... o desubicadas I | Oloblogger ¿QUIERES SUBIR? PINCHA AQUI En ocasiones necesitamos colocar una imagen u otro elemento en un sitio ...

28 de marzo de 2009

Position: Imágenes fijas... o desubicadas I

En ocasiones necesitamos colocar una imagen u otro elemento en un sitio fijo de nuestro blog, independientemente del flujo que el HTML genera en el resto del contenido. Lo de sitio fijo es muy relativo, porque como vamos a ver, las cosas pueden fijarse con respecto al todo (ventana navegador) o en una posición relativa a un contenedor concreto.

La primera opción es la más fácil. Se trata de colocar algo en una determinada posición del navegador. Insisto en la palabra navegador y evito usar web, porque es así como funciona este sistema. Lo que ubiquemos de esta manera se situará en relación a los bordes de la ventana que utilicemos. Por tanto, cuando usemos ventanas más grandes o más pequeñas, el contenido de la web es posible que se desplace, pero no así el elemento fijado.

Veamos un ejemplo:

<img src="URL_IMAGEN" style="position: fixed; bottom: 20px; right: 20px;" />

Este código se puede colocar en cualquier parte dentro del HTML. Es decir, en cualquier ubicación entre <body> y </body>. No vayamos a fastidiar metiéndolo en mitad de un <li>, <frame... o algo similar. Quiero decir en cualquier sitio razonable.

Con ese código, la imagen se verá abajo a 20px del borde inferior y a otros tantos del borde derecho.


Si cambiamos la resolución de nuestra pantalla o simplemente agrandamos o encogemos nuestra ventana, los elementos normales se desplazarán para mantener la alineación marcada desde la hoja de estilo, pero la imagen seguirá a 20px de la parte inferior y 20px de la derecha. Esto ocurre también cuando nos desplazamos verticalmente con la barra de desplazamiento.





La palabra clave es FIXED, en combinación con el atributo POSITION. Posteriormente necesitamos indicar la posición exacta mediante los atributos TOP/BOTTOM (arriba/ debajo) y LEFT/RIGHT (izquierda/derecha). Estos atributos admiten como parámetros tanto una cantidad en pixels como un porcentaje. Con porcentajes sí que la imagen "fijada" se desplazará cuando usemos la barra de idem, buscando precisamente la altura/anchura indicada.

Esta es la clase de código que se ha usado para la pantera que teneis corriendo por la izquierda. Se ha fijado con un TOP:50%;LEFT:50PX; . Si haceis scroll por esta pantalla, la pantera no se moverá. Si cambiais el tamaño de la ventana, también seguirá a la misma distancia del lado izquierdo. Sin embargo, si el cambio de tamaño (o resolución) afecta a la altura total de la ventana, la imagen "buscará" la altura media de la ventana, por el efecto del 50% indicado.

Todo lo que hemos contado hasta ahora para las imágenes, sirve exactamente igual para cualquier otro elemento o combinación de elementos: un enlace, un cuadro de texto, una tabla, imagen con enlace...

/* BOTON IR ARRIBA DE ESTA PAGINA */
<div style="position:fixed; bottom:10px; right:10px; color:#ffffff; padding:5px; background:#990000; border:groove 4px #990000; text-align:center; font-size:10px;" ><a href="#" style="color:#ffffff; text-decoration:none;">¿QUIERES SUBIR?<br/>PINCHA AQUI</a></div>

Otros de los valores de POSITION que también nos pueden ser de utilidad, son RELATIVE y ABSOLUTE, que nos permiten colocar un elemento en cualquier punto de un contenedor, pero de manera independiente al resto de lo escrito o "dibujado". Es decir, para que no siga el orden en que está redactado. Pero como estos ya dan para otro post, nos vemos en Position: Imágenes fijas... o desubicadas II.

Nota: Al estar los códigos de la pantera y del botón insertados en el propio post para no interferir en todo el blog, puede que con IE no se ubiquen bien las respectivas imágenes. Insertando el código de la manera que se explica directamente en la plantilla, no existiría este problema... y usando Firefox, seguro que tampoco :)

¿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

77 comentarios :

  1. hola, es una entrada antigua asi que dudo de que te enteres de que he escrito. de todas maneras gracias por tu ayuda.
    Aún asi tengo una duda, como puedes definir el temaño de la imagen?

    gracias

    ResponderEliminar
  2. Miguel y Nené, no sé en qué ámbito preguntais lo del tamaño. En general al construir la imagen ya le das el tamaño que necesitas. Si luego quieres mostrarla más pequeña (también más grande, pero no es recomendable porque pierde calidad) simplemente introduces una etiqueta STYLE con el atributo WIDTH, tal que así:

    <img style="width:100px;" src="URL_imagen"/>

    Esta anterior, cambia el ancho a 100 pixels, haciendo el alto proporcional a la imagen original.

    Si tienes Blogger, te recomiendo eches también un vistazo a estos posts:
    http://oloblogger.blogspot.com/2007/12/atributos-en-imgenes-bpt.html
    http://oloblogger.blogspot.com/2008/09/alojamiento-de-imagenes-en-blogger.html

    ResponderEliminar
  3. hola olomán, genial para BPTs como yo... ¿dónde pongo en la plantilla el código para elemento fijo? aisss. no sé si es demasiado estúpido preguntar!!!

    ResponderEliminar
  4. hola olobloger, acabo de introducir un emoticon con éxito, pero ´ste aparece arriba de la barra de blogger no importa las medidas de posición que ponga... ¿a qué puede deberse? lo he puesto justo encima de >/body>...

    ResponderEliminar
  5. mi web es http://paraninosconcabeza.blogspot.co. gracias!

    ResponderEliminar
  6. Lk, el código tienes que ponerlo después del <head>

    ResponderEliminar
  7. hola olobloger, además de saber cómo has hecho tu página, esos elementos fijos que son enrealidad links, te env´ío esta otra página que tiene artilugios parecidos. yo no sé leer plantillas, así que no tengo ni ieda de cómo crear esos elementos. La página es http://weedsandwildflowersdesign.com/shoppe/.
    Fíjate en los artilugios para poner los títulos, pegatinas por todos lados, avisos en cualquier lado... me encantaría poder hacer una página así o como la tuya.

    ResponderEliminar
  8. aquñi de nuevo... ¿cómo se hace para subrayar o tachar la tipografía en los textos? y muchas preguntas +

    ResponderEliminar
  9. Se trata de capas (#) de un tamaño determinado (width y height) con un fondo para la vista normal y con otro fondo para el HOVER. El texto del enlace lleva un text-indent negativo y grande para que no se vea. Ssí queda sólo la imagen. Todo esto requiere además de posicionar como se explica en esta entrada y sucesivas.

    Más sencillo sería colocarlo en la parte HTML, porque bastaría con colocar una imagen con RELATIVE y un enlace, aunque no tendría el efecto HOVER. En el caso de la pantera de la izquierda, por ejemplo, no hubiera costado ningún trabajo añadirle un enlace.

    Otro sistema en concreto para la cabecera, con resultado parecido a la web del enlace, se podría conseguir con USEMAP (Ver post)

    Para tachar tipografía se utiliza <strike>TEXTO A TACHAR</strike>

    Para subrayar <u>TEXTO A TACHAR</u>

    ResponderEliminar
  10. te he dedicado una entrada

    http://paraninosconcabeza.blogspot.com/2009/10/oloblogger-3-premios-al-mejor-blog.html

    ResponderEliminar
  11. hola oloman, tengo un pequeño problemita, y es que desde que puse imágenes desubicadas en el blog, una de mis sidebars (la primera a la derecha) y las imágenes descolodas tardan mucho en cargar. antes no tenía ese problema. ¿a qué puede deberse? http://paraninosconcabeza.blogspot.com.
    gracias!

    ResponderEliminar
  12. Lk: En un principio no tiene por qué demorar la carga de la página. Lo único que se me ocurre es que tienes las imágenes alojadas en Imageshack y estas a veces tardan en recuperarse. Va por días. Puedes probar alojándolas en Blogger (o en Picasa que es prácticamente lo mismo) y sustituyendo las direcciones a ver que tal.

    Ya vi tu entrada y te dejé allí un mensaje...

    ResponderEliminar
  13. sí, puede ser que sea imageshack, que me tiene hasta las narices... probaré con blogger o picassa a ver qué tal. gracias! (y gracias x visitar para niños con cabeza!! es que sin gem@... yo no hubiera podido ni poner la mesa, jaja)

    ResponderEliminar
  14. Forrito :

    Oloman, hola, podrias ayudarme ? u.u

    como protejo la imagen para que no la copien usando a la vez el posicionamiento de una imagen fija.

    estoy utilizando el primer html de arriba:

    /////Veamos un ejemplo////
    ................................

    ResponderEliminar
  15. No puedes proteger la imagen de ninguna manera. Una vez publicada, como la palabra indica, es pública.

    Podrías anular el botón derecho, podrías poner algún script para las imágenes... pero al final, una simple captura de pantalla permitiría copiar cualquier imagen.

    Por otra parte, hay navegadores como Firefox que te permiten ver el código fuente aunque tu no lo desees. De ahí se puede sacar la dirección de la imagen y con la direccíon, tendrías también la imagen.

    ResponderEliminar
  16. bueno de todas maneras gracias.

    En verdad gracias, porque aparte de esa duda que tuve, tu blog me a ayudado mucho.

    Seria fabuloso si me dieras una opinion sobre mi blog talvez no es muy interesante pero trate de adornarlo casi casi como el tuyo y no me fue muy bien que digamos.

    http://www.elblogdebrian.tk/

    Saludos.

    ResponderEliminar
  17. Yo creo que no esta mal. Más simple y menos recargado que este, que es algo o muy barroco.

    Podrías probar a cambiar el estilo de los títulos de los posts (h3) y de los gadgets de la barra lateral (h2). En un principio haciéndolos de mayor tamaño y/o todo mayúsculas. También puedes ponerles una imagen de fondo fácilmente.

    ResponderEliminar
  18. Vaya, :D si dices que no esta mal, comparandolo con el tuyo entonces eso es mucho para mi ya hahaha..
    Man gracias

    tratare de asimilar los consejos que me diste no entiendo muy bien pero tratare de aplicarlo a mi blog.

    pero dejando las gracias que por cierto son sinceras tenia que hacerte esta pregunta tonta y un poco obvia ya que me espero la respuesta pero tenia que intentarlo..

    Ahi va !

    ¿La plantilla de tu blog tuneado esta en venta?

    :P (ojala que zi y que sea Free)

    Exitoos .

    ResponderEliminar
  19. oloman ayudame u.u mi imagen fija en IE. aparece en la parte inferior de la plantilla en cambio con google chrome se visualiza normal.

    http://www.elblogdebrian.tk/

    - ¿ existe alguna forma de lograr que mi blog cargue mas rapido ?

    - en IE se ve diferente y tengo que utilizar la barra para desilarme hacia la derecha de mi blog peor en Chrome se ve completo (mucho mejor) como logro que se visualize igual que chrome pero en IE.

    ResponderEliminar
  20. AngelBoy, la plantilla no está en venta, pero a partir de la Notepad Chaos que es pública, puedes sacar algo parecido y personalizado según tu gusto.

    Los problemas con IE son comunes, sin embargo yo lo he visto con IE8 y se ve bien la garra. No sé cual es el problema.

    Con respecto a la carga, la única forma es que se tengan que cargar menos cosas: menos imágenes, menos scripts, menos hoja de estilo, menos artilugios. Esto último es lo que más suele demorar.

    Sobre la última cuestión y sin poder verlo, quizás haciendo todo algo más estrecho, se podría solucionar el problema.

    Saludos

    ResponderEliminar
  21. hola olomán, tengo un problema y es que no consigo nunca usar tu buscador. pone siempre "cargando", por eso pongo mis mensajes en cualquier lado, lo que seguramente molesta. no solo a ti. a mí y a los demás visitantes.

    tengo un problema con mi page rank de http://paraninosconcabeza.blogspot.com, y quería saber si sabes si tiene solución. en un momento dado puse publicidad no de adsense, no contextual, y me han penalizado. ahora el PR es cero. ya quité ea publicidad, pero quería saber si hay alguna manera de que google "me perdone" de una vez. o si no hay remedio... ¿hay alguna cosa que YO pueda hacer para que revisiten mi página y vean que ya no hay nada que "moleste"?

    ResponderEliminar
  22. El buscador funciona intermitentemente bien (o intermitentemente mal), pero desde la página de Inicio funciona bien siempre. Puedes probar desde allí cuando tengas problemas.

    Con respecto a lo del PR, Adsense y Google, no tengo ni idea de los motivos por los cuales te han podido penalizar, pero en algún sitio leí que puedes pedir una revisión. Otra cosa es lo que tarden en hacerte caso.

    ResponderEliminar
  23. Yo quiero colocar una barra como la que se encuentra en la parte de abajo del facebook me entindes?

    Como la que dice chat y muestra las aplicaciones!

    Se puede hacer algo parecido?

    ResponderEliminar
  24. Casi no conozco Facebook :p, pero ¿puede ser algo así?

    ResponderEliminar
  25. Oloman me funciona todo bien pero cuando visualizo mi blog en IE6 las 2 imagenes flotantes que puse se descuadra y se van para arriba y mi plantilla se baja quedando las 2 imagenes flotantes arriba.

    ¿ hay alguna manera para que en IE6 desaparescan las imagenes fijas y en Chrome se si se vean ?

    ¿como hago para que los que vean mi blog desde IE6 puedan ver directamente la plantilla encajada al explorardor? porque parece que tengo dos fondos que vinieron en la plantilla una es la imagen y otro que esta atraz de la imagen un color entero.. el problema esque en IE6 ese color entero se nota mas que tienen que mover un poco a la derecha o bajar un poco con el scrool para que se vea bien..

    te dejo imagenes porfavor ayudame.


    ----------------------------
    malogrado
    i180.photobucket.com/albums/x16/brian-tk/2.jpg

    ---------------------
    correcto
    i180.photobucket.com/albums/x16/brian-tk/1.jpg


    ____________________________

    Espero me entiendas saludos .. atte Brian

    ResponderEliminar
  26. Desinstalé IE6 y luego no he podido volverlo a instalar, así que no puedo comprobar el funcionamiento en ese navegador. Afortunadamente, cada vez hay menos gente que lo usa, porque siempre ha dado muchos problemas de interpretación.

    Lo único que se me ocurre es que pongas el código de esas dos imágenes fijas, justo antes del cierre del BODY. Eso debería llevarlas abajo (no arriba) cuando alguien vea tu blog con IE6. Así por lo menos no estorban ;)

    Otra cosa. IE6 no soporta transparencias en formatos PNG y por eso se ven las imágenes con un fondo de color. Utiliza mejor GIF para evitar eso.

    ResponderEliminar
  27. Gracias muchas gracias oloman gracias por mil.

    ahora esas imagenes aparecen en la parte inferior y estoy cambiando de formato a algunas de mis imagenes y mejor aun porque gif hara que mis imagenes pesen menos.

    ResponderEliminar
  28. Un efecto colateral beneficioso :D

    ResponderEliminar
  29. hola de nuevo, tengo una preguntita en el blog luzcocina.blogspot.com, en las imagenes que tengo al final para mostrar las entradas mas recientes y mas antiguas, me gustaría que las dos imagenes me aparezcan pegadas a la casa y la de las entradas mas antiguas me sale hacia el margen del blog, me puedes decir como solucionarlo, mil gracias

    ResponderEliminar
  30. Luz, lo tienes explicado en esta entrada. Un saludo.

    ResponderEliminar
  31. oloman tengo 2 preguntas:
    1) tienes el html de un cuadro flotante que aparece aqui: http://myestilodeyo.blogspot.com/
    y la otra:
    2) es posible agregar un gadget debajo de cada entrada?
    espero tu respuesta, ojala que ella sea si a las 2 :D

    ResponderEliminar
  32. 1. Yo no veo ningún cuadro flotante (salvo la publicidad), pero con el sistema de la flecha no veo por qué no puedes hacer uno.
    2. Para poner un gadget debajo de cada entrada, tendrías que copiar el código directamente en la plantilla. El sitio dónde copiarlo puedes verlo en esta entrada.

    ResponderEliminar
  33. hola olomán, y perdón otra vez por no saber dónde meter la pregunta: ¿hay alguna forma de el cartel "entradas anteriores" etc. se puede poner además al principio de la página y no solo debajo de las entradas?

    ResponderEliminar
  34. Sí, Lara. Aquí se explica cómo funciona el artilugio y que se puede poner -casi- dónde se quiera.

    ResponderEliminar
  35. Hola muchas gracias por la ayuda de la otra vez .Ahora de nuvo pidiendo tus consejos porfavor ,para que me ayudara,mira en mi blog de anime puse unas imagenes en mi nueva entrada de digimon ,pero no se porque les sale como un bordito blanco y pues la verdad para mi siento que no se ven muy bien, no se, si me puedas ayudar a quitarles ese borde como blanco que tienen. pues no se que si es el blog en la entrada o fireworks ya que es ahi donde las edito pero espero que me puedas ayudar .Porfavor .Gracias.

    P.D:Ya esta tu banner en mi blog

    ResponderEliminar
  36. Ola oloman molestandote con otra duda aparte de la que te escribi, si te da tiempo espero que puedas chekar mi blog puse mi imagen de superman con la flecha y ke bueno ke le salio entrnasparente aunque no se porque jjeee. Bueno pero quiero que tengo como eso ke tienes en tu web ke pueda subir porque no entendi ese atributo espero que me ´puedas ayudar ahh y en lo del tamaño de la imagen para hacerla mas chica.
    Gracias.

    ResponderEliminar
  37. Hola que tal espero ke me ayudes en mi tema anterior y en el otro .Mira puse mi imagen y kedo muy bien pero ahora me gustaria ponerle el atributo para que suba como en tu imagen ,eske por mas ke busque no encontre los atributos y para poder hacer la imagen mas chica.

    Gracias .

    ResponderEliminar
  38. BUEN POST!... Una duda: ¿Como hago para que esas imagenes tengan un link?

    ResponderEliminar
  39. Tal y como puedes ver en el último código de ejemplo. En lugar de usar #, que es como un enlace al principio de la página, usa una dirección en A HREF=#

    ResponderEliminar
  40. Gracias Oloman, me sirvió muchoo!

    ResponderEliminar
  41. hola...yo ya tengo una cuenta en google y coloque una imagen de fondo para google.... pero cada vez que salgo o cierro la pestalla y la abro de nuevo ya no está y en la parte izquierda posterior me sale que debo hacer clik para poder ver la imagen y yo la quiero dejar fija y no se como hacer

    ResponderEliminar
  42. Stephanni, supongo que te refieres a personalizar la página de Google, no un blog. Si es lo primero, no sabría decirte. Nunca he cambiado eso.

    ResponderEliminar
  43. hola olomán, resulta que estoy intentando desplegar el menú DIRECTORIOS en http://paraninosconcabeza.blogspot.com, que hasta ahora me funcionó bien, y no se me despliega. ¿tienes idea a qué puede deberse? Gracias!

    ResponderEliminar
  44. Cuando quieras, dejas de cambiar tu nick Lileka :D

    Lo normal es que no funcione porque hayas tocado algo referente a scriptaculous, pero antes de reinstalarlo, prueba a cambiar estas dos D mayúsculas por minúsculas. Eso a veces da problemas:

    [...]onclick='Effect.toggle("Directorios","slide"); return false'>
    <h2 class='title'>Directorios▼</h2>

    ResponderEliminar
  45. Hola,

    te explico que estoy haciendo una paginilla de prueba (luanferaspruebas.blogspot.com)tratando de imitar la cabecera de una web (insvet.trinfo.eu).

    El principal problema es que el gadget páginas se me va a la izquierda de la pantalla con IE. (he usado tus trucos para quitar navbar y cabecera, aunque no se si eso tiene algo que ver).
    Y ya que estamos, ¿existe alguna manera de eliminar el espacio entre el gadget páginas y el gadget inmediatamente inferior (en este caso una imagen) para que se parezca a la web a imitar?
    Y por último. He usado el mismo código hexadecimal para el fondo de las pestañas (otra vez imitando!) pero parece que este color está sujeto a algún atributo de transparencia porque el resultado queda mucho más clarito. ¿se puede hacer algo?
    Muchísimas gracias por tu ayuda, como siempre!!

    ResponderEliminar
  46. Luanferas, no sé a qué te refieres con lo de "el gadget páginas", pero la mejor manera de centrar es incluyendo en la clase que controla ese gadget o directamente con una etiqueta STYLE en la parte HTML, un ancho (WIDTH) y un margen automático.

    Supongamos que "el gadget" es algo así:

    <div class="paginas">
    CODIGO
    </div>

    Entonces podríamos modificar eso así:

    <div class="paginas" style="width:300px;margin:0px auto;">
    CODIGO
    </div>

    ...o bien ir a la parte CSS e insertar:

    .paginas {width:300px;margin:0px auto;}

    Para lo otro que preguntas, me pasa lo mismo: no sé a qué te refieres exactamente. Me vendría bien una página concreta dónde pasara eso y/o una captura con anotaciones para saber cual es el problema o qué quieres.

    ResponderEliminar
  47. BUENAS AMIGO MUY BUENO TU BLOG, UNA PREGUNTA YO LO QUE QUIERO HACVER EN MI BLOG ES COLOCAR IMAGENES DE 4 EN 4 O DE 5 EN 5 ES DECIR 5 IMAGANES CON SU LEYENDA LUEGO DEBAJO 5 MAS Y ASI SUCESIVAMENTE PERO NO LOGRO HACERLO PORQUE SE DESCUADRA TODO ABRA ALGUNA PROPIEDAD QUE ME DEJE COLOCARLAS ASI O CON LAS QUE MENCIONAS SE PUEDE? me podrias ayuar?

    ResponderEliminar
  48. Variedades Palencia, supongo que esas imágenes las quieres poner en una entrada. Si es así, sólo tienes que incluirlas desde el editor de entradas, desde la pestaña Redactar, incorporarles a todas la Leyenda y al mismo tiempo, alinearlas a la izquierda. Te quedarán una al lado de la otra hasta ocupar todo el ancho disponible.

    ResponderEliminar
  49. Muchas gracias Oloman !!

    muy buena publicación, me hizo comprender un poco mas los CSS y ya comencé hacer pequeñas pruebas.

    Saludos.

    ResponderEliminar
  50. hola olomán, resulta que en mi blog http://dinerodesdetuordenador.blogspot.com me aparece uno de esos simbolitos (no me acuerdo el nombre) en el navegador junto a la URL que NO PUSE YO. ¿puede querer decir que alguien ha tenido acceso a mi blog y ha puesto el loguito?

    ResponderEliminar
    Respuestas
    1. Supongo que te refieres al favicono ;) Yo sólo observo uno que es el que pone por defecto mi navegador, una bola del mundo. Según el navegador aparece uno distinto o incluso ninguno.

      Eliminar
  51. pues an mi navegador no aparece la bola del mundo sino un cuadratín que no sé ni lo que es. ¿crees que puedo eliminarlo y poner otro?

    ResponderEliminar
  52. hola olomán, he intentado cambiar el maldito favicón de mi blog pero ahí queda imperturbable. http://dinerodesdetuordenador.blogspot.com.

    ¿a qué podemos atribuirlo? ¿me han hackeado la página, o qué?

    ResponderEliminar
    Respuestas
    1. No creo :) Cámbialo usando el gadget de Blogger y elimina el que tengas puesto manualmente en la plantilla.

      Eliminar
  53. Buenas, Oloman,
    Como te sigo y aplico muchos de los trucos que abordas, vengo a esta entrada porque me ha surgido un pequeño dilema, al incluir en mi blog "Curiosón" etiquetas flotantes. Como estoy llegando a las 1500 entradas, ya entiendes que necesitas recordar asuntos que de otro modo se van perdiendo o pueden ser interesantes para quienes van llegando por primera vez a nuestro sitio.
    Todo va bien, me gustaba, yo en mi ordenador portátil no veo problemas, comento sin problemas y me guarda las distancias, pero oarece que algunos de mis seguidores no pueden ver por completo los post porque las imágenes flotantes se les echan encima. Me imagino que se trata de ordenadores antiguos, con pantalla pequeña donde lo único que se ve es con suerte es la entrada y la sidebar si los tamaños elegidos entran dentro de unos baremos.
    Y entonces, me imagino si esos mismos entran en tu blog les pasará lo mismo, ¿o no?
    En fin, lo que quería era cerciorarme de que están bien puestos, o si no lo están si hay otro modo de insertarlos de manera que éstos desaparezcan cuando la pantalla es más pequeña.
    A ver si puedes decirme algo.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola.

      Sólo se me ocurre que las ocultes cuando la pantalla sea tan estrecha que estorben.

      Prueba esto antes del cierre del SKIN

      @media all and (min-width:500px) {
      #HTML3 {display:none;}
      #HTML53 {display:none;}
      #HTML54 {display:none;}
      }

      Bien, pues si te funciona ahora sólo tienes que establecer ese 500px en la medida que estimes conveniente (prueba cerrando la ventana de tu navegador poco a poco y calcula) y luego añades el resto de botones-mini-banners de la misma manera que esos tres que te puse, según su ID.

      Eliminar
    2. Perdón, era esto. Cambia la primera línea:

      @media screen and (max-device-width: 500px) {
      #HTML3 {display:none;}
      #HTML53 {display:none;}
      #HTML54 {display:none;}
      }

      Eliminar
  54. Como puedo poner esto en la posicion de la cabecera?

    ResponderEliminar
    Respuestas
    1. ¿A qué te refieres con "esto"?

      Eliminar
    2. Me refiero a el contenido de la entrada. Me gustaria poner lo todo lo de la entrada de manera horizontal y facil de manejar.

      Eliminar
  55. Hola de nuevo Oloman, tengo una duda, he cambiado la cabecera y e puesto esto. Pero, cuando subes y bajas, los botones como los de compartir de abajo de cada entrada, se ponen por encima. Mi duda es, ¿es por el CSS u otro problema? Espero tu respuesta en las dos cosas =p

    ResponderEliminar
    Respuestas
    1. Me alegro que lo hayas podido solucionar solo :)

      Lo de los botones son iframes y por eso se solapan por encima. Para solucionarlo prueba a añadir un z-index en esta clase. Así:
      #cabecerainmovil {
      z-index: 100;
      position: fixed;
      background: #4A5A66;
      ...

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  56. Hola, se que este no es el post apropiado para preguntar esto pero como busco y no veo pues pregunto.
    Me gustaría poner una barra de busqueda justo al lado del titulo y no se como. El blog en el que lo quiero poner es thebobshadow.blogspot.com

    ResponderEliminar
    Respuestas
    1. Prueba poniendo la palabra "buscador" en mi idem para encontrar cómo hacer lo de la barra de búsqueda que estás buscando. Creo que sale como segundo resultado ;)

      Eliminar
  57. Tengo un problema. He puesto varios "div style="position: absolute; top: 20px; left: 20px;div align="left"> " para situar imagenes. El problema es que hay 2 enlaces que no me los lee como enlaces, solo como texto. Si quito estos divs me los lee pero estos divs van detras y no tiene nada que ver con los enlaces. ¿Que falla?

    ResponderEliminar
    Respuestas
    1. Tendría que ver el código completo para ver cómo están estructuradas esas cajas. Pásame el link dónde las tienes y especifica cuáles son los enlaces que te fallan.

      Eliminar
    2. La pagina es http://chuecachess.tumblr.com/
      Y los códigos los he puesto de manera muy rudimentaria la verdad... pero no se por qué se me cancelan los enlaces pero si quito el primer div o los dos ultimos si que funcionan.

      Ya me dirás que puede fallar.

      (Pongo asteriscos que sino me da error)

      *div style="position: absolute; top: 250px; left: 20px;*div align="left">

      *iframe class="btn" border="0" allowtransparency="true" src="http://platform.tumblr.com/v1/follow_button.html?button_type=1&tumblelog=chessarq&color_scheme=light" frameborder="0" height="25" scrolling="no" width="150">*/iframe>

      *br>*br>
      *a href="http://chessarq.com/" >Ir a la página principal*/a>

      */div>*/div>

      *div style="position: absolute; top: 20px; left: 20px;
      >*div align="left">
      *IMG SRC=http://img16.imageshack.us/img16/1667/4o75.jpg align="right"
      */div>



      *div style="position: absolute; top: 20px; left: 850px;>*div align="left">
      FM Alberto Chueca*br>
      *br>
      Soy de Zaragoza*br>
      y tengo 21 años.*br>
      *br>
      OFREZCO CLASES *br>
      DE AJEDREZ POR ICC *br>
      *br>
      Mi nick es
      chessarq *br>
      Puedes contactar*br>
      conmigo a través de *br>
      ICC o por correo a *br>
      +++@+++mail.com*br>
      *br>
      Clases enfocadas a *br>
      los fallos concretos*br>
      de cada jugador y *br>
      enfocar sus estudios*br>
      individualizados. *br>
      *br>
      Mejora rápidamente y *br>
      no pierdas más tiempo.*br>
      "*div>

      {block:IfEndlessScrolling}
      {block:IndexPage}
      *script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">*/script>
      *script type="text/javascript" src="http://static.tumblr.com/thpaaos/sZQkv2j7g/infinitescroll.js">*/script>
      *script type="text/javascript">
      var jQis = jQuery.noConflict();
      jQis(function($){

      Eliminar
    3. La respuesta es que los dos elementos (iframe y enlace) los estas posicionando en el mismo sitio al ponerlos dentro del mismo div y al solaparse sólo verás uno de ellos, posiblemente el iframe.

      Saca los enlaces del div y los verás. Luego los metes dentro de su propio div con las propiedades que necesites para posicionarlo.

      Por ejemplo, con el primer enlace sería algo así:
      ...
      *br>*br>

      */div>*/div>

      *div style="position: absolute; top: LOQUESEApx; left: LOQUESEApx;>*div align="left">
      *a href="http://chessarq.com/" >Ir a la página principal*/a>
      */div>*/div>

      *div style="position: absolute; top: 20px; left: 20px;
      >*div align="left">
      *IMG SRC=http://img16.imageshack.us/img16/1667/4o75.jpg align="right"
      */div>

      Eliminar
  58. Mil gracias. Tenías razón. Ese era el fallo.

    Ya sólo me queda poner la guinda. ¿Como hago que esa imagen deje espacio entre los psots que van justamente debajo (en la linea siguiente)?

    grande Oloblogger!

    ResponderEliminar
    Respuestas
    1. Pues de la misma manera que metes "inline" un position:absolute, el top, el left, etc. Añade a la etiqueta STYLE un margin-bottom: 10px;

      Eliminar
  59. Lo intenté siguiendo tu tutorial y ahora otra vez con lo que me has dicho pero me deja en todas las direcciones (izquierda, arriba y derecha), un margin normal pero no hacia abajo y no se por qué.

    ResponderEliminar
    Respuestas
    1. Si es esta imagen, este sería el código:
      <img src="http://img16.imageshack.us/img16/1667/4o75.jpg" align="right" style="margin-bottom: 40px;"/>

      Eliminar