Como fixar um botão ou texto? Por exemplo, em um background já com o fundo desenhado, no caso seria apenas fixar o texto em uma parte especifica do background e ao redimensionar o navegador ele acompanhasse com o background?
3 Respostas
A tag que procura de css é position fixed.
Exemplo:
<html>
<head>
<title>texto fixo</title>
<style>
.fixo{
position : fixed;
width : 250px;
height : 100px;
left : 50%;
margin-left : -125px;
top : 50%;
margin-top : -50px;
background-color: black;
color : white;
}
</style>
</head>
<body>
<div class="fixo">
Este texto tem:<br>
width de 250px<br>
height de 100px<br>
ficará sempre no meio
</div>
<div style="height:1000000px"></div><!-- div para criar scroll -->
</body>
Eu não sei se isto ajuda muito, mas se você fizer um site usando bootstrap esse site fica formatado para equipamentos como smartphones e tablets e ajusta automaticamente todos os elementos da pagina quando a página é redimêncionada. No fundo o bootstrap utiliza um css padrão que ajuda a você a fazer um site mais rapidamente.
Se realmente quiser ler mais sobre bootstrap acesse os seguintes links http://getbootstrap.com/ http://www.w3schools.com/bootstrap/
Claro que você pode fazer o mesmo sem usar directamente bootstrap. Tudo isso é feito em css principalmente.
-
Sim, já ouvi falar Amadeu, eu uso ele, também, essa dúvida me surgiu só agora por incrível que pareça ! obrigado pelo seu tempo! Commented 6/10/2015 às 15:47
Você pode dá um tamanho estático ao conteúdo que deseja centralizar e colocar margens (esquerda e direita) automáticas, assim o browser irá ficar responsável por centralizar este conteúdo, veja um exemplo:
<html>
<head>
<style type="text/css">
.content-center
{
width:30em;
height:40em;
background-color:blue;
margin-left:auto;
margin-right:auto;
padding:5em;
}
</style>
</head>
<body>
<div class="content-center">
<h1>Ficar No centro</h1>
<p>Este texto irá ficar no centro da página</p>
</div>
</body>
</html>
Salve este código e execute em seu navegador e veja se satisfaz sua dúvida, espero ter ajudado!
-
Só ressaltando que isso será feito no CSS da página me questão! Commented 6/10/2015 às 14:03
-