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 2
Como pode perceber já coloquei as imagens 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
- Códigos css de alinhamento
- Imagem style="float: left;"
Alinhamento pela esquerda, e aceita outros elementos ao seu lado
- Imagem style="float: right;"
Alinhamento pela direita, e aceita outros elementos ao seu lado
- 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:bothPra 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 rolage.m 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 perdidoDivs 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
6
7
8 Usar float: ; em algumas DIVs, é bom aprender associar clear:both;
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
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.
links nas imagens, com float
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="http://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...
Diodo!
ResponderExcluirGostei muito, vou testar, estou mudando meus dois blogs e realmente, necessitava de informações de mudança direto no html. Valeu mesmo
ResponderExcluirvaleu o post Deus abençõe em tudo o que você fizer.
ResponderExcluirCara boa matéria, gostei muito pois estava com esse problema e ainda não tinha conseguido solução valwu mesmo!
ResponderExcluirE 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?
ResponderExcluirObrigado pelos comentários
ResponderExcluirLuck®
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.
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.
ResponderExcluirSegue 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.
Thyego Ferraz
ResponderExcluirInfelizmente 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
Este comentário foi removido por um administrador do blog.
ResponderExcluirgostaria de saber como faço pra por uma imagem do lado da outra em uma tabela !
ResponderExcluirAnônimo
ResponderExcluirSe 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.
----------!
ResponderExcluirimagem ! texto
! texto
----------
eu gostaria de saber como posso fazer isto em codigo html.
Caramba!!!
ResponderExcluirImpresionante 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!
Lindo esse post me ajudou muito!!! Parabéns!
ResponderExcluirMuito Bom, simples e direto: do jeito que eu precisava!
ResponderExcluirUsei o codigo acima e funcionou perfeitamente. Adorei. Visite o meu site http://cyberfilmes.epizy.com/
ResponderExcluirMuitissimo bem explicado. Obrigado
ResponderExcluir