Texto em cima de imagem sem alterar o lugar em outro monitor

[jonathanrn 2]

Boa tarde galera

estou estudando html e css e fui treinar texto em cima de imagem e percebi q o texto muda de lugar quando se abre o codigo em outro tamanho de monitor, como deixo o posicionamento fixo? desde ja agradeço. :)

[Guilherme Souza Santos 6]

já tentou display:block no elemento do texto

[wilnet 92]

Olá jonathanrn, blza!

 

Não sei se é a melhor solução...

 

Mas veja se é isso que deseja.

 

 

CSS

<style>
#imagem {
width: 338px;
height 450px;
}

#texto {
position: absolute;
margin-top: -100px;
color:#FFF;
font-size:20px;
}
</style>

HTML

<img id="imagem" src="http://thumbs.dreamstime.com/z/woman-embrancing-her-puppy-dog-pets-people-pet-adoption-playing-little-pet-outdoor-hugging-lovingly-embraces-47488697.jpg"/>
<div id="texto">Texto que fica sobre a imagem</div>

Espero ter ajudado,

 

vlw

[pedrohsb 6]

Olá jonathanrn,

 

Você pode usar position: fixed, que deixa o texto fixo em um lugar da página.

 

Não sei se poderá adiantar, mas ao invés de usar img para imagens, tente usar background: url(), a imagem fica atrás do texto, como plano de fundo.

 

Qualquer dúvida é só perguntar! :thumbsup:

 

Atenciosamente,

Pedro HSB

[jonathanrn 2]

.

já tentou display:block no elemento do texto

 

 

Olá jonathanrn, blza!

 

Não sei se é a melhor solução...

 

Mas veja se é isso que deseja.

 

 

CSS

<style>
#imagem {
width: 338px;
height 450px;
}

#texto {
position: absolute;
margin-top: -100px;
color:#FFF;
font-size:20px;
}
</style>

HTML

<img id="imagem" src="http://thumbs.dreamstime.com/z/woman-embrancing-her-puppy-dog-pets-people-pet-adoption-playing-little-pet-outdoor-hugging-lovingly-embraces-47488697.jpg"/>
<div id="texto">Texto que fica sobre a imagem</div>

Espero ter ajudado,

 

vlw

 

 

Olá jonathanrn,

 

Você pode usar position: fixed, que deixa o texto fixo em um lugar da página.

 

Não sei se poderá adiantar, mas ao invés de usar img para imagens, tente usar background: url(), a imagem fica atrás do texto, como plano de fundo.

 

Qualquer dúvida é só perguntar! :thumbsup:

 

Atenciosamente,

Pedro HSB

Desculpa Galera não expliquei direito,

então criei uma tabela com 3 linhas e 1 coluna centralizada e a 2º linha (do meio) tem uma imagem dentro dela, qual o melhor codigo pra escrever em cima dessa imagem sem desconfigurar sua posiçao em outro tamanho de monitor?

Desde ja agradeço galera :)

[William Bruno 1501]

Dá um position: relative no elemento pai da imagem

 

se não, o absolute vai procurar o body, e ai acontece o que vc descreveu.

[pedrohsb 6]

 

Desculpa Galera não expliquei direito,

então criei uma tabela com 3 linhas e 1 coluna centralizada e a 2º linha (do meio) tem uma imagem dentro dela, qual o melhor codigo pra escrever em cima dessa imagem sem desconfigurar sua posiçao em outro tamanho de monitor?

Desde ja agradeço galera :)

 

Eu acho que a melhor propriedade para sua situação é a background: url() ou background-image: url().

 

De acordo com o que você disse, você deve adicionar essa propriedade (código) não em <table>, mas sim em <td>, que adiciona o plano de fundo só em um certo espaço da tabela.

 

Se você não quiser CSS, pode usar com HTML mesmo: background="banner.png".

 

Espero ter ajudado!

Qualquer dúvida é só perguntar! :thumbsup:

 

Atenciosamente,

Pedro HSB :)

[jonathanrn 2]

 

Eu acho que a melhor propriedade para sua situação é a background: url() ou background-image: url().

 

De acordo com o que você disse, você deve adicionar essa propriedade (código) não em <table>, mas sim em <td>, que adiciona o plano de fundo só em um certo espaço da tabela.

 

Se você não quiser CSS, pode usar com HTML mesmo: background="banner.png".

 

Espero ter ajudado!

Qualquer dúvida é só perguntar! :thumbsup:

 

Atenciosamente,

Pedro HSB :)

 

 

Dá um position: relative no elemento pai da imagem

 

se não, o absolute vai procurar o body, e ai acontece o que você descreveu.

Não consegui galera, vou colocar o codigo pra ajudar, esse texto q esta na parte fosca da imagem tem q ficar centralizada "dentro da parte fosca"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>



</head>

<body>

<table cellpadding="0" align="center" width="600" border="1" bgcolor="grey" cellspacing="0"  >
	<tr> 
    	<td> sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas</td>
    </tr>
    
    <tr> 
    	<td c align="right" background="http://i.imgur.com/axwMjlv.png" height="445">
        
        	<div >PRIVACIDADE<br /> NA HORA MAIS<br /> GOSTOSA DO<br /> DIA: O SEU<br /> BANHO.</div>
        </div>
        </div>
        <br /><br />
        
        <li>Padrão já consagrado</li> 
          
          <li>Privacidade</li>
          
          <li>Beleza</li>
          <li>Fácil Limpeza</li>
      </td>
  </tr>
    
    <tr> 
    	<td width="600"> asdaasdaasdaasdaasdaasdaasdaasdaasdaasdaasdasdaasdaasdaa</td>
    </tr>
        
</table>


</body>
</html>

[pedrohsb 6]

Tenta isso:

        <div class="texto" style="width: 220px; text-align: center">
         <div>PRIVACIDADE<br>NA HORA MAIS<br>GOSTOSA DO<br>DIA: O SEU<br>BANHO.</div>
         <br><br>
           <li>Padrão já consagrado</li> 
           <li>Privacidade</li>
           <li>Beleza</li>
           <li>Fácil Limpeza</li>
         </div>

Acho que irá ajudar! :grin:

 

Você declarou em seu documento que ele é HTML5 com <!DOCTYPE html>, então você não precisa fechar a tag <br> como você fez em seu código:

<div >PRIVACIDADE<br /> NA HORA MAIS<br /> GOSTOSA DO<br /> DIA: O SEU<br /> BANHO.</div>

O fechamento da tag <br> só é valido quanto o documento for XHTML.

Então, nunca use <br /> em documentos HTML5. ;)

 

Ah, outra questão:

Você usou <br><br> para deixar um espaço maior entre "Privacidade na hora..." e "Padrão já consagrado...".

 

Uma dica é aplicar uma div no "Padrão já..." e adicionar a propriedade margin-top, que adiciona um espaço do tamanho que você quiser sem ficar digitando <br><br><br>...

 

Veja como fica o código com essas melhorias, que chamamos de otimização:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>
 <table cellpadding="0" align="center" width="600" border="1" bgcolor="grey" cellspacing="0"  >
  <tr><td>sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas</td></tr>

  <tr> 
   <td align="right" background="http://i.imgur.com/axwMjlv.png" height="445">
    <div class="texto" style="width: 220px; text-align: center">
     <div>PRIVACIDADE<br>NA HORA MAIS<br>GOSTOSA DO<br>DIA: O SEU<br>BANHO.</div>
      <div style="margin-top: 40px">
       <li>Padrão já consagrado</li> 
       <li>Privacidade</li>
       <li>Beleza</li>
       <li>Fácil Limpeza</li>
      </div>
    </div>
   </td>
  </tr>

  <tr><td width="600"> asdaasdaasdaasdaasdaasdaasdaasdaasdaasdaasdasdaasdaasdaa</td></tr>   
 </table>
</body>
</html>

Não fica melhor para entender?

 

Lembre-se dessas dicas. Seu site ficará muito mais bonito, moderno e de fácil manutenção. :D

 

Espero que tenha ajudado!

Se ajudei, lembre-se de clicar em "Dar ponto positivo de reputação", na setinha verde. :thumbsup:

 

Atenciosamente,

Pedro HSB :)

[jonathanrn 2]

 

Boa Pedro HSB isso q eu queria, mas esse html tambem vai dentro de e-mails e alguns como o g-mail nao aceita a tag style tem algum modo de resolver sem a tag style?

[pedrohsb 6]

Tenta esses passos:

 

1. Crie uma página em HTML com o código que você quer usar na mensagem e salve-a.
2. Depois disso, abra o arquivo para visualizar como ficou e dê Ctrl+A e Ctrl+C. Um seleciona tudo na página e o outro copia.
3. Vá na caixa de entrada, clique em "Novo Email" e no campo de escrita da mensagem, cole com Ctrl+V. Ficará igual ao HTML!

Acho que isso funciona :grin:

 

Atenciosamente,

Pedro HSB :D