Este procedimiento ancla una imagen a una palabra. Si redimensionamos la ventana del navegador, o cambiamos la resolución de la pantalla, la imagen fluirá atada a la palabra en un punto preciso, sin alterar la distribución del texto u otros elementos circundantes. Se utiliza en el blog para señalar las actualizaciones de ciertas páginas:
El método es simple, consiste en variar adecuadamente los márgenes de la imágen. Veamos a el efecto paso a paso.
El método es simple, consiste en variar adecuadamente los márgenes de la imágen. Veamos a el efecto paso a paso.1
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
La caja verde a trazos es el contenedor general.
La caja azul contiene el texto de la palabra ANCLA y la imagen a anclar en ella.
La imagen se posiciona de forma normal a continuación de la palabra de anclaje:
ANCLA<img src="nube.png"> volutpat
La caja azul contiene el texto de la palabra ANCLA y la imagen a anclar en ella.
La imagen se posiciona de forma normal a continuación de la palabra de anclaje:
ANCLA<img src="nube.png"> volutpat
2
Suspendisse enim elit, auctor rhoncus 5tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
La nube mide 86px de alto.
Añadimos margin-top:-86px; a la imagen para dejar que sea el texto el que establezca la distancia de interlineado.
Añadimos margin-top:-86px; a la imagen para dejar que sea el texto el que establezca la distancia de interlineado.
3
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
La nube mide 90px de ancho.
Añadimos margin-left:-90px; a la imagen para desplazarla hacia la izquierda. El texto que estaba a continuación de la imagen tambien quedará desplazado el mismo número de píxeles.
He añadido transparencia adicional al fondo de la nube para que se vea la superposición sobre la palabra ANCLA.
Añadimos margin-left:-90px; a la imagen para desplazarla hacia la izquierda. El texto que estaba a continuación de la imagen tambien quedará desplazado el mismo número de píxeles.
He añadido transparencia adicional al fondo de la nube para que se vea la superposición sobre la palabra ANCLA.
3b
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
Si desplazásemos aun más la imagen hacia la izquierda, el texto sería arrastrado con ella solapándose con el texto previo.
margin-left:-110px; hace que las palabras ANCLA y volutpat también se solapen.
margin-left:-110px; hace que las palabras ANCLA y volutpat también se solapen.
3c
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
Para el caso anterior añadimos 20px (110-90) margin-right:20px; al margen derecho de la imagen para rectificar la separación con la palabra volutpat.
4
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
Si es conveniente elevamos algunos pixeles la nube definiéndolos como margen inferior margin-bottom:5px; de la imagen.
5
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac
ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
ANCLA
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
La nube ya estaría correctamente anclada en ANCLA, pero como hemos visto casi desde el inicio, ha quedado desbordada de los contenedores por su parte superior. Si además la palabra ANCLA queda situada al comienzo de línea, la nube se desbordaría también por la izquierda.
6
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac
ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
ANCLA
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
Añadimos margin-top:30px;margin-left:50px; al contenedor del texto (recuadrado en azul). Si este contenedor no dispone del espacio conveniente, en este caso arriba y a su izquierda, la imagen corre el riesgo de quedar oculta o inconvenientemente desbordada sin solución.
Anulo la transparencia adicional de la nube y quito su fondo gris para ver el efecto final.
Anulo la transparencia adicional de la nube y quito su fondo gris para ver el efecto final.
resultado
Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.
Expando el ancho del contenedor general (recuadrado a trazos verdes) al 100% para que se pueda apreciar como fluye ANCLA y su nube al redimensionar el ancho del navegador.
En resumen:
<div id="Contenedor_General"><div id="Contenedor_Texto" style="margin-top:60px;margin-left:50px;">Suspendisse enim... ...sapien ac ANCLA<img style="margin-top:-86px; margin-left:-90px; margin-bottom:5px;" src="http://lh3.googleusercontent.com/-rqRhnUajNi0/T0UDrFApOmI/AAAAAAAAGLg/HsPwDD3vK2A/s0/actualizado-18-abr-11.png" /> volutpat fringilla...</div></div>
(Tamaño de la imagen nube = 90*86px)
<div id="Contenedor_General"><div id="Contenedor_Texto" style="margin-top:60px;margin-left:50px;">Suspendisse enim... ...sapien ac ANCLA<img style="margin-top:-86px; margin-left:-90px; margin-bottom:5px;" src="http://lh3.googleusercontent.com/-rqRhnUajNi0/T0UDrFApOmI/AAAAAAAAGLg/HsPwDD3vK2A/s0/actualizado-18-abr-11.png" /> volutpat fringilla...</div></div>
(Tamaño de la imagen nube = 90*86px)
