<img src="URL_IMAGEN" />
Observad que el código incluye una barra de cierre (/) que nos permite ahorrarnos el </img>
Así tal cual, si escribimos ese código y continuamos con el texto, este se situará en la línea correspondiente a la base de la imagen, tal y como se puede ver en este mismo párrafo.Comprobareis que esa presentación no resulta muy grata a la vista, pero el lenguaje HTML nos permite conseguir fácilmente que el texto pueda quedar "rodeando" la imagen. De esta manera, ambos quedarán mejor integrados. Para eso tenemos que utilizar la etiqueta STYLE y asignarle un atributo FLOAT, tal que así:<img src="URL_IMAGEN" style="float:right;"/>
El resultado en este caso es el que se observa en la segunda rueda... pero todavía podemos mejorar un poco.
Si os fijáis bien, las letras se pegan totalmente al lado derecho de la imagen. Para arreglar esto añadimos un MARGIN a la etiqueta STYLE, colocando algunos píxeles arriba, a la derecha y debajo. A la izquierda no sería necesario porque no hay texto en este caso. Si usáramos un FLOAT:RIGHT, sería al contrario: con margen a la izquierda y sin él a la derecha. El código de este último ejemplo, quedaría por tanto así:<img src="URL_IMAGEN" style="margin: 10px 10px 10px 0px;float: left; " />
Recordamos que las cifras tanto en el atributo MARGIN, como en el PADDING, se expresan en el siguiente orden: arriba, derecha, debajo, izquierda.Nada impide usar varias imágenes flotantes a la misma altura o incluso a distinta. Las dos de la izquierda tienen un FLOAT:LEFT y se mostrarán en el mismo orden en que se redacte el código. La primera que se teclee es la que quedará más a la izquierda.
La que flota a la derecha, puede ir escrita antes o después, porque siempre que no coloquemos un retorno de carro (ENTER) se irá a la derecha sin mayores interferencias.
Entre imágenes o entre una imagen y texto, se puede colocar un espacio en blanco y se interpretará como tal siempre que no exista un margen. Esta es otra manera de separar un poco dos imágenes que no tengan ningún atributo FLOAT.
El código de la imagen hay que ponerlo justo donde queremos que tenga su parte superior. Por ejemplo, las tres etiquetas IMG de las columnas anteriores, están escritas justo delante de la palabra "Recordamos".
Otra utilidad que le podemos dar a FLOAT, sería para crear columnas de texto (estilo periódico). Se puede definir un bloque (DIV) alineado al centro y ocupando un 100% del ancho. Dentro de él, tantos bloque más como columnas necesitamos. Colocamos margen derecho e izquierdo a la primera y sólo derecho a las restantes (excepto a la última). Luego le asignamos a cada una un porcentaje sobre el ancho total. La suma de las tres no podrá suponer el 100%, porque los márgenes también consumen espacio. A continuación un ejemplo y después su código.
Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.
Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.
Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.
<div style="text-align:center;margin:0 auto;width:100%;">
<div style="width: 30%; float: left;margin:0px 15px 0px 15px;text-align:justify;">TEXTO COLUMNA 1</div><div style="width: 30%; float: left;margin:0px 15px 0px 0px;text-align:justify;">TEXTO COLUMNA 2</div><div style="width: 30%; float: left;margin:0px 0px 0px 0px;text-align:justify;">TEXTO COLUMNA 3</div>
<div style="clear: both;"/>
</div>
<div style="width: 30%; float: left;margin:0px 15px 0px 15px;text-align:justify;">TEXTO COLUMNA 1</div><div style="width: 30%; float: left;margin:0px 15px 0px 0px;text-align:justify;">TEXTO COLUMNA 2</div><div style="width: 30%; float: left;margin:0px 0px 0px 0px;text-align:justify;">TEXTO COLUMNA 3</div>
<div style="clear: both;"/>
</div>
¿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...
Excelente entrada, Oloman, gracias, no tenía idea que se pudiera hacer eso con el texto, creía que sólo con imágenes.
ResponderEliminarSaludos.
Hola Oloman, sigo aplicando tus consejos al blog, gracias por tu trabajo.
ResponderEliminarPero que excelente esta explicación!!! Si supieras como peleo con las imágenes y nunca quedan en su lugar! jaja
ResponderEliminarAhora mismo anoto los códigos para utilizarlos, gracias Oloman!
Interesante entradas...
ResponderEliminarSaludos!
Genial Oloman sencillamente genial y el bichito muy logrado casi que lo aplasto con un folio :)
ResponderEliminarHEY ME INTERESO MUCHO EL CIRCULO CON LETRAS ROJS QUE TIENES A LA IZQUIERDA COMO LO ICISTES REPONDE PLIS TENGO UN PROYECTO DE HTML Q HACEER
ResponderEliminarGenial, gracias Oloman, hace tiempo que buscaba como dividir un elemento de página en tres secciones, imagino que no solo se pueden poner texto sino también imagenes ó codigo html?.
ResponderEliminarProbare a ver que sale, si no resulta, lo lamentare muchísimo pero me vere obligado a volver a molestar.
En cuanto a posición de elementos, hay un artilugio en Vagabundia que me tiene intrigado, al final del blog hay tres pestañas, al hacer clic en cualquiera de ellas aparece la información arriba al costado izquierdo en un espacio que esta en blanco, lo curioso es que las tres lo hacen en ese mismo lugar, si cambias de pestaña, se borra la informcion anterior y aparece la nueva. Mi pregunta es la siguiente: es muy complicado hacer un menú con tres o cuatro elementos y que todas ellas se desplieguen en un mismo sitio, abajo de esta?
Un abrazo y gracias nuevamente
Hola Alejandro, si lo que queires es crear distintas secciones dentro de Elementos de Página, me temo que tendrás que estudiar un poco más ;) Enlace: Crear secciones
ResponderEliminarEstos códigos son sólo para poder formatear elementos dentro de un post. Para bloques de información de la propia plantilla, ya tendrás que ver la colección de artículos del anterior enlace.
Con respecto a la segunda cuestión, ese es otro truco totalmente distinto. Se trata de crear un espacio que a su vez contiene varios solapados y que sólo se hacen visibles al pinchar en las pestañas correspondientes. En el caso de J.Miur, las pestañas las ha puesto aparte, en lugar de colocarlas encima como es habitual.
Intentará preparar un post sobre eso, pero no esperes que sea pronto que empiezan las vacaciones...
Que envidia, de la sana eh!. Aquí abajo en donde termina todo estamos en pleno invierno y con temperaturas bajo cero. Lo de las secciones lo hicimos, pero con este truco de los contenedores logramos poner tres marquesinas del mismo tamaño en un solo elemento de página, dos a los costados y uno al medio con muy buenos resultados.
ResponderEliminarAún nos queda mucho por aprender y por mejorar y es por eso que estos espacios son tan importantes, mundo blogger no seria el que conocemos sin ellos.
Quedamos a la espera de nuevos trucos, que disfrutes de unas merecidas vacaciones y gracias por todo
Muy buen blog de ayuda, me será muy útil. Muy agradecido. 2 Preguntas, ojalá me las pudieras resolver a: jmqplus@mail.com
ResponderEliminar1. Cuál sería el mejor software para hacer gadget´s, de k link los bajo...?
2. es posible utilizar dir url desde mi pc? (algo asi como: file:///C:User/Yav/DeskTop/... y cual sería la sintaxis corecta.
Gracias de antemano
Yav, para hacer gadgets tienes muchos servicios en internet, sobre todo para mostrar los resultados de un feed. No sé lo que buscas, pero empieza por el propio Google que tiene muchos prediseñados y te permite hacer nuevos.
ResponderEliminarSobre la segunda cuestión, creo que no, aunque no conozco ese tema y tampoco sé muy bien para qué lo quieres.
Que manera de explicar las cosas, por eso me gusta visitar tu sitio, gracias por los aportes :)
ResponderEliminarggguiyoiu
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarExcelente, gracias queria poner texto al lado de una imagen grande pero que el texto quedara en medio de la imagen, imagen a la derecha y el texto en medio de la imagen pero a la izquierda, y con tu explicacion quedo perfecto, buen post con buenas explicaciones.
ResponderEliminarAcabo de descubrir tu blog y me está sirviendo de mucha ayuda!! muchas gracias!!!
ResponderEliminarHola, gracias por el tutorial me sirve mucho, pero como sugerencia podrias quitarle la imagen que dice "codigo codigo codigo codigo" como que hace ruido visual y distrae, gracias denuevo, suerte.
ResponderEliminarLo tengo en mente. Un día de estos lo cambio. Gracias.
ResponderEliminarMe gustaria sabe ya que cambie en algunas ocasiones de el titulo del blog si lo que posiciona es eso o la direccion http, te vengo siguiendo desde hace unos dias y me encanta tu blog, se que sera facil la respuesta para ti, pero yo no tengo de momento ni idea, gracias
ResponderEliminarMe parece que el posicionamiento al que te refieres no es el mismo que explico yo aquí, Paco. Supongo que te refieres al posicionamiento de tu blog en Internet, para que salga en los primeros resultados de búsqueda que estén relacionados con él.
ResponderEliminarSobre eso no sé casi nada, pero creo que la dirección no tiene nada que ver y el título, poco. De todas formas, no cambies muchos este último porque vas a volver locos a tus lectores ;)
Saludos Oloman! Hace un par de días decidi que era hora de arreglar mi blog y comenzar a hacer algo con el. Pero me he topado con una duda sobre el posicionamiento de imagenes.
ResponderEliminarQuiero poner una imagen .png de una lupa al lado de la barra del buscador pero no sé que codigo usar y si este va en el código de la barra del buscador o si va en el código del menu. No tengo ni idea YwY
Por cierto, me gusta mucho tu blog!
Este comentario ha sido eliminado por el autor.
ResponderEliminarBueno, creo que mejor lo hago de la forma menos complicada.... PSD... ¬¬ así no me matare con el codigo para poner unsa sola imagen. Gracias de todas formas!
ResponderEliminarCasi siempre hay diversas soluciones para la misma cosa Balthier1116. Si lo has arreglado con gráficos, estupendo. Un saludo.
ResponderEliminarMe gustaria saber como colocar un texto debajo de una imagen.esta imagen al darle clipc me lleva a un albun de fotos que previamente he subido.la imagen podria ser de 200x200 y debajo de ella un texto de 200x20.saludos.ANIBAL de Peru
ResponderEliminarLucesita55, ahora es bastante fácil hacer eso. Desde el editor de entradas y en la pestaña Redactar, subes la imagen, luego pinchas en ella y te aparece un cuadro con opciones. Una es Añadir leyenda y te genera un texto al pie de la imagen que puedes cambiar por el que quieras.
ResponderEliminarDesde ahí mismo puedes Añadir enlace a la imagen.
La mejor explicación que encontre, Te lo agradezco de antemano :D y gracias.
ResponderEliminarMuchas gracias, ha sido de gran utilidad.
ResponderEliminarA mandar...
ResponderEliminarFelicidades y muchas gracias por tu gran ayuda un amigo
ResponderEliminarNo hay de qué Mallorcared.
ResponderEliminarNo sabes cuanto me ha servido esta informacion despues de buscar otras fuentes y no encontrar nada tan claro como lo has hecho aca. Gracias Oloman, eres impresionante.
ResponderEliminarEncantado :D
EliminarDos preguntas:
ResponderEliminarCómo se hace para quitarle los enlaces a la imagen cuando se alínean a la izquierda o derecha, porque lo he intentado en la pestaña Redactar y en la de HTML, y ni así.
Y segundo, la foto de tu avatar, ¿eres tú o es Nacho Cano un poco descuidado?
Saludos.
¿Nacho Cano? Joder porque has añadido lo de "un poco descuidado" que si no diría que tienes un serio problema visual :) En cualquier caso sería muy, muy descuidado...
EliminarPara quitar los enlaces a una imagen, independientemente de hacia dónde estén alineadas, sólo hay que quitar la etiqueta a (<a href="http://... etc) y su correspondiente cierre, pero también se puede hacer desde el editor, pestaña Redactar. Pinchas en la imagen y luego en el icono para incluir hiperenlaces. Entonces te saldrá una ventana para modificar enlace o eliminar. Evidentemente es lo segundo.
Puede que no te salga a la primera pues se mezcla esa utilidad con la de alinear y cambiar tamaño de la imagen, pero seguro que va. Es cuestión cogerle la maña.
Hola Oloman, me peguntaba si en este tiempo con todo lo mejorado de css3 se puede hacer esto directamente en css, solamente cargar el texto en html y que el texto quede alrededor de la imagen ???? tipo bio para un footer, gracias por tu apoyo.
ResponderEliminarClaro que se puede, pero creo que tienes las ideas un poco mezcladas:
ResponderEliminarCSS
.bio {border:1px solid #000000; padding: 10px;}
.bio img {float:left; margin: 0 0 5px 5px; padding: 0;}
HTML
<div class='bio'><img src='URL_AVATAR'/>Texto que acompaña la imagen</div>
Veo que está todo tu blog sobre HTML muy bien explicado, perooooo no entiendo nada, y es que encima me pongo nerviosa con tanto código ¡que desastre, me estoy acomplejando!será que tengo que empezar como niña pequeña, por lo más básico.
ResponderEliminarBueno, hay cosas explicadas con más detalle, desde lo más básico y otras que suponen que ya sabéis algo. Sigue la etiqueta BPT para encontrar más de las primeras, que es por dónde se debe empezar ;)
Eliminargracias por tu ayuda, resultan fáciles de seguir y muy practicas, me gustaría saber si existe alguna opción, para colocar una entrada que permanezca fija en el principio del blog, pues van bajando cada vez que se publica una nueva y me gustaría dejar una en la cabecera, un abrazo y de nuevo gracias por tus aportes...
ResponderEliminarHola. La mejor forma de poner una cosa fija en la cabecera es precisamente poniéndola ahí. Para eso no crees una ENTRADA, sino un gadget tipo HTML/JavaScript desde el apartado DISEÑO del Escritorio. En él escribe lo que quieres -con el mismo estilo que en un post, o no- y luego muévelo justo encima del bloque Entradas del blog. Así tendrás ese contenido fijo que quieres encima de las entradas.
EliminarHola Oloman... Me gustaria hacerte una pregunta relacionada con los espacios entre las fotos o los textos... Yo tengo Mac Apple y PC de windows. A veces cuando modifico los espacios manualmente entre foto y texto en el HTLM con bottom-margin 1.5em; o bottom-top 0.6em; se producen discrepancias entre ambos sistemas operativos. Me explico, en ocasiones tras hacer los cambios en Mac Apple, por ejemplo, veo que el espacio entre foto y texto es el correcto, pero en windows aparece sin ningun espacio o mas espacio del que yo habia preestablecido, o viceversa. Por que ocurre esto?.... Ahora no se por cual me debo guiar?.. El resultado final va a depender del ordenador desde donde vea mi blog!.. Y en realidad el resultado final deberia depender de los margenes establecidos por mi!..
ResponderEliminarOTRA COSA que me gustaria preguntarte...: Conoces algun libro o informacion para aprender el lenguaje HTML, sobre todo en lo referido a fotos:? >a href=+, src=" style: left; etc etc. Realmente me gustan todos esos simbolitos y me gustaria aprenderlos bien... Un saludo afectuoso y muchas gracias de antemano.. Jose xxx
En realidad no sé si tiene que ver con el sistema operativo, pero seguro que sí tiene que ver con el navegdor. Puede que con MAC uses uno y con Windows otro.
EliminarEl problema es que cada navegador interpreta los márgenes y paddings de distinta manera. Uno lo suma al ancho de la caja, lo que la hace más grande de lo programado y otro entiende que va incluido en el ancho total.
Para evitarlo puedes usar box-sizing que te lo estandariza, pero tampoco es garantía, pues no todas las versiones de todos los navegadores entienden esa propiedad. Pero peor es nada.
Y aquí tienes tus libros. Son los más sencillos que conozco, gratis y además con muchos ejemplos: http://www.oloblogger.com/2013/02/libros-online-html-css-javascript.html
Gracias Oloman.. Lo tendre en cuenta!.. Un saludo y buen fin de semana.. Jose
EliminarGracias amigo....de muchísima utilidad, saludos desde Caracas Venezuela.
ResponderEliminarHola oloman! mi pregunta es, sabiendo colocar la imagen el problema que tengo es que se sobrepone al comienzo de mi primer post. Me gustaría insertar una imagen y que los posts comenzarán después de esa imagen y que no se quedarán ocultos detrás de ésta. ¿Como lo hago?
ResponderEliminarun saludo
Hola. La imagen no se debe sobreponer sobre el texto, si es eso a lo que te refieres. Al menos no debería pasar si la imagen forma parte de la entrada y usas FLOAT como se explica aquí. La única manera de que se solapen texto e imagen es que en alguno de los dos estés usando (voluntaria o involuntariamente) la propiedad POSITION.
ResponderEliminarVale. Ya lo he conseguido. Al final lo he hecho de manera poco ortodoxa pero bueno, ya esta. Muchas gracias.
ResponderEliminarEfectivamente estaba usando position. Añadí lo de absolut y ya no tuve problemas.
Gracias y un saludo.
Oloblogger, para seguir mejorando mi página, un tema avanzado:
ResponderEliminar-¿Como se crea una imagen con enlace pero que al pasar el raton por encima se fuera agrandando sin pixelarse? Como una especie de zoom out.
Un saludo.
En este enlace tienes una forma y en este otro, otra que incluyen efectos adicionales.
EliminarMuy bien explicado...
ResponderEliminarSaludos desde BArcelona
Hola Oloman! Geniales tus explicaciones, las estoy usando para personalizarme un poco las páginas de mi web de fotografía a partir de una plantilla. Mi pregunta es que el sistema para hacer tres columnas me funciona perfecto pero no ocupa el 100% del espacio, y revisando tu propio ejemplo, veo que tampoco lo hace en tu caso, si te fijas, hay algo de margen a derecha e izquierda del bloque completo. He probado varias cosas pero no me funcionan, no sé nada de HTML, he ido probando y aprendiendo a partir de ese post tuyo.
ResponderEliminarOtra posibilidad que aún me gustaría más es que todo este bloque de tres columnas tuviera un rectángulo de color al fondo, esta vez sí que ocupara todo el ancho disponible de la página, así no haría falta tocar el ancho del bloque que te decía. El rectángulo sería el que quedaría alineado con el resto de texto anterior, que no tiene ninguna división.
En fin, contesta a lo que puedas, y si no, pues ya lo dejaré así, que bastante mejora supone lo de las tres columnas frente a tener que leer texto tan ancho. Ah! y lo del texto alrededor de fotos también queda perfecto, mil gracias!
Un saludo!!!
Isabel
Lo que tiene ser tozuda... ya lo he encontrado! He ido jugando con los márgenes y el espaciado interno y solucionado! Gracias de todos modos porque sin tus explicaciones mi web no estaría quedando tan bien!
ResponderEliminarVale... pero "de nada" :)
EliminarHola Oloman,
ResponderEliminarAhora que ya se me ha resuelto lo de las imágenes, te comento mi nuevo problema. Cuando edito varias imágenes seguidas, blogger me deja una distancia de 1.5 centímetros +- entre imagen e imagen. Yo quiero que quede menos distancia entre las imágenes y lo que hago es cambiar el HTML. Sin que nadie me haya dicho nada hago el siguiente cambio y así consigo ajustar manualmente la distancia entre las imágenes. Yo cambio donde dice:
style="margin-left: 1em; margin-right: 1em;
por este otro enunciado:
style="clear: left; float: left; margin-bottom: 0.7em; margin-right: 1em;
Creo que la palabra mágica aquí es margin-bottom: 0.7em; porque eso es lo que va a determinar la distancia entre ambas fotos.
Sin embargo, hacerlo de forma manual es un coñazo. Sabes si puedo poner esa información de margin-bottom: 0.7em; en el CCS o en Plantilla HTML.?. De esta forma quedaría ya preestablecido y no tendría que estar cambiando nada entre foto y foto… A ver si existe algo para que blogger no me deje tanto espacio entre foto y foto. Un saludo y muchas gracias. Jose
Sí, pero como hay CSS "inline" (en el propio post), que tiene prioridad sobre el que escribas en la plantilla, tendrás que usar !important para que el prioritario vuelva a ser el de la plantilla. Así:
ResponderEliminar.post-body img {margin-bottom: .7em !important;}
Hola Oloman, No me funciona!!!... Creo que a ese enunciado le falta algo.. Lo debo poner en CSS, verdad?.. Pues no va.. pero ahí veo un .7em y el margen que yo quiero es 0.7em xxx Le pongo el 0.7em pero sigue igual. También lo pongo así: 0.7em; (con el punto y coma) y tampoco.. Por favor Oloman, dime que estoy haciendo mal.. Un saludo y a ver si lo resuelvo cuanto antes.. Gracias de antemano.. Saludos, Jose
ResponderEliminarHola Oloman, parece que ese código: .post-body img {margin-bottom: 0.7em !important;} actúa para aumentar el espacio entre dos imágenes. Pero por alguna razón, Blogger ya prestablece un espacion mínimo entre imagen e imagen y aunque le ponga 0em siempre me daja algo así como 1 centímetro entre las fotos. Y quiero medio centímetro…Que hago? Slds..
ResponderEliminarEl código va en la parte CSS, sí... pero tiene que ir al final. Me ayudaría poder ver tu blog por si hay otro código que interfiera.
EliminarHola Oloman, Mi blog es: dondeandaras.blogspot.com He estado modificando un monton de cosas.. A ver si podemos preestablecer los margenes como a mi me gusta.. Saludos y ya me diras algo. Muchas gracias. Jose
ResponderEliminarOloman, he puesto el código al final y parece que ha surtido efecto a medias… Funciona cuando selecciono las fotos en tamaño pequeño y en mediano. Al seleccionar las fotos en grande no me funciona. Y yo necesito las fotos justo en tamaño grande.. Esto es inexplicable!… Estoy súper intrigado en conocer si hay una solución… Un saludo y gracias… Jose
ResponderEliminarCreo que es por la clase "separator" que Blogger añade automáticamente en algunas configuraciones de imágenes. Prueba a añadir también esto:
Eliminar.separator a {
margin: 0 !important;
}
Oloman, Ese codigo magico ha surtido efecto.!.. Muchisimas gracias.. Ahora necesito pre-establecer el margen entre TEXTO e IMAGEN y entre IMAGEN y TEXTO.. Al utilizar ese codigo: .separator a {
ResponderEliminarmargin: 0 !important;} se me desequilibran los margenes entre el texto en si y la siguiente foto y entre la foto en si y el proximo texto.. Creo que eso es algo de padding em; o algo asi..
Si me puedes ayudar con eso te lo agradeceria de por vida.. Un saludo y muchas gracias.
Jose
Es que adicionalmente tienes que seguir usando el otro para la imagen, pues ese sólo elimina el del enlace:
ResponderEliminar.separator img {margin-bottom: .7em !important;}
entonces por lo que explicas hay que subir la imagen con la URL, no añadiendo imágenes,
ResponderEliminarsin embargo a mi a veces me ha funcionado colocar el cursor al lado de la foto y escribir, pero no siempre me deja
esto es un lio no me aclaro, lucho hasta el agotamiento
No exactamente. Esto que explico aquí es cómo funciona lo de las imágenes "flotando" junto a un texto desde el punto de vista del código, pero no es necesario teclear todo eso a mano en Blogger. Como dices, con añadir la imagen y luego seleccionar derecha, izquierda o centro, ya la pones como quieras.
EliminarHola Oloman, estoy probando cómo combinar párrafos e imágenes en las páginas y entradas de mis blogs (blogspot.com), pero hasta ahora no he podido conseguir lo siguiente, que se ve en artículos de prensa: una imagen flotando abajo a la derecha con respecto al texto de un párrafo (como si la hubieran insertado abajo a la derecha del bloque de texto), o sea, una imágen flotando a la derecha que tenga la totalidad del texto de un mismo párrafo rodeándola por arriba y a la izquierda, de manera que la última línea de texto del párrafo toque pero no depase la línea que sería la prolongación de la base de la imagen.
ResponderEliminar¿Se puede definir con una combinación de "float", "clear", "align", "text-align"? Gracias de antemano. Filip
No. Eso que quieres es algo más complicado, pero supongo que no imposible.
EliminarAquí tienes un truco para conseguir algo parecido y con alguna que otra variación, imagino que se podrá hacer lo que quieres... pero lo dicho, añadiendo algunas cosas más.
http://css-tricks.com/float-center/
Hola Oloman, buenos días.
ResponderEliminarTe lo comento por aquí porque no he encontrado otro post más adecuado. Quiero cambiar el tamaño del main-wrapper de la página. Como tengo todas las imágenes en su tamaño original, esto hará que el texto se coloque en la parte sobre sobrante de la derecha, rellenando el hueco aumentado. ¿Cómo podría hacer para que el texto siempre esté debajo de la imagen, independientemente de que la imagen ocupe o no todo el ancho posible del wrapper de los post?
Un abrazo
Hola. Supongo que eso te pasa con las imágenes flotadas. Un truquillo podría ser este:
Eliminar.post-body .separator a, .post-body .separator img {float: none !important;}
O quizás este otro:
.post-body .separator a, .post-body .separator img {clear:both;}
Gracias Oloman. Sería la primera opción. ¿Existiría algún condicionante para que este truco no se aplique en imágenes "pequeñas" o "medianas" (según tamaños de imágenes de blogger).
ResponderEliminarCon CSS no Emilio, pero dependiendo de como esté hecho todo a veces se pueden utilizar otras cosas. No sé... ahora mismo se me ocurre que lo mejor seguramente sería meterle un width:100% a las imágenes junto con un display:block;, pero quizás no sea de aplicación en todos los casos. Depende de como acostumbres a hacer tus posts.
EliminarLa idea es buena. Pero claro, no diferencia de imágenes pequeñas de grandes, todas las pone por igual. Estaría bien que las imágenes en tamaño pequeño o mediano (según blogger) se quedaran como están.
ResponderEliminarBuenas tardes Oloman. Tengo un problema con mi blog y es que no consigo por ninguna de las maneras que las fotos que añado acompañando a mis posts tengan un margen o separación con respecto al texto, es decir, queda totalmente pegado el texto a la foto y la sensación es horrible. He probado con el código de arriba a abajo pero no doy con la tecla. Por qué nomenclatura debiese buscar? Mil gracias
ResponderEliminarHola Luis Miguel. En un principio es sólo cuestión de ponerle un MARGIN a tus IMG, bien añadiéndolo directamente al HTML de cada imagen, bien programándolo de forma general en el CSS de tu plantilla.
EliminarDe todas formas es raro que no te ponga margen porque cuando subes con el editor de entradas una imagen alineada a izquierda o derecha, Blogger automáticamente te añade el margen correpondiente. No sé cuál es tu blog, así que no puedo detallarte más si no me muestras un ejemplo concreto.
hola de nuevo Oloman. Mil gracias por responder y disculpa la tardanza en volver a contactar. Te voy a pasar directamente el enlace para que lo veas en un ejemplo de un post, yo me he dado por vencido: http://oestemarketing.blogspot.com.es/2016/09/decathlon-vs-sport-zone-en-la-milla-de.html
ResponderEliminarLo mejor es que edites el post desde la pestaña Redactar, pinches sobre la imagen y luego, desde el menú que sale debajo de ella, seleccionar Alinear a la izquierda (o derecha, según...). Si ya te sale como alineada a la izquierda entonces alinea al centro y luego a la izquierda. Blogger genera automáticamente un margen cuando alineas a derecha o izquierda, así que esa es la manera más fácil de arreglarlo.
EliminarSi eso no funciona (que casi seguro que sí), entonces edita el post pero desde la pestaña HTML. Cuando veas el código de la imagen añade este margin-right: 10px; que verás que he marcado en negrita:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-cZ7-ewM4gXE/WDR6IsPb3-I/AAAAAAAAAJI/T_TGTXRvsAcI6liQPJVcEPiPtZNwpRKgwCLcB/s1600/IMG_1773.JPG" imageanchor="1" style="clear: left;float: left;margin-right: 10px;"><img alt="30" border="0" src="https://4.bp.blogspot.com/-cZ7-ewM4gXE/WDR6IsPb3-I/AAAAAAAAAJI/T_TGTXRvsAcI6liQPJVcEPiPtZNwpRKgwCLcB/s1600/IMG_1773.JPG" title=""></a></div>
Gracias de nuevo Oloman. Acabo de probar ambas indicaciones y sigue igual, con el texto pegado. Que rabia.
ResponderEliminarImposible. No puedo hacer otro comentario porque especialmente la segunda opción, es infalible. La probé antes de escribirla.
EliminarBuenos días amigo, acabo de volver a intentarlo, ya copiando y pegando el código que has puesto, por si acaso se me estaba escapando algo, y nada, sigue igual. Decir que el soporte técnico de la plantilla es un fraude, no me han solucionado nada. Dime si quieres tu correo para hacerte administrador y si tengo que pagarte algo lo hago sin problema, porque es una desesperación.
ResponderEliminarEl soporte de los sitios que venden plantillas, por lo general es en la práctica inexistente. Si quieres escríbeme mediante un formulario que hay abajo de la página (Contacto)
EliminarMuy buen aporte muchas gracias
ResponderEliminarHola Oloman, gracias por el artículo. Dado que tuve problemas con la plantilla de Contempo, que te había comentado del botón de compartir, estoy usando una plantilla gratis que descargué. El diseño me gusta. Si fuera posible, me gustaría que me ayudaras con algunas dudas que tengo, respecto a unos códigos que quiero cambiar.
ResponderEliminarNormalmente cuando insertaba una imagen en una entrada, las imágenes quedaban centradas, pero la plantilla que ahora tengo, se come un pedazo, si la imagen está centrada, así que en mi último artículo tuve que alinear a la izquierda. ¿Es posible con algún código css alinear todas las imágenes a la izquierda, si la plantilla lo permite? O aumentar el ancho de las entradas para que me aparezcan las imágenes completas.
Si es posible, podrías ayudarme?
También en los títulos de las entradas por cada palabra empieza con una mayúscula, por ejemplo: Antivirus De Paga O Gratuitos, Dos Alternativas -¿Con Cuál Me Quedo? – Puede cambiarse a que solo la primera letra quede en mayúscula?
Me gustaría que visitarás mi blog, si fuera posible.
http://hiberhernandez.blogspot.mx
Gracias de antemano. Apenas estoy aprendiendo CSS y HTML - Saludos
Hola Hiber.
EliminarSupongo que a estas alturas has solucionado lo de las imágenes porque hice un muestreo y veo todas bien.
Sobre lo de los títulos, eso es simplemente cuestión de que quites todos los text-transform:capitalize; que veas. Yo encontré estos tres en tu plantilla:
p.title {
text-transform: capitalize;
...
h1.post-title {
font-weight: normal;
text-transform: capitalize;
...
h1.post-title, h2.post-title {
font-weight: normal;
text-transform: capitalize;
...
¡Muchísimas gracias! funciona perfectamente.
ResponderEliminar