Série Como Fazer - Espaço, posição, tamanho e bordas entre imagem e texto

Posted by jsmoraes on Nov 01, 2013; 2:42am
URL: https://support.nabble.com/Serie-Como-Fazer-Espaco-posicao-tamanho-e-bordas-entre-imagem-e-texto-tp7587658.html

Muitas vezes queremos ter uma imagem e um texto ao seu lado, mas queremos que haja um distancia ente a imagem e o texto, e ainda um contorno em volta da foto.
Bom aqui, o código fica meio complexo, devido a quantidade de formatações. Vamos por parte:

Para borda:

Há dois estilos de implementar uma borda em volta da foto:

a) uso de números no parâmetro border do código automaticamente posto pela operação Inserir Imagem. A borda terá coloração padrão preta.

---------------
<nabble_img src="cala-a-boca-mulher.jpg" border="0">

<nabble_img src="cala-a-boca-mulher.jpg" border="4">
---------------

   

b) uso do parametro style não incluso diretamente pela operação Inserir Imagem. Neste caso o parâmetro border original deve ser apagado. E podemos determinar a largura em pixel, o tipo de borda, e cor:

---------------
<nabble_img src="cala-a-boca-mulher.jpg" style="border:12px outset blue"/>
---------------

tipos de borda: double, outset, insert, ridged, dotted, dashed, solid, etc.

Para posição do texto em relação a imagem:

Acrescentamos o parametro class no código incluso diretamente pela operação Inserir Imagem.

--------------
<nabble_img src="cala-a-boca-mulher.jpg" border="1" class="left" /> texto
--------------

Este texto ficará à esquerda da imagem
Mesmo que eu introduza parágrafos. E para que outros textos não fiquem ao lado da foto temos que inserir linhas em branco até que o espaço total seja prenenchido.
1
2
3
4
5
6
7
8
9
Este texto já está fora da área da foto.

E agora a imagem à direita:

--------------
<nabble_img src="cala-a-boca-mulher.jpg" border="1" class="right" /> texto
--------------

Este texto ficará à esquerda da imagem. Não importa que ele seja editado antes ou depois do código da imagem. O parâmetro class fará com que obrigatoriamente o texto fique a esquerda da foto.
Mesmo que eu introduza parágrafos. E para que outros textos não fiquem ao lado da foto temos que inserir linhas em branco até que o espaço total seja prenenchido.
1
2
3
4
5
6
7
Este texto já está fora da área da foto.

O uso do valor class="center" não irá distribuir o texto em volta da foto. Ele somente colocará a foto na  posição central.

Para distanciar o texto da imagem:

Bom, aqui encontrei uma certa limitação. Eu só posso manipular o este distanciamento de 2 formas e temos que incluir o parâmetro style=margin:
a) em torno de toda a foto: cima, baixo, esquerda e direita: style="margin:3em" . O número pode variar
b) esquerda e direita simultaneamente e de mesmo valor: style="margin:0 3em" . É obrigatório o 0 (zero) e o número seguinte pode variar.

É um recurso limitado e talvez não tenha grandes vantagens em relação à introdução de caracteres espaços.
(nota: Há outras formas para produzir este distanciamento e será abordado em outro tópico.
o valor para margin pode ser em unidade lógica em ou em pixel: 0 3em ou 0px 30px )

Este texto está com a imagem alinhada à esquerda com o parâmetro class e não está separado da imagem












Este texto está com a imagem alinhada à esquerda com o parâmetro class e separado da imagem com o parâmetro margin:0 3em

Manipulação no tamanho da foto (sem ser pelas opções da operação Inserir Imagem)

Temos que inserir o parâmetro width no código incluso diretamente pela operação Inserir Imagem. A diferença está somente nos valores de redução ou ampliação. Com este parâmetro eu posso obter o tamanho que interessa.

-------------
<nabble_img src="cala-a-boca-mulher.jpg" border="0" width="580""/>
-------------

******************
nota:O autor não pertence a equipe da Nabble.
 As informações e códigos constante deste tutorial foram obtidas no support forum da Nabble em ingles.
O objetivo é dar oportunidade de quem tem dificuldade com a lingua inglesa de usar alguns recursos permitidos e fornecidos pela Nabble.
Alguns códigos não poderão ser postados diretamente por serem muito extensos, trabalhoso e exigir postagens de imagem, mas o link para eles estarão disponíveis. jsmoraes