Olá pessoal
hoje vou ensinar como alinhar o texto ao redor de uma imagem (foto), inseridas
em artigos no wordpress. Ou em site HTML.
Bem, vou destacar duas possibilidades. Uma possibilidade é
inserindo o código diretamente na
tag IMG em HTML e outra é editando a folha de estilo Style.css e chamando
posteriormente o estilo na tag
IMG em HTML.
A opção de editar a folha de estilo tem a vantagem de usar um
código menor na tag IMG, mas em contrapartida você fica limitado a fazer
ajustes nos valores das distâncias das margens/bordas entre o texto e a imagem
individualmente, pois ficaria definido para todas imagens na folha de estilo.
Bem, você entenderá melhor mais para frente. Já na opção de inserir o código
por completo na tag IMG
sem usar a folha de estilo, você pode definir os valores das distâncias das
margens/bordas entre o texto e a imagem individualmente. Neste artigo, na
imagem aqui inserida à esquerda temos o seguinte código:
<img style="border:
0pt none; float:left; padding-right:10px; padding-bottom:1px"
title="" src="http://www.meusite.com.br/minhaimagem.jpg"
alt="...>
O que nos interessa para quebrar o texto ao redor da imagem é a
inserção do código marcado em vermelho na tag
IMG acima. Então temos:
float:left – Aqui em float
utilizei left
para indicar que a imagem fica posicionada à esquerda. Se fosse à direita seria
right;
padding-right:10px – Neste caso estando a imagem à esquerda (left), em padding-right usa-se o right para informar a distância em pixels que o texto vai ter da margem/borda direita (right) da imagem. Aqui todo texto inicia afastado 10 pixels à direita da borda da imagem;
bottom:1px – Aqui em bottom é informado a distância em pixels que o texto vai ter da margem/borda inferior (bottom) da imagem. Aqui todo texto inicia afastado 1 pixel abaixo da borda inferior da imagem.
padding-right:10px – Neste caso estando a imagem à esquerda (left), em padding-right usa-se o right para informar a distância em pixels que o texto vai ter da margem/borda direita (right) da imagem. Aqui todo texto inicia afastado 10 pixels à direita da borda da imagem;
bottom:1px – Aqui em bottom é informado a distância em pixels que o texto vai ter da margem/borda inferior (bottom) da imagem. Aqui todo texto inicia afastado 1 pixel abaixo da borda inferior da imagem.
Como isso fica
na prática?
No final
deste artigo veja sobre o autor? Criei o
código h2 colocando a esquerdo o título: SOBRE O AUTOR
E em seguida
coloquei minha foto com o texto justificado.
No caso de
blog ou site você só precisa fazer uma única vez, e toda vez que publicar um
novo artigo já aparece no rodapé. Veja como ficou no final deste artigo minha descrição.
Este é o código de programação em html, ou em php
<h2 align='left'>Sobre o
Autor</h2>
<img style="border: 0pt none; float:left;
padding-right:10px; padding-bottom:1px" title=""
src='https://lh3.googleusercontent.com/--BrAQdRnq50/AAAAAAAAAAI/AAAAAAAAGyc/KP6qKKZNsyQ/s80-c/photo.jpg'/>
<p align='justify'>Valdivino Sousa é
Professor, Matemático, Pedagogo, Contador, Bacharel em Direito e Escritor.
Possui mais de 20 anos de experiência na área Contábil, desde 2005 é Contador
responsável da Alves Contabilidade e Consultoria Tributária. Criador do método
X Y Z que facilita na aprendizagem de equação e expressão algébrica com objetos
ilustrativos. Docente nos cursos de Matemática, Ciências Contábeis,
Administração e Engenharia. Autor de mais de 10 (dez) livros e têm vários
artigos publicados em revistas e jornais especializados. Blogueiro Mtb 60.448,
Consultor e Estrategista de Mídias Digitais. Semanalmente escreve para o portal
D.Dez, Jornal da Cidade e Folha Online. Sobre: Comportamento, Educação
Matemática e Desenvolvimento da Aprendizagem. Tem experiência na área de
Matemática, com ênfase em Equações Diferenciais Parciais, Matemática
Computacional e Engenharia Didática, atuando principalmente nos seguintes
temas: métodos numéricos, equações diferenciais, modelagem, simulações e
didática no ensino de matemática. Contatos: E-mail:
valdivinosousa.mat@gmail.com Celular / Whatsap: 11 –
9.9608-3728</p>
<p>
</p>
Agora veja como ficou excelente!
Sobre o Autor
Valdivino Sousa é Professor, Matemático, Pedagogo, Contador, Bacharel em Direito, Psicanalista e Escritor. Criador do método X Y Z que facilita a aprendizagem de equação e expressão algébrica com objetos ilustrativos. Autor de mais de 15 livros e têm vários artigos publicados em revistas e jornais. É editor do blog Valor x Matemática News, Produtor de Conteúdo e Colunista Mtb 60.448. Semanalmente escreve para o portal D.Dez e TOP 10 News, sobre: Comportamento, Educação Matemática e Desenvolvimento da Aprendizagem. E-mail: valdivinosousa.mat@gmail.com Whatsap: 11 – –9.9608-3728 Veja Biografia