Leave fixed elements on a static page

Asked

Viewed 5,856 times

0

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

html css

3 answers

3

The search css tag 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>

1

I don’t know if this helps much, but if you make a website using bootstrap this site gets formatted for devices like smartphones and tablets and automatically adjusts all page elements when the page is redeemed. In the background bootstrap uses a standard css that helps you make a website faster.

If you really want to read more about bootstrap go to the following links http://getbootstrap.com/ http://www.w3schools.com/bootstrap/

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

  • Yes, I’ve heard of Amadeu, I use it, too, this doubt has arisen just now for amazing ! thanks for your time!

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 it in your browser and see if it satisfies your doubt, hope to have helped!

  • Just pointing out that this will be done in the CSS of the question page!

  • That’s the way it was, thank you very much!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.