Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Texto en los lados de una img

Texto arriba abajo y en todos lados de una imagen

Escrito por Administrador - 12/septiembre/2011


Y haora vamos a convinar el texto con las imagenes... vamos a poner texto arriba, abajo, a la derecha, izquierda de una imagen paso a paso, esto sera muy buena opcion para los que les gusta poner una imagen ilustrativa como por ejemplo en un articulo relacionado, alguna categoria o simplemente en una entrada o articulo.


Asi que vamos a empezar poniendo el texto al lado izquierdo de una imagen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.



Y bueno para poner el texto al lado izquierdo de una imagen vamos a hacer flotar la imagen al lado derecho como ya lo habiamos explicado anteriormente en el Posicionamiento de imagenes, tambien vamos a ponerle un poco de margen a la imagen para el texto no quede pegado a la imagen justo asi:

<img style="float:right; margin:10px;" src="URL DE TU IMAGEN"/>Tu texto, texto, texto que estara al lado izquierdo de la imagen...


Haora vamos a poner el texto al lado derecho de la imagen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.



Y para poner el texto al lado derecho hizimos flotar la imagen a la izquierda y tambien posimos un margen para separar un poco el texto de la imagen justo asi:

<img style="float:left; margin:10px;" alt="" src="URL DE TU IMAGEN" />Tu texto, texto, texto que estara al lado derecho de la imagen...


Toca el turno de poner el texto arriba de la imagen:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.



Para poner el texto arriba de la imagen, lo que hice fue centrar la imagen y el texto, para que el texto quedara arriba primero puse el texto y despues la imagen justo asi:

<center><p>Tu texto, texto, texto que estara arriba de la imagen</p></center>
<center><img style="margin:10px;" alt="" src="URL DE TU IMAGEN" /></center>


Y haora toca poner el texto abajo de la imagen:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.


Para poner el texto abajo de la imagen cambie el orden es decir primero la imagen y despues el texto justo asi:

<center><img style="margin:10px;" alt="" src="URL DE TU IMAGEN" /></center>
<center><p>Tu texto, texto, texto que estara abajo de la imagen</p></center>


Y con esto hemos acabado de poner el texto en todos los lados de la imagen, entonces queda en claro que nosotros tenemos el control de colocar texto en cualquier lado de una imagen.





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos



Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=