Post sobre |Dicas blog, imagem, Pc windows

Div e imagem lado a lado e do texto


Vou mostrar como posicionar imagens, lado a lado, colocar as imagens do lado do texto e centralizada, usando CSS e HTML, diretamente no texto ou post.
As imagens são gif, gostou, quer ver mais, fazer online...?

Imagem 1
por imagem no lado esquerdo, Imagem exemplo 1

Imagem 2
colocar imagem no lado direito, Imagem exemplo 2
Como pode perceber já coloquei as posicionadas e um número acima da imagem para diferenciar e entender o código.
Abaixo tem uma imagem centralizada, colocar textos nas laterais dessa imagem é difícil, e pode confundir seus visitantes, esse estilo é mais usado para imagens grandes.
Imagem 3
colocar imagem no centro, Imagem exemplo 3

    Códigos css de alinhamento
  1. Imagem style="float: left;"

    Alinhamento pela esquerda, e aceita outros elementos ao seu lado

  2. Imagem style="float: right;"

    Alinhamento pela direita, e aceita outros elementos ao seu lado

  3. Imagem style="text-align: center; display: block;"

    Isso é para deixar a imagem no centro, com o uso de display:block que significa que toda a largura dentro do elemento(DIV, P, etc) onde a imagem está é para ela, não quer dizer que ela precisa ser larga, e, se pensar um pouco uma imagem no meio do texto não fica bem, mas se for uma pequena imagem basta tirar os atributos de alinhamento e "jogar" ela entre as palavras desejadas.

Para uso de pequeno texto junto com links nas imagens, como acima, o link deve ter o mesmo estilo Css de alinhamento e tamanho que a imagem.

Exemplo de código Html e css para publicar imagem

<img src="http://foitestado.com/images/sob.gif" style="float:right;" />Seu texto aqui e uma div com clear:both
Pra quem sabe pouco sobre Html, tudo deve ser respeitado, Aspas, Sinais, etc. Seja observador, depois de algumas tags tem um sinal de igual, depois tem abre Aspas, atributos(endereço, estilo, etc) e fecha Aspas.

< caracter para iniciar um elemento(objeto) Html, informa ao navegador que haverá um elemento Html.

img é tag Html para imagem, informa ao navegador que isso será uma imagem.

src=" indica que você vai escrever o endereço web onde está hospedada a imagem e o nome dela.

style=" indica que haverá estilo(regras ou qualidades) css, nesse caso para a imagem, ou seja, entre as aspas está as "regras" para a imagem, podem ser muitas, mas nesse caso mostrei apenas uma que indica o alinhamento da imagem e para ela aceitar o que couber do lado dela.

/> caracteres para terminar elemento Html

Primeiro coloca a imagem com float e depois o texto e para separar de outros elementos é bom colocar uma DIV com clear:both assim: <div style="clear:both"></div>

Imagens lado a lado

Para isso basta tirar todos os atributos CSS referentes ao alinhamento da imagem.

Se aparecer barra de rolagem em div é em função do estilo desse blog, não tem relação com os exemplos, ignore.

Para evitar confusões vou mostrar alguns exemplos.

É bom você ver com mais de um navegador

Para posicionar imagens lado a lado, não é necessário usar float, e nem display:block;

Vou colocar duas DIVs com borda verde, e dentro de cada, as mesmas imagens, porém, na segunda DIV cada uma das imagens tem float: left;



O texto fica após as imagens, sem problemas

Observe que usei a mesma sequência de imagens acima, dependendo do navegador, depois da primeira linha começa a confusão, até o texto que coloquei após as imagens pode se dividir. Uma DIV vazia com clear:both; resolveria o problema do texto e até das imagens ou esse tipo de coisa.

Parágrafo, imagens ou div "saltando" para fora de outra DIV, use clear:both; no final ou entre as DIVs

Até o texto pode ficar perdido

Divs lado a lado

Um pouco diferente de uma imagem, a DIV, para ficar ao lado de outra pode ser necessário o uso de float, e varias coisas podem causar problemas, a altura de uma delas, pode impedir a posição de outra, o não uso de atributos. Resolvi colocar uns exemplos.

Apelidei as DIVs com um número, que foi colocado dentro delas apenas como texto, as DIVs 1(borda azul) contém as outras dentro dela, e os problemas e algumas soluções podem ser observados abaixo.

DIV 1

2

3

4
5 Apenas clear: both;

6

7

8 Usar float: ; em algumas DIVs, é bom aprender associar clear:both;

Ver o código e exemplo melhor.

A div 5 acima poderia ser só com clear: both; Para ficar invisível aos olhos do visitante, ela é apenas para "pular uma linha" e fazer as outras divs ficarem abaixo dela, e não acontecer o que acontece abaixo.

É bom que a ultima div tenha clear: both;

Alguns blogs já tem uma class chamada clear em seu CSS nesses basta criar uma div assim: <div class="clear"></div>

Erro no Css de Divs é problema

Essa DIV 1 abaixo, no Html todas as outras estão dentro dela, mas ela não tem nem uma DIV com clear:both; e o fato de as outras DIVs de 2 à 7 terem um float: left; Dependendo do navegador, faz com que ela pareça terminar antes, as outras DIVs "saem fora" da DIV 1

DIV 1

2

3

4

5
"trancou?"

6

7

Isso derruba algumas duvida em relação a imagens e Div que não obedecem, não ficam onde a gente quer, e se você ver esse post com outros navegadores vai perceber alguma diferença, mas pode ter certeza que muitas vezes uma coisa fica fácil em um e difícil de corrigir em outro.

Um problema que você poderá ter em relação ao link numa imagem com algum tipo de float, é ele não ficar sobre a imagem, por isso é bom colocar a mesma largura e alinhamento para os dois.

A imagem mostrei o código, acima, agora o código da imagem está com uma borda azul só para você diferenciar do código do link.<A HREF="http://SeuSite.com/blog" style="float:right; width:50px;" >
<img src="//foitestado.com/images/sob.gif" style="float:right; width:50px;" />
</A>

<A HREF=" Iniciar código de link

http://SeuSite.com/blog Substitua por um endereço de página da web que abre quando clicar no link

Nunca escreva link com www. no inicio, em um navegador da erro, o nome acima é apenas ilustrativo(exemplo)

style="float:right; width:50px" Estilo Css = alinhamento e largura

> fecha inicio do link

</A> fim do link

Resultado do link acima, com o endereço modificado, ao lado.

Um atributo(estilo css) muito bom para adicionar em imagem é padding e DIVs margin também, border, mas isso é fácil de encontrar, não tem erro, basta uma busca na web...

15 comentários:

Div e imagem lado a lado e do texto, usando Html e Css2009-05-16T15:37:00-03:00
  1. Gostei muito, vou testar, estou mudando meus dois blogs e realmente, necessitava de informações de mudança direto no html. Valeu mesmo

    Responder
  2. valeu o post Deus abençõe em tudo o que você fizer.

    Responder
  3. Cara boa matéria, gostei muito pois estava com esse problema e ainda não tinha conseguido solução valwu mesmo!

    Responder
  4. E sem espaço entre elas, como se fosse(VISUALMENTE!!!) um mapa de imagens, mas na verdade, imagens separadas compondo um fundo? Dá para fazer isso no Blogger?

    Responder
  5. Obrigado pelos comentários

    Luck®
    Você pode deixar as imagens lado a lado e realmente encostadas, bastaria adicionar ao Css delas padding:0; border:0; margin:0; Usei bordas e espaços aqui apenas para dar destaque e mostrar a localização das imagens.

    Você pode fazer quase tudo no Blogger, basta encontrar o caminho certo para isso, se você pretende fazer um tipo de quadro parecer com imagens de fundo seria até fácil, deve-se pensar na utilidade disso e em tornar leve para seu blog, mas, não sei para que você pretende usar isso, nesse caso fica difícil dar uma opinião.

    Responder
  6. Oi estou com uma dificuldade no meu blog, pois utilizo o hack "leia mais" e para melhorar a aparência da home, coloquei uma imagem. Mais quando clicamos em "leia mais" e abre a postagem inteira, a imagem também aparece, como na home.
    Segue o Link da home:http://img46.yfrog.com/i/amostra01.png/

    e o link da postagem aberta:
    http://yfrog.com/4vamostra02p

    Você saberia como resolver esse problema?

    Desde já agradeço.

    Responder
  7. Thyego Ferraz

    Infelizmente não conheço esse hack e estou sem tempo para tentar entender sobre ele, você deveria tentar ver se tem alguma coisa relacionada onde você pegou o código dele.

    Se você está começando seu blog ou usou pouco esse hack e principalmente se ele exige um script grande(pesado) você pode pensar na opção de link "leia mais" do próprio blogger

    Responder
  8. Anônimo15/3/10

    Este comentário foi removido por um administrador do blog.

    Responder
  9. Anônimo15/4/10

    gostaria de saber como faço pra por uma imagem do lado da outra em uma tabela !

    Responder
  10. Anônimo

    Se você deseja trabalhar com html seria bom aprender trabalhar com DIVs e Css, o básico desses dois não é um bicho de 7 cabeças, nesses casos table já está ficando fora de uso, mas, para sua pergunta você pode tentar criar uma table e, uma tr e colocar cada imagem dentro de uma td ou todas dentro de uma td, se precisar pode tentar adicionar style="float:left;" nas imagens.

    Você deve fazer testes para ver como as coisas funcionam, crie sua página qualquer.html salve em seu Pc e abra com seu navegador.

    Responder
  11. Anônimo27/4/10

    ----------!
    imagem ! texto
    ! texto
    ----------


    eu gostaria de saber como posso fazer isto em codigo html.

    Responder
  12. Caramba!!!

    Impresionante como vocês salvam minha vida toodos os dias ^^

    Essa postagems nem era o que eu queria, mas graças a ela consegui mudar um estilo no meu blog que fez toda a diferença *-*

    Queria dizer que amo vocês e posso não comentar em todas as postagens que me ajudam, mas vocês ajudam demaaaaaais *-* Muito obrigado mesmo por tudo ^^ Parabéns!

    Responder
  13. Anônimo15/9/11

    Lindo esse post me ajudou muito!!! Parabéns!

    Responder
  14. Muito Bom, simples e direto:do jeito que eu precisava!

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!