How to separate the title and content in html?



  • <!DOCTYPE html>
    <html>
    <head>
        <title> Meu teste </title>
        <meta charset="utf-8">
        <style> 
            #titulo {
                background-color: blue;
                position:fixed;
            }
    
            </style>
    </head>
    <body>
    
    
      <h1 id="titulo"> Meu titulo </h1>
    
    
      <div id="conteudo">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit a libero pretium fringilla in vel eros. Fusce vitae metus sit amet nisi consectetur semper. Duis et sem vitae dolor iaculis eleifend in vel lorem. Morbi egestas blandit turpis, dignissim vulputate metus eleifend non. Phasellus consequat erat eget justo ullamcorper, eu accumsan lacus facilisis. Donec hendrerit non nibh scelerisque aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam posuere massa ac porttitor aliquam. Vivamus tempus nibh mi. Duis eros erat, fringilla vitae ligula quis, mollis laoreet diam. Quisque tempus dolor in risus vehicula interdum. Sed suscipit leo a sagittis pellentesque. Nunc sed vulputate dolor. Proin convallis iaculis condimentum. Suspendisse finibus feugiat nisl sollicitudin dapibus. Nunc euismod, felis ut cursus scelerisque, lectus lorem sollicitudin nunc, vel posuere diam erat eget leo. </p>
     </div>
    </body>
    </html>
    

    I was looking to create a menu that moves along with the page when we navigate the site by moving with the mouse, but when adding the position:fixed the content is inside the title. How do I leave everything in order, like, the title up there, and the content down without one getting inside the other? What tag do I use?



  • There you need to add several styles, both in the title when on the page:

    html, body{
       margin: 0;
       padding: 0;
    }
    

    #titulo {
    background-color: blue;
    position:fixed;
    display: block;
    width:100%;
    margin: 0;
    }
    #conteudo{
    padding-top: 40px;
    }

    <h1 id="titulo"> Meu titulo </h1>

    <div id="conteudo">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit a libero pretium fringilla in vel eros. Fusce vitae metus sit amet nisi consectetur semper. Duis et sem vitae dolor iaculis eleifend in vel lorem. Morbi egestas blandit turpis, dignissim vulputate metus eleifend non. Phasellus consequat erat eget justo ullamcorper, eu accumsan lacus facilisis. Donec hendrerit non nibh scelerisque aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam posuere massa ac porttitor aliquam. Vivamus tempus nibh mi. Duis eros erat, fringilla vitae ligula quis, mollis laoreet diam. Quisque tempus dolor in risus vehicula interdum. Sed suscipit leo a sagittis pellentesque. Nunc sed vulputate dolor. Proin convallis iaculis condimentum. Suspendisse finibus feugiat nisl sollicitudin dapibus. Nunc euismod, felis ut cursus scelerisque, lectus lorem sollicitudin nunc, vel posuere diam erat eget leo. </p>
    <br /><br /><br /><br /><br /><br /><br />
    </div>

    O padding-top may vary according to the expected height of your title.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2