Post sobre |Dicas blog, imagem, Pc windows

Texto e imagem sobre imagem e Div com Html e Css


Colocar texto sobre imagem e div



Vou dar dicas sobre posicionar div e imagens uma sobre a outra, e texto sobre imagem, numa posição pré estabelecida, usando CSS e HTML e DIVs quando necessário.


É algo difícil de explicar e aprender, é bom que você já tenha uma noção de Css e Html, por isso criei outros Exemplos de imagem sobre imagem e códigos, para um blog é um pouco diferente do que seria página individual de um site, pois em sistemas de blogagem fica difícil fazer a imagem ou DIV ficar sobreposta fora do post em uma única página. Se quisesse que uma DIV ou imagem ficasse sobre as outras no blogger talvez seria indicado fazer isso diretamente no html e isso afetaria todas as páginas.

Não sei como isso se comporta em um feed, não testei, mas acredito que ele vai ficar parecido, ou não, pois isso poderia afetar a "transparência" de um site como o FeedBurner. O que quero dizer é que um editor mal-intencionada poderia fazer um elemento oculto em seu artigo ficar visível no feed.

Muitas vezes será preciso criar uma DIV, como para o efeito acima, é bom atentar com a cor dela para contrastar com fonte, poderia ter usado a imagem como background, mas seria para os sites de busca como se não usasse a imagem, se vai ter trabalho pra fazer algo deve mostrar pra eles, mais um pontinho, se a imagem é importante, claro que depende da situação.

No código Html desse artigo(post), as imagens que você vê acima estão abaixo dessas palavras, e fora dessa DIV com borda azul, da para ter uma noção da "força" de position:absolute e do z-index usado no style Css de cada elemento, porém, é bom usar apenas em últimos casos; tanto pela dificuldade, alguns navegadores não atualizados, questões de acessibilidade, etc.

Imagem 2
imagem 2 exemplo
Imagem exemplo 3Imagem 3 Imagem exemplo 4Imagem 4 Imagem 5
imagem 5 exemplo

Texto sobre imagens

A forma mais fácil de colocar um texto sobre uma imagem seria usando a imagem como fundo(background), mas também pode ser colocada uma imagem e após ela uma DIV contendo o texto, a DIV com position:absolute e tags de alinhamento que posicione essa DIV em cima da imagem ou de outro elemento. Também é bom "cercar" todos esses elementos usando uma DIV com position:relative;
Veja exemplo abaixo:
<DIV style='position:relative;'>
<img src='http://foitestado.com/foitestado.png' style='position:absolute; top:3px; left:1px;' />
<DIV style='position:absolute; top:0px; left:6px; color:red;'> O texto que vai se sobrepor a imagem, é esse
</DIV>
</DIV>
Resultado:


O texto que vai se sobrepor a imagem, é esse


Entender melhor
Para quem não entende muito, se observar no código acima, existem duas DIVs, uma cerca todo os elementos e a outra cerca o texto, no resultado não se enxerga as DIVs, Quando escrevo cercar é quase como isso:
<DIV> assim inicia uma div, no html esse texto estaria cercado(dentro) por uma DIV, ela começou e termina/ fecha assim </DIV>

Dentro de uma DIV pode haver outras, elas servem para organizar, manter as coisa no seu local, posição, etc.

Efeito texto sobre imagem

O que fiz logo acima foi adicionar uma div com posição relative, "isso é como dizer: ali mesmo", e dentro dela uma imagem com posicionamento style topo a 3 pixel e lado esquerdo(left) e, após nova div(com texto dentro) e posicionamento próximo ao da imagem, porém, a segunda DIV com posição absolute, como o da imagem, que obriga ambos a ficar quase no mesmo lugar, a DIV(com texto) ficou sobre a imagem pelo simples fato de ser colocado após a imagem e ser obrigado por position:absolute ... Depois do texto foram fechadas as duas DIVs assim </DIV></DIV>
Entender os códigos Html e Css aqui usados
Qualquer caracter errado ou faltando pode fazer com que o código não funcione.

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

img É tag Html para imagem, diz ao navegador que isso será uma imagem.
src=' Indica que você vai escrever o endereço web onde está hospedada a imagem

style=' Indica que haverá estilo(regras ou qualidades) css, valido para a imagem, div, etc, ou seja, entre as aspas está as "regras" para para aquele elemento, podem ser muitas qualidades(estilos).

/> Caracteres para terminar elemento Html, Observe que há uma diferença em fechar uma div e uma imagem, isso porque a div e outros elementos em html podem carregar coisas como texto dentro deles e a imagem é só ela e suas "regras" que ela deve respeitar.
Códigos Css de posicionamento position: absolute;
Como o nome sugestiona faz um elemento ter uma posição absoluta, mas é bom usar propriedades de posicionamento, que vão indicar o local dentro da DIV que o contém(que a cerca), porém, o elemento que contém position: absolute pode ser forçado para fora de uma DIV, se no exemplo acima fosse colocado position: absolute; top: 900px na imagem, ela poderia estar aqui encima do texto, seria como se tivesse saido daquela div.
Propriedades de alinhamento/posicionamento:
top: 3px; Topo, a 3 pixel do topo, o pixel pode ser alterado de acordo com a vontade.

left: 6px; Esquerdo, a 6 pixels do lado da borda

right: 0px; Lado direito

bottom: 4px; Parte de baixo, inferior

Em um mesmo elemento não funcionam juntas top e bottom, assim como não funcionam juntas left e right e os números você pode alterar para conseguir a posição.

position:relative; é uma posição apartir do local onde o elemento foi criado, se fosse inserir uma DIV com position:relative aqui, ela estaria aqui, porém, no mozilla poderia ser usado apenas as propriedades top e bottom, para jogar ela mais acima ou abaixo desse ponto, mas isso deve ser em casos extremos, perceba que, se adicionasse position:relative; bottom:400px em uma div ou imagem criado logo abaixo desse texto, eles iriam subir, pois a base deles é aqui, age de forma diferente do absolute que se baseia na div que o cerca.

Finalizando, no código desse artigo, essa imagem de protesto está no início, pouco abaixo do título, mas ela possui bottom:0 e position:absolute Ela deveria ser a Imagem 1, claro que não preciso dar nome e número a ela.


16 comentários:

Texto e imagem sobre imagem e Div com Html e Css2009-11-21T18:25:00-02:00
  1. Anônimo21/4/10

    como por fotos junto a biografia ou por fotos ao enves de escrever

    Responder
  2. Anônimo

    Você usa o html para escrever e criar elementos como Div e imagem, e, usa o Css(Cascading Style Sheet) para estilos e organização de textos e elementos.

    Pela sua pergunta você quer saber sobre algo muito específico, para isso tenta aqui, usa a categoria designer e explica bem sua duvida.
    Ou aprender um pouco mais sobre Html e Css, começando do básico, não aqui no blog.

    Responder
  3. Anônimo22/9/11

    Muito bom !!!! Gostei !
    Parabéns !

    Responder
  4. Estou usando essa aplicacao para enviar email de saudação para clientes que se cadastram no site.

    - No fundo uma imagem personalizada. Nos navegadores fica show de bola, nos gerenciadores de email como gmail e yahoo, fica show tbm. Mas no outlook da microsoft os textos nao ficam sobre a imagem, descem todas para o final da imagem.
    Tem como corrigir?
    Grato.

    Responder
  5. Nocao Net

    Não sei, porque isso é um problema daquele software, se mudar algo poderá não funcionar nos outros, pode tentar descobrir qual a porcentagem da população que usa o outlook, não tenho tenta ver com alguém que comprou um Pc com o windows vista e vê se esse programa vem como padrão para abrir email, se poucas pessoas usam ele, nem é o caso de preocupação.

    *Você também pode tentar usar background-image, acho que pode ser mais aconselhável para isso, uma vez que a maioria dos emails que recebo usam isso.

    Responder
  6. Valeu Amigo!!!!!!!!!!!
    Me salvou o dia!!!!!!!

    Responder
  7. Obrigado pelo post , foi muito util.
    Ótimo blog .(:

    Responder
  8. Adorei a sua explicação e pensei que resolveria um problema que encontrei ao customizar um blog de uma amiga, mas não consegui encontrar a solução para arrumar o texto que está sobreposto à imagem da postagem. Já estou desesperada! Poderia me ajudar?

    Responder
    ...Respostas
    1. Nem tudo é Html, pode ser uma imagem de fundo mau posicionada ou outras inúmeras coisas. Se é algo muito complicado você pode contratar ajuda de pro-blogger, clique

  9. Lizandro, Eu novamente, agora com o assunto propriamente do post:seria possível você exemplificar imagem sobreposta à imagem - conforme você exemplificou com a Imagem/texto ?

    Outra questão:é possivel eliminar um fundo de uma imagem que baixamos da internet - conforme o exemplo do link abaixo:https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcReM14LAUQwIoZhBeUrH5UZgWLUXD05aoyFSDmBYkhboNVpuGNq Gostaria que ficasse o logo sem o fundo branco - é possível ? Miz vez grato !! abraço Paulinho Meira

    Responder
    ...Respostas
    1. Criei esse post para tentar explicar position absolute, o uso desse tipo de coisa é muito raro, mas eu uso algo similar aqui no blog para ter a lateral direita que na verdade(no código) está abaixo do post. Tem uma página com mais exemplos aqui e por ser algo complicado não tem como eu explicar mais, se eu tentasse fazer eu bateria nas mesmas teclas e provavelmente reescreveria o que já está escrito.

      Quanto a tirar fundo de imagem, clique e veja um programa grátis para isso, porém é um pouco complicado de usar e sua imagem é jpg com uma sombra opaca e isso pode não ficar muito bom.

    2. Obrigado Lizandro pelas respostas. Se me permite novamente, uma pergunta "fora do prumo" - Estou em sérias dificuldades com a Flickr - Preciso saber se construindo um blog na Blogspot há limites de imagens ? Na Flick estou com 2250 fotos, porém mudei a URL e agora todas as fotos do blog não aparecem. E aí me veio a idéia de postar as fotos diretamente do Blogger, por isso da pergunta:Há limites ou não ? Obrigado e um Abraço, Lizandro !! Paulinho Meira

    3. Usuários do Blogger tem um espaço de 1 Giga no Picasa, porém ele pode ser maior ou menor conforme tamanho das imagens ou uso do picasa ou outro serviço do Google, sugiro que leia esse post para entender mais, clique

  10. Anônimo3/7/13

    ;) Obrigado.

    Responder
  11. Valeu! Estava "matutando" aqui como colocar um texto em cima de umas imagens, mas você facilitou tudo para mim! Continue assim!

    Responder
  12. Anônimo20/10/13

    Obrigado, ajudou muito !!

    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!