How to make new text apear after the header (not underneath it), while keeping the shape of the head-CodePudding

I made a header, and it was all looking good until I decided to add more text there, because the text went behind the header, and I don't want that to happen. I know that I can just use something like top: 100px on the text in the CSS file, but I wanna know a proper solution to this.

// html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet", href="template.css">
</head>
<body>
    <div >
        <a  href="home">go back</a>        
        <a  href="sign_in">sign in</a>
        <a  href="sign_up">sign up</a>
    </div>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
</body>
</html>

// CSS

.heading {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100px;
    background: teal;
    font-size: 30px;
}

a.logo {
    top: 25px;
    padding: 5px;
    left: 30px;
    position: fixed;
    text-decoration: none;
    color: white;
}

a.logo:active, a.logo:visited, a.logo:link {
    background-color: dodgerblue;
}

a.logo:hover {
    background-color: navy;
}

a.sign_in {
    top: 25px;
    padding: 5px;
    right: 200px;
    position: fixed;
    text-decoration: none;
    color: white;
    text-align: right;
}

a.sign_in:active, a.sign_in:visited, a.sign_in:link {
    background-color: dodgerblue;
}

a.sign_in:hover {
    background-color: navy;
}

a.sign_up {
    top: 25px;
    padding: 5px;
    right: 50px;
    position: fixed;
    text-decoration: none;
    color: white;
    text-align: right;
}

a.sign_up:active, a.sign_up:visited, a.sign_up:link {
    background-color: dodgerblue;
}

a.sign_up:hover {
    background-color: navy;
}

html {
    background-color: rgb(175, 220, 235);
}

I tried using different positions, but I would either have this problem again, or the header wouldn't be touching the side of the website.

CodePudding user response：

Switch the .heading to be position: sticky. This allows it to still take up space don't he page, while staying at the top when the user scrolls.

Margin: You can add margin: -10px; to the .heading to allow it to still touch the edges of the screen. Then add width: calc(100% 20px); so it still takes up the whole width.

.heading {
    top: 0;
    left: 0;
    position: sticky;
    margin: -10px;
    width: calc(100%   20px);
    height: 100px;
    background: teal;
    font-size: 30px;
}

a.logo {
    top: 25px;
    padding: 5px;
    left: 30px;
    position: fixed;
    text-decoration: none;
    color: white;
}

a.logo:active, a.logo:visited, a.logo:link {
    background-color: dodgerblue;
}

a.logo:hover {
    background-color: navy;
}

a.sign_in {
    top: 25px;
    padding: 5px;
    right: 200px;
    position: fixed;
    text-decoration: none;
    color: white;
    text-align: right;
}

a.sign_in:active, a.sign_in:visited, a.sign_in:link {
    background-color: dodgerblue;
}

a.sign_in:hover {
    background-color: navy;
}

a.sign_up {
    top: 25px;
    padding: 5px;
    right: 50px;
    position: fixed;
    text-decoration: none;
    color: white;
    text-align: right;
}

a.sign_up:active, a.sign_up:visited, a.sign_up:link {
    background-color: dodgerblue;
}

a.sign_up:hover {
    background-color: navy;
}

html {
    background-color: rgb(175, 220, 235);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet", href="template.css">
</head>
<body>
    <div >
        <a  href="home">go back</a>        
        <a  href="sign_in">sign in</a>
        <a  href="sign_up">sign up</a>
    </div>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
</body>
</html>

CodePudding user response：

use position:sticky all element have default margin and padding it's better to assign all element margin to 0 by

* {
  margin: 0
}

we will get more control when we design or you can add margin:0 to specific class which is having margin

* {
  margin: 0
}

.heading {
  top: 0;
  left: 0;
  position: sticky;
  width: 100%;
  height: 100px;
  background: teal;
  font-size: 30px;
  display: block
}

a.logo {
  top: 25px;
  padding: 5px;
  left: 30px;
  position: fixed;
  text-decoration: none;
  color: white;
}

a.logo:active,
a.logo:visited,
a.logo:link {
  background-color: dodgerblue;
}

a.logo:hover {
  background-color: navy;
}

a.sign_in {
  top: 25px;
  padding: 5px;
  right: 200px;
  position: fixed;
  text-decoration: none;
  color: white;
  text-align: right;
}

a.sign_in:active,
a.sign_in:visited,
a.sign_in:link {
  background-color: dodgerblue;
}

a.sign_in:hover {
  background-color: navy;
}

a.sign_up {
  top: 25px;
  padding: 5px;
  right: 50px;
  position: fixed;
  text-decoration: none;
  color: white;
  text-align: right;
}

a.sign_up:active,
a.sign_up:visited,
a.sign_up:link {
  background-color: dodgerblue;
}

a.sign_up:hover {
  background-color: navy;
}

html {
  background-color: rgb(175, 220, 235);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" , href="template.css">
</head>

<body>
  <div >
    <a  href="home">go back</a>
    <a  href="sign_in">sign in</a>
    <a  href="sign_up">sign up</a>
  </div>
  <div>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
    <h1>Hello there</h1>
  </div>
</body>

</html>