Eres un fiera Jugoncan! je je je
Efectivamente, yo cuando quiero colocar una imagen en medio del texto uso lo que Jugoncan comenta. Lo explico mejor por si os es util.
El efecto es el de la publicidad de esta página, un recuadro amarillo pegado a la derecha:
http://www.comocreartuweb.com/hosting-y-dominios/introducion.htmlComo veis, deja que exista texto a su izquierda y el efecto no está nada mal. Ahora vamos a ver lo sencillo que es hacer esto si se define bien en la hoja de estilos.
Para empezar, imagina que tengo este texto con estos párrafos:
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
Suponiendo que quiero colocar una imagen en medio de esos párrafos y pegada a la derecha, lo que haré es primero insertar la imagen, por ejemplo después del primer párrafo. Según como me quede al final, pasaré esa línea de código (de la imagen) a otro lado (tras el segundo o tercer párrafo para ver como queda) o la dejaré donde está.
El codigo con la linea de la imagen podría ser este:
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
<img href="ruta/imagen.gif" alt="esta es la imagen">
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
Ahora encierro la línea de código de la imagen en una capa o DIV y le pongo el nombre "imagen-dentro-de-contenido", de este modo:
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
<div class="imagen-dentro-de-contenido"><img href="ruta/imagen.gif" alt="esta es la imagen"></div>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
asd masd asdd asd asd asasd asd asd asd as dasd asdd asd</p>
Y ya solo necesito abrir la hoja de estilos css y definir las propiedades que deseo para ese tipo de imágenes:
.imagen-dentro-de-contenido
{
display:block ;
width:300px ;
float: right ;
height: 250px ;
margin-left:6px ;
}
Con display block hacemos que se trate a la imagen como un elemento individual, independiente del párrafo.
Con width:300px le damos la anchura de la imagen
Con Float right la pegamos a la derecha.
Con height 250 le asignamos la altura de la imagen.
Con margin-left:6px le damos un margen para que se separe un poco del texto y se quede la imagen pegada al texto, que queda mu feo.
Una vez definido esto en la hoja de estilo ya se puede colocar cualquier imagen de este modo con solo asignarle esa clase de estilo a la capa de la imagen. Comodo, no?
Te hablo de cabeza, si no funciona bien me avisas. Ah! Prueba lo mismo pero sin darle altura y anchura. Si funciona entonces no las definas en la hoja de estilo ni en ningun lado y asi ese estilo te sirve no solo para las imagenes de 300x250 sino para cualquier dimension.
Intentalo y con lo que obtengas nos dices algo, oki?
Un saludo!!! :wink:
