Leave fixed elements on a static page [closed]

0

How do I fix a button or text? For example, in a background already with the background drawn, in the case would it just fix the text in a specific part of the background and when resizing the browser it accompanies with the background?

    
asked by anonymous 06.10.2015 / 07:56

3 answers

0

You can give a static size to the content you want to center and place automatic margins (left and right), so the browser will be responsible for centralizing this content, see an example:

<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>

Save this code and run on your browser and see if it satisfies your question, I hope I have helped!

    
06.10.2015 / 16:01
2

The tag you are looking for in css is position fixed.

Example:

<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>

    
06.10.2015 / 11:25
1

I do not know if this helps a lot, but if you make a site using bootstrap this site gets formatted for devices like smartphones and tablets and automatically adjusts all the elements of the page when the page is redeemed. In the background the bootstrap uses a default css that helps you make a site faster.

If you really want to read more about bootstrap go to the following links link link

Of course you can do the same without directly using bootstrap. All of this is done in css mostly.

    
06.10.2015 / 11:21