HTML: Desentortando as imagens dos posts!

Tenho visto em muitos blogs um problema com o qual me deparei quando decidi que queria que as imagens dos post ficassem da mesma largura que o texto. Nas verdade eu queria que ficasse alinhado aos limites da área de postagem, sabem, mas isso é mais complicado e o máximo que eu consegui até o momento foi deixar corretamente alinhado com os limites do texto.

Bom não sei muito de html, o que vou dizer aqui foi a base de análise e tentativas frustradas até descobrir o que vou compartilhar com vocês.

Primeiro eu fui lá no meu html e descobri qual era a largura da área do texto. Daí, quando comecei a tentar deixar as imagens alinhadas aos limites do texto as imagens ficavam tortas tipo assim:

Como se pode ver, a imagem acima está claramente torta. Começa depois do texto e termina lá fora também! Estou escrevendo coladinho na imagem para que fique visível e não fique dúvida. E o texto deve estar justificado para que se note o alinhamento correto da imagem!

Este é o código da imagem acima:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Xz4zb-KEXs8/UdS05Fu1qKI/AAAAAAAAAuk/ws7gg8clWG4/s500/large+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://3.bp.blogspot.com/-Xz4zb-KEXs8/UdS05Fu1qKI/AAAAAAAAAuk/ws7gg8clWG4/s1600/large+%25281%2529.jpg" width="700" />
</a>
</div>

Explicando um pouco...

1) De vermelho: É o código que centraliza a imagem. Quando você carrega a imagem ele já vem no códio automaticamente. Eu costumo tirar, mas no fim das contas, não é isso que ajusta a imgem.

2) De laranja: O código de link. Além do link ele carrega outras informações que não faço ideia da função, mas é dentro dele que a "mágica acontece". rsrsrs É ele que nos dá a opção de ampliar a imagem também.

3) De azul: O código da imagem propriamente dita. Apenas com ele a imagem já existe no post. E se ele ela não existe mais. É dentro dele que a gente muda a largura com o comando width=. Mas antes de eu colocar a largura que eu quero, eu configuro a imagem para o tamanho original que nos é oferecido clicando na imagem. Caso você não faça isso terá que apagar a parte height="" (dentro das aspas fica um número qualquer) que define a altura. Porque se deixar a imagem ficará desproporcional. Não está ali no meu código por isso.

Depois dessa breve explicação vou contar o meu "segredo". O que eu faço é apagar um pedacinho de dentro do código de link, o número 2. Veja:

<a href="http://3.bp.blogspot.com/-Xz4zb-KEXs8/UdS05Fu1qKI/AAAAAAAAAuk/ws7gg8clWG4/s500/large+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

Eu apago toda a parte em verde. E pronto! Não é fácil? rs;

Apenas apagando a parte que eu disse acima o resultado é o que vocês podem ver logo abaixo. A imagem começa e termina juntinho com o texto! Mas não se esqueçam de justificar o texto. Vou escrever sem o texto justificado logo abaixo para mostrar a diferença.
Se você deixar o texto alinhado à esquerda ele vai parar assim que as palavras não couberem mais na linha e descer para a próxima linha sem completar todo o espaço disponível nela. Dessa maneira não é possível visualizar que a imagem esta de acordo com a largura do texto, já que não vemos um alinhamento do texto do lado direito, pois cada linha termina diferente da outra.


Então gente, o "segredo" é esse. rsrs. Vocês entenderam direitinho ou eu sou uma péssima professora? rs. Espero que tenha sido útil também para vocês, ou para algumas de vocês, não sei.

Me digam o que acharam ok, gente? E também se vocês gostam desse tipo de post, ou não! E qualquer dúvida podem dizer nos comentários que eu atualizo o post explicando.

PS.: Eu amo texto justificado! :)
E eu amei fazer esse post. Amei o resultado! Estou radiante! *-*

Beijos mil :*

5 comentários

  1. Adorei o post,também amo texto assim

    Beijos

    blogdagi1.blogspot.com.br

    ResponderExcluir
  2. Gente, tô procurando resolver isso faz um tempo e não consigo!
    Bianca, vc é uma ótima professora, eu que não sou uma boa aluna! Rsrs
    Fiz tudo direitinho mas não funcionou! Meu texto tá maior que a imagem e queria que o texto ficasse exatamente no limite da imagem! =/

    ResponderExcluir
  3. Pra vc dar uma olhada (: http://verdejanela.blogspot.com.br/

    ResponderExcluir
  4. Hautelook had an amazing home organization week of items that
    would be helpful in getting your home in order in a beautiful chic way hautelook discount code Hautelook The only thing I
    didn't really like about buying from HauteLook was how long it took to ship my item http://hautelookqueen.webs.com/?

    ResponderExcluir
  5. Eu sei exatamente do que você está falando e tenho ódio mortal do Blogger por ele incluir essas tags de estilo automaticamente. O problema é nessas "margins". Eu faço layouts personalizados sob encomenda, e agora estou tentando descobrir como fazer pra que o Blogger não insira esse estilo. Pra mim é fácil remover essas tags cada vez que eu postar, mas para os clientes... O Blogger deixa muito a desejar em certas coisas. Obrigada pela postagem!
    www.jalayouts.com

    ResponderExcluir

Seja bem-vindo(a)!
Estou muito feliz com sua visita.
Ficarei ainda mais feliz com seu comentário.
Não se esqueça de deixar o link do seu blog para que eu possa conhecer também, ok?
Mil beijos e volte sempre! :*

LinkWithin

Related Posts Plugin for WordPress, Blogger...