CODEWITHSUNDEEP
htmlcss
Mansoor Ahmad
Mansoor Ahmad

Reputation: 55

p Tag Appearing Randomly At The Corner of The Screen

I am creating a webpage for portfolio purposes, and when I create a section with a h2 and p tag the p tag jumps up to the corner. Any idea why this is happening?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Comfortaa" rel="stylesheet">
    <link rel="stylesheet" href="index.css" />
    <title>Scriptura</title>
  </head>
  <body>
    <nav class="header-nav">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Support Us</a></li>
        <li><a href="#">GitHub</a></li>
      </ul>
    </nav>

    <header>
      <h1>Welcome To <em>Scriptura</em></h1>
      <p>The premier note-taking software on the web!</p>
    </header>

   <section>
     <h2>What Is <em>Scriptura</em></h2>
     <p>It's just my thing</p>
   </section>

    <script src="index.js"></script>
  </body>
</html>

CSS:

body {
    animation: bg-animation 1s ease-in-out 0s infinite alternate both;
    margin: 0;
    font-family: Open Sans, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Comfortaa, sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

header {
    position: relative;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background-color: white;
    height: 600px;
}

header h1, p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

header h1 {
    line-height: 540px;
}

header p {
    line-height: 620px;
}

.header-nav {
    text-align: right
}

.header-nav ul {
    list-style-type: none;
    margin: 0;
}

.header-nav li {
    display: inline-block;
    padding: 20px;
    transition: background-color 0.1s ease-in-out 0s;
}

.header-nav li:hover {
    background-color: darkgrey;
}

@keyframes bg-animation {
    from {
        background-color: whitesmoke;
    } 
    to {
        background-color: white;
    }
}

Upvotes: 0

Views: 152

Answers (2)

Johannes
Johannes

Reputation: 67799

This CSS rule is the problem (the absolute position in it):

header h1, p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

Reason: The selector header h1, p is valid for h1 tags inside a header tag and for ANY p tag, i.e. also for the second one inside section. (not only inside header)

Upvotes: 1

Chanckjh
Chanckjh

Reputation: 2597

The p tag has position: absolute in your css. This part:

header h1, p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

If the parent doesn't have a position relative, it will position itself relative to the document.

Either change it to this:

header h1, header p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

Or remove it:

header h1{
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

Upvotes: 2

Related Questions