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>
<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.
Y muchos más artículos interesantes si nos sigues en...
hola, es una entrada antigua asi que dudo de que te enteres de que he escrito. de todas maneras gracias por tu ayuda.
ResponderEliminarAún asi tengo una duda, como puedes definir el temaño de la imagen?
gracias
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í:
ResponderEliminar<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
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!!!
ResponderEliminarhola 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>...
ResponderEliminarmi web es http://paraninosconcabeza.blogspot.co. gracias!
ResponderEliminarLk, el código tienes que ponerlo después del <head>
ResponderEliminarhola 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/.
ResponderEliminarFí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.
aquñi de nuevo... ¿cómo se hace para subrayar o tachar la tipografía en los textos? y muchas preguntas +
ResponderEliminarSe 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.
ResponderEliminarMá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>
te he dedicado una entrada
ResponderEliminarhttp://paraninosconcabeza.blogspot.com/2009/10/oloblogger-3-premios-al-mejor-blog.html
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.
ResponderEliminargracias!
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.
ResponderEliminarYa vi tu entrada y te dejé allí un mensaje...
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)
ResponderEliminarForrito :
ResponderEliminarOloman, 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////
................................
No puedes proteger la imagen de ninguna manera. Una vez publicada, como la palabra indica, es pública.
ResponderEliminarPodrí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.
bueno de todas maneras gracias.
ResponderEliminarEn 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.
Yo creo que no esta mal. Más simple y menos recargado que este, que es algo o muy barroco.
ResponderEliminarPodrí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.
Vaya, :D si dices que no esta mal, comparandolo con el tuyo entonces eso es mucho para mi ya hahaha..
ResponderEliminarMan 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 .
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.
ResponderEliminarhttp://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.
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.
ResponderEliminarLos 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
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.
ResponderEliminartengo 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"?
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.
ResponderEliminarCon 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.
Yo quiero colocar una barra como la que se encuentra en la parte de abajo del facebook me entindes?
ResponderEliminarComo la que dice chat y muestra las aplicaciones!
Se puede hacer algo parecido?
Casi no conozco Facebook :p, pero ¿puede ser algo así?
ResponderEliminarOloman 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.
ResponderEliminar¿ 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
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.
ResponderEliminarLo ú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.
Gracias muchas gracias oloman gracias por mil.
ResponderEliminarahora 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.
Un efecto colateral beneficioso :D
ResponderEliminarhola 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
ResponderEliminarLuz, lo tienes explicado en esta entrada. Un saludo.
ResponderEliminaroloman tengo 2 preguntas:
ResponderEliminar1) 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
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.
ResponderEliminar2. 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.
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?
ResponderEliminarSí, Lara. Aquí se explica cómo funciona el artilugio y que se puede poner -casi- dónde se quiera.
ResponderEliminarPor partes...
ResponderEliminarTema bordes
Tema flecha
BUEN POST!... Una duda: ¿Como hago para que esas imagenes tengan un link?
ResponderEliminarTal 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=#
ResponderEliminarGracias Oloman, me sirvió muchoo!
ResponderEliminarhola...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
ResponderEliminarStephanni, 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.
ResponderEliminarhola 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!
ResponderEliminarCuando quieras, dejas de cambiar tu nick Lileka :D
ResponderEliminarLo 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>
Hola,
ResponderEliminarte 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!!
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.
ResponderEliminarSupongamos 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.
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?
ResponderEliminarVariedades 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.
ResponderEliminarMuchas gracias Oloman !!
ResponderEliminarmuy buena publicación, me hizo comprender un poco mas los CSS y ya comencé hacer pequeñas pruebas.
Saludos.
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?
ResponderEliminarSupongo 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.
Eliminarpues 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?
ResponderEliminarCreo que sí: enlace
Eliminarhola olomán, he intentado cambiar el maldito favicón de mi blog pero ahí queda imperturbable. http://dinerodesdetuordenador.blogspot.com.
ResponderEliminar¿a qué podemos atribuirlo? ¿me han hackeado la página, o qué?
No creo :) Cámbialo usando el gadget de Blogger y elimina el que tengas puesto manualmente en la plantilla.
EliminarBuenas, Oloman,
ResponderEliminarComo 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
Hola.
EliminarSó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.
Perdón, era esto. Cambia la primera línea:
Eliminar@media screen and (max-device-width: 500px) {
#HTML3 {display:none;}
#HTML53 {display:none;}
#HTML54 {display:none;}
}
Como puedo poner esto en la posicion de la cabecera?
ResponderEliminar¿A qué te refieres con "esto"?
EliminarMe refiero a el contenido de la entrada. Me gustaria poner lo todo lo de la entrada de manera horizontal y facil de manejar.
EliminarHola 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
ResponderEliminarMe alegro que lo hayas podido solucionar solo :)
EliminarLo 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;
...
Este comentario ha sido eliminado por el autor.
EliminarHola, se que este no es el post apropiado para preguntar esto pero como busco y no veo pues pregunto.
ResponderEliminarMe 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
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 ;)
EliminarGracias :D
ResponderEliminarTengo 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?
ResponderEliminarTendrí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.
EliminarLa pagina es http://chuecachess.tumblr.com/
EliminarY 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($){
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.
EliminarSaca 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>
Mil gracias. Tenías razón. Ese era el fallo.
ResponderEliminarYa 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!
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;
EliminarLo 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é.
ResponderEliminarSi es esta imagen, este sería el código:
Eliminar<img src="http://img16.imageshack.us/img16/1667/4o75.jpg" align="right" style="margin-bottom: 40px;"/>
Mil gracias :)
Eliminar