class="item subpage ltr preset3 menu-blog responsive bg hfeed clearfix">
Bienvenidos a 17estudioweb
Teléfono de contacto: 674 73 50 32      

Mi texto sale pegado a las imagenes cuando creo un artículo. Como separarlo.

14 Junio 2015 Escrito por 
Publicado en Blog

En muchas ocasiones nos sucede que cuando creamos un artículo que contiene texto alineado con una imagen, este se superpone o queda pegado a la misma como se muestra a continuación:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 

Dicho efecto no suele ser el deseado y ocurre en bastantes ocasiones. Os voy a mostrar como separar el texto de dicha imagen.

Buscad en vuestras herramientas del editor de artículos un botón como este o parecido a este que cuando paseis el ratón por encima del mismo aparezca el texto "insert/edit image" o traducido "insertar/editar imagen":

Lo que vamos a hacer es insertar primero la imagen. Veremos que nuestro texto como ocurre en el ejemplo anterior queda pegado a la misma.

Con la imagen seleccionada haremos click en este botón o el parecido (según el editor que tengamos en nuestro gestor de artículos) y se nos abrirá una ventana emergente como la que os muestro debajo de la del botón.

 

 

Como veis hay una pestaña "General" donde podemos ver el nombre de la imagen, la descripción de la misma y sus dimensiones. Para el caso que nos ocupa vamos a usar la siguiente pestaña "Advanced" o "Avanzado". Cuando hacemos click sobre ella se nos van a desplegar otras opciones que son espacio vertical, espacio horizontal y borde.

También vereis una caja "Style" o "Estilo" donde ya puede aparecer la propiedad de alineación con el texto que hayamos seleccionado al insertar la imagen. En este caso aparece "Float: left;" que significa que la imagen va a "flotar" hacia la izquierda o dicho de una forma más sencilla, que va a estar en linea con el texto situandose a la izquierda.

 

Para separar nuestra imagen del texto lo que vamos a hacer es darle espacio en la horizontal. En este caso vamos a introducir un valor de "10" que no es otra cosa que dar 10 pixeles de espacio en blanco en relación con el texto.

Con esto nuestro problema quedará solucionado quedando un margen entre el texto y la imagen bastante más atractivo que el primer resultado.

 

 

 

A continuación podeis ver el resultado:

 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 

Espero que esta explicación haya sido de utilidad. Hasta otra!!

Visto 2366 veces
Kimi

Os presentamos a Kimi, nuestro técnico de soporte. Kimi es un boxer atigrado al que le apasionan por igual Joomla! y las salchichas. Es capaz de resolveros cualquier duda que tengais sobre este gestor de contenidos que tanto nos gusta a todos. Os invitamos a que le sigais desde esta sección y le pregunteis aquello que necesiteis para gestionar vuestro sitio web.

Facebook

 

Twitter Feed

17estudioweb De vergüenza que ninguna cadena cubra los atentados de París ni @antena3com ni @telecinco ni @laSextaTV, sólo 24h está emitiendo, vergüenza
17estudioweb Nos complace anunciaros que reactivamos las jornadas de clientes en nuestra nueva sede, pronto os informaremos del contenido de las mismas!!

Le atenderemos en:

Contacto:
Avenida Padre Méndez 85, 2ºC
Almería, 04006
Tfnol:
674 73 50 32
E-Mail:
Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
Website:
www.17estudioweb.com

markerEncuentranos en Google Maps

Localización

En www.17estudioweb.com utilizamos cookies para garantizar la navegación por el sitio web y mejorar nuestros servicios. Si continuas navegando, consideramos que consientes su uso. Accede a nuestra política de cookies para obtener información adicional sobre las cookies utilizadas, su finalidad y la forma de gestionarlas.

  Acepto la política de cookies de este site.