Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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. :)
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
.
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 :)
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.
>
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 :)
>
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>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 :)
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?
Tenta esses passos:
Acho que isso funciona :grin:
Atenciosamente,
Pedro HSB :D
já tentou display:block no elemento do texto