How to separate the title and content in html?

Asked

Viewed 97 times

0

<!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 wanted to create a menu that moves together with the page when we navigate the site moving with the mouse, however, when adding position:Fixed the content is within the title. How do I get everything in order, like, the title up there, and the content down there without one going into the other? Which tag do I use?

html css

  • Have you considered putting margin-top in the content element?

3 answers

1

There you need to add several styles, both in the title and 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>

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

0

If you want to separate from the top is just put (html):

!DOCTYPE html>
<html>
<head>
    <title> Meu teste </title>
    <meta charset="utf-8">
    <style> 
        #titulo {
            margin-top: (a sua escolha);
            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>

And ready more if you want on other sides only put margin-left(for left), margin-bottom(for down) and margin-right(for right).

0


First, you need to configure the menu (#title) to stay at the top and also on the top layer of tags (from a read on z-index). Then you need to add a space at the top of the <body> to let the text "appear" when opening your site, it may have the height greater or equal to the height of your #titulo.

I’ve suffered enough with that kind of style, they call it Sticky header css.

<!DOCTYPE html>
<html>
<head>
  <title> Meu teste </title>
  <meta charset="utf-8">
  <style>
    #titulo {
      background-color: blue;
      position: fixed;
      
      /** posicionando o titulo no topo **/
      left: 0;
      top: 0;
      height: 40px;
      /** posicionando na camada mais alta **/
      z-index: 999;
      /** adicionando estilos **/
      width: 100%;
    }
    
    body {
      /** padding da mesma altura, ou maior que o titulo **/
      padding-top: 50px;
    }
  </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>

  • Thank you man :D

Browser other questions tagged html css

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