How to separate title and content in html?

Question

How to separate title and content in html?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

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 along with the page when navigating the site by moving with the mouse, however, when adding the position: fixed the content is inside the title. How do I get everything in order, sort, the title up there, and the content down without one getting inside the other? Which tag do I use?

html css

asked by anonymous 20.12.2017 / 02:15

3 answers

1

There you have 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 depending on the expected height of your title.

20.12.2017 / 02:31

0

If you want to separate from above 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>

20.12.2017 / 02:22

Button that calls another screen and another button on the new screen that returns to the old screen How to run PHP + Firebird in Docker?

score 0 · Accepted Answer

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

I've had enough of this kind of style, 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>