Autor Tópico: [Guia] Como colocar imagens lado a lado  (Lida 1968 vezes)

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
[Guia] Como colocar imagens lado a lado
« Online: 13 de Agosto, 2018, 07:08:29 pm »




Para colocar imagens lado a lado, você pode usar o código de tabela. Para obter o código, basta clicar em:



Após clicar no botão, irá aparecer o seguinte código:

[table]
[tr]
[td][/td]
[/tr]
[/table]




Você deve colocar o link da imagem já com o código [img] [/img] entre o [td] e [/td]


Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[/tr]
[/table]



Resultado:




¹ Para adicionar mais uma imagem, você adiciona outro [td] e outro [/td] entre o [tr] e o [/tr], preenchendo novamente como foi explicado no passo 2.


Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[/tr]
[/table]



Resultado:




² Agora que colocou duas imagens lado a lado, vamos separá-las. Para separá-las, você deve colocar alguns espaços (vai acrescentando espaços até achar a distância ideal para si) entre o [td] e o [img] da segunda imagem.

Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[td]                  [img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[/tr]
[/table]

Resultado:

                 



¹ Se você pretende colocar um texto no lugar das imagens, você segue os passos anteriores, mas no lugar da imagem, você vai colocar o texto desejado.


Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[td]#SOPA[/td]
[/tr]
[/table]



Resultado:

#SOPA



² Para separar o texto e a imagem, você repete o passo 3º². Agora, para baixar o texto, de forma a deixá-lo centrado com a imagem, você vai dar alguns parágrafos entre o [td] e o texto.

Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[td]




           Nabo demaaiiss![/td]
[/tr]
[/table]

Resultado:





           Nabo demaaiiss!



Para adicionar uma coluna, você coloca outro [tr] e outro [/tr] entre o [/tr] e o [/table], não se esquecendo que tem de colocar um [td] e um [/td] por cada imagem/texto entre eles.


Ficando assim:

[table]
[tr]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[td][img]http://imgfz.com/i/4Pw8YpH.jpeg[/img][/td]
[/tr]
[tr]
[td]Alexandre[/td]
[td]Caetano[/td]
[/tr]
[/table]



Resultado:

Alexandre
Caetano



Você pode colocar mais do que duas imagens, basta repetir o passo 3.

Caso queira aumentar ou diminuir o tamanho da imagem, aconselho ler: [GUIA] Tamanho da imagem no seu tópico/perfil

Se achou confuso e ficou com alguma dúvida, é só perguntar, estarei ajudando no que puder.


« Última modificação: 14 de Abril, 2021, 02:28:57 pm por Alexandre Caetano »


15-10-2019



Offline Jefferson Churchill


  • Usuario
  • Legendary Member
  • ******

  • Posts: 3175
  • Respeito: +613/-655
  • Faça o bem para o mundo e o bem voltará para você.
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #1 Online: 13 de Agosto, 2018, 07:12:30 pm »
Boa meu parceiro, vai ajudar muitos. Mesmo que tenha outro, esse tá mais organizado sem dúvidas.

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #2 Online: 13 de Agosto, 2018, 07:19:46 pm »
Boa meu parceiro, vai ajudar muitos. Mesmo que tenha outro, esse tá mais organizado sem dúvidas.

Muito obrigado man.


15-10-2019



Offline Jhullio Schossler


  • Usuario
  • Hero Member
  • *****

  • Posts: 1412
  • Respeito: +247/-339
  • .........
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #3 Online: 13 de Agosto, 2018, 08:27:24 pm »
boa mano, eu tava procurando como fazer isso pois eu ja tinha esquecido, vlw ai +1
........

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #4 Online: 13 de Agosto, 2018, 08:32:04 pm »
boa mano, eu tava procurando como fazer isso pois eu ja tinha esquecido, vlw ai +1

Obrigado, retribuído.


15-10-2019



Offline Kayke Bettelheim


  • Usuario
  • Hero Member
  • *****

  • Posts: 2382
  • Respeito: +542/-185
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #5 Online: 13 de Agosto, 2018, 08:35:16 pm »
Legal, alguns dias atrás tive que editar em um programa pra ficar assim e.e

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #6 Online: 14 de Agosto, 2018, 09:19:47 am »
Legal, alguns dias atrás tive que editar em um programa pra ficar assim e.e

Obrigado, também já fiz o mesmo, mas assim fica muito mais prático.


15-10-2019



Offline Piloto Feemdeus


  • Usuario
  • Legendary Member
  • ******

  • Posts: 6096
  • Respeito: +4036/-1093
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #7 Online: 14 de Agosto, 2018, 01:32:19 pm »
Muito bom guia, +1
Está de parabéns! Ficou bem organizado.

Offline Samantha Havilliard


  • Usuario
  • Legendary Member
  • ******

  • Posts: 4903
  • Respeito: +1126/-512
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #8 Online: 14 de Agosto, 2018, 02:17:15 pm »
Esses dias atrás tinha alguém tentando criar como se fosse uma mensagem e o avatar do lado, esse guia poderia ter ajudado ele, bom guia!

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #9 Online: 14 de Agosto, 2018, 02:42:06 pm »
Muito bom guia, +1
Está de parabéns! Ficou bem organizado.

Muito obrigado, fiz o melhor que pude. +1 retribuído

Esses dias atrás tinha alguém tentando criar como se fosse uma mensagem e o avatar do lado, esse guia poderia ter ajudado ele, bom guia!

Obrigado, se não me engano eu vi esse tópico mas ainda não sabia como fazia.


15-10-2019



Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #10 Online: 14 de Agosto, 2018, 03:29:47 pm »
Atualizado, etapas 4 e 5 adicionadas.


15-10-2019



Offline Jeniffer Dias


  • Usuario
  • Hero Member
  • *****

  • Posts: 1585
  • Respeito: +167/-360
  • Conta off.
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #11 Online: 14 de Agosto, 2018, 03:34:23 pm »
Essa é boa, +1.

Offline Alexandre Caetano


  • Usuario
  • Hero Member
  • *****

  • Posts: 1161
  • Respeito: +468/-105
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #12 Online: 14 de Agosto, 2018, 03:38:42 pm »


15-10-2019



Offline Heron Maxine


  • Usuario
  • Legendary Member
  • ******

  • Posts: 3366
  • Respeito: +556/-329
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #13 Online: 14 de Agosto, 2018, 09:03:59 pm »
Boa meu amigo.
Apenas para forúm k.

Offline Hakyn Sadek


  • Usuario
  • Hero Member
  • *****

  • Posts: 2546
  • Respeito: +380/-152
  • Em Pé e a ordem
    • Ver perfil
Re:[Guia] Como colocar imagens lado a lado
« Resposta #14 Online: 14 de Agosto, 2018, 09:09:27 pm »
Boa guia, estava precisando ((+1))