2

Why does my webpage with same html and css as my other working webpages within my website not load properly?

Page loads without h1 element. When I comment-out a span which I was using to put a transparent background image behind the whole webpage (I apply the same background image css to all my webpages within the website.), the nav-bar isn't scrunched up (I don't want the nav-bar scrunched up.) like how it is with the span(I use the same span on my other webpages within the website to create my transparent background image.).

With the transparent background image span html and css activated, my webpage h1 element appears with more unintentional positive margin-top, above my h2 there is unintentional less margin-top element, there is general content misalignment, and as mentioned before unintentional nav-bar scrunching. My webpage is misaligned with and without the transparent background image span.

Here's my code for the webpage:

/* GENERAL CSS */

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(0deg, #00ffffc2 1%, #ff02029a, #6403bec0 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img {
  margin-top: 10%;
  width: 85%;
}

.images {
  margin-left: 20%;
}

figcaption {
  font-size: 25px;
  width: 85%;
  color: rgb(25, 0, 255)
}

h1 {
  margin-top: -10%;
  text-align: center;
  color: rgb(140, 6, 230);
  font-size: 80px;
  text-shadow: -5px 5px 20px black, 0px -5px 20px black, 5px 0px 20px black;
}


/*h1 span {
    background-color: rgba(255, 238, 0, 0.5)
    }*/

h2 {
  text-align: center;
  color: rgb(253, 228, 0);
  font-size: 50px;
  margin-top: 7%;
  text-shadow: -5px 5px 20px rgb(8, 56, 110), 0px -5px 20px rgb(8, 56, 110), 5px 0px 20px rgb(8, 56, 110);
}


/*h2 span {
    background-color: rgba(255, 0, 0, 0.438)
    }*/

p {
  font-size: 28px;
  color: white;
}

.box {
  margin-left: 16%;
  width: 90%;
  border: 1px solid rgba(200, 70, 70, 0);
}

a {
  color: rgb(255, 255, 255);
  background-color: rgba(0, 132, 255, 0.568);
}


/*a:hover {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 132, 255, 0.568);
    }*/


/* BACKGROUND IMAGE CSS */

.backgroundImg {
  padding: 150px;
  display: inline-block;
  position: relative;
}

.backgroundImg:before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(pics/surf-tube.jpg);
  opacity: 0.3;
  background-size: cover;
  background-repeat: repeat-x;
  background-attachment: fixed;
  /*background-position: center;*/
  position: fixed;
  z-index: -1;
}


/* BACKGROUND IMAGE CSS ENDS HERE*/


/*NAVBAR CSS STARTS HERE*/

nav {
  margin-left: 20%;
}

.navbar {
  list-style: none;
  /*margin-left: 10%;*/
  padding: 0px;
  overflow: hidden;
  display: inline;
  text-align: center;
}

.nav-link li {
  display: inline;
  color: rgb(0, 0, 0);
  text-align: center;
}

.nav-link a {
  float: left;
  margin-left: 1%;
  padding: 14px 30px;
  text-decoration: none;
  background-color: rgba(63, 255, 5, 0.445);
  font-size: 20px;
  display: inline-block;
  color: rgb(38, 0, 255);
  border: 5px solid rgba(165, 9, 255, 0.658);
}

.nav-link:hover {
  background-color: rgba(7, 221, 71, 0.432);
  color: rgb(255, 2, 2);
  font-size: 23px;
}


/*nav-bar css ends here*/


/*TECHNICAL RESUME CSS STARTS HERE*/

#skillsDiv {
  margin-left: 45%;
  width: 50%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#skillsHeader {
  font-size: 30px;
}

#skillsUl {
  font-size: 28px;
  color: white;
}

#languageDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#languageHeader {
  font-size: 30px;
  text-align: center;
}

#language {
  text-align: center;
  font-size: 28px;
}

#experienceDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#experienceHeader {
  font-size: 30px;
  text-align: center;
}

#experience {
  font-size: 28px;
}

#educationDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#educationHeader {
  font-size: 30px;
  text-align: center;
}

#highschool {
  font-size: 28px;
  text-align: center;
}

#college {
  font-size: 28px;
  text-align: center;
}


/* FOOTER NAV STARTS HERE*/

footer {
  position: static;
  text-align: center;
  /*margin-top: 100px;
    margin-bottom: 50px;*/
  margin-left: 25%;
  display: inline;
}

.ftr-nav-link {
  color: rgb(255, 0, 0);
  text-decoration: none;
  font-size: 22px;
  float: left;
  background-color: #ffee00;
}

.ftr-nav-link:hover {
  color: rgb(255, 1, 1);
  background-color: rgb(5, 107, 133)
}
<!-- <span class="backgroundImg"> -->
<header>
  <h1>Maurice Rogers</h1>
  <nav>
    <ul class="navbar">
      <li class="nav-link"><a class="nav-link" href="index.html">Bio</a></li>
      <li class="nav-link"><a class="nav-link" href="technical-resume.html">Technical Resume</a>.
      </li>
      <li class="nav-link"><a class="nav-link" href="my-animations.html">Animations</a></li>
      <li class="nav-link"><a class="nav-link" href="me-surfing.html">Surfing</a></li>
      <li class="nav-link"><a class="nav-link" href="my-art.html">Art</a></li>
    </ul>
  </nav>
</header>
<main>

  <br/>
  <h2>My Animations</h2>
  <br/>
  <!-- <iframe width="560" height="315" src="https://www.youtube.com" frameborder="0" allow="accelerometer; autoplay; 
    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen 
    enablejsapi="1"></iframe>
    <p>My animations took many hours of hard work to create. Enjoy.</p> -->
</main>
<footer>
  <nav>
    <a class="ftr-nav-link" href="my-animations.html">Back to top</a>
  </nav>
  <p>&copy; 2021 Adam Smith</p>
</footer>
<!-- </span> -->
problemSolver
  • 27
  • 7
  • 2
    Why would you consider the second lowest html element to be a suitable wrapper for a web page? [Span only has inline elements as valid child elements](https://stackoverflow.com/questions/11314668/what-elements-can-a-span-tag-contain-in-html5). the reason the H1 is not visible, is because it is above the visible page - remove the negative margin-top – mplungjan Feb 03 '21 at 15:41
  • I tried using 2 other popular methods for creating a transparent background image but they didn't work. Then I found my solution in the freeCodeCamp forum. I removed the ```margin-top: -10%;``` from the ```h1``` but now there is too much ```margin-top``` on the ```h1``` on all of my webpages. I have the same base html for each of the webpages. The css comes from a separate file that is linked to each webpage. All the webpages that can be navigated to from the nav-bar work just fine except for my-animations.html – problemSolver Feb 03 '21 at 20:17
  • I added screenshots and entered in a description for each screenshot. So where are my descriptions now? I don't see them. – problemSolver Feb 04 '21 at 02:32

3 Answers3

0

Remove margin-top: -10%; from h1.

/* GENERAL CSS */

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(0deg, #00ffffc2 1%, #ff02029a, #6403bec0 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img {
  margin-top: 10%;
  width: 85%;
}

.images {
  margin-left: 20%;
}

figcaption {
  font-size: 25px;
  width: 85%;
  color: rgb(25, 0, 255);
}

h1 {
  /*   margin-top: -10%; */
  text-align: center;
  color: rgb(140, 6, 230);
  font-size: 80px;
  text-shadow: -5px 5px 20px black, 0px -5px 20px black, 5px 0px 20px black;
}


/*h1 span {
background-color: rgba(255, 238, 0, 0.5)
}*/

h2 {
  text-align: center;
  color: rgb(253, 228, 0);
  font-size: 50px;
  margin-top: 7%;
  text-shadow: -5px 5px 20px rgb(8, 56, 110), 0px -5px 20px rgb(8, 56, 110), 5px 0px 20px rgb(8, 56, 110);
}


/*h2 span {
background-color: rgba(255, 0, 0, 0.438)
}*/

p {
  font-size: 28px;
  color: white;
}

.box {
  margin-left: 16%;
  width: 90%;
  border: 1px solid rgba(200, 70, 70, 0);
}

a {
  color: rgb(255, 255, 255);
  background-color: rgba(0, 132, 255, 0.568);
}


/*a:hover {
color: rgb(255, 255, 255);
background-color: rgba(0, 132, 255, 0.568);
}*/


/* BACKGROUND IMAGE CSS */

.backgroundImg {
  padding: 150px;
  display: inline-block;
  position: relative;
}

.backgroundImg:before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(pics/stockton-tube.jpg);
  opacity: 0.3;
  background-size: cover;
  background-repeat: repeat-x;
  background-attachment: fixed;
  /*background-position: center;*/
  position: fixed;
  z-index: -1;
}


/* BACKGROUND IMAGE CSS ENDS HERE*/


/*NAVBAR CSS STARTS HERE*/

nav {
  margin-left: 20%;
}

.navbar {
  list-style: none;
  /*margin-left: 10%;*/
  padding: 0px;
  overflow: hidden;
  display: inline;
  text-align: center;
}

.nav-link li {
  display: inline;
  color: rgb(0, 0, 0);
  text-align: center;
}

.nav-link a {
  float: left;
  margin-left: 1%;
  padding: 14px 30px;
  text-decoration: none;
  background-color: rgba(63, 255, 5, 0.445);
  font-size: 20px;
  display: inline-block;
  color: rgb(38, 0, 255);
  border: 5px solid rgba(165, 9, 255, 0.658);
}

.nav-link:hover {
  background-color: rgba(7, 221, 71, 0.432);
  color: rgb(255, 2, 2);
  font-size: 23px;
}


/*nav-bar css ends here*/


/*TECHNICAL RESUME CSS STARTS HERE*/

#skillsDiv {
  margin-left: 45%;
  width: 50%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#skillsHeader {
  font-size: 30px;
}

#skillsUl {
  font-size: 28px;
  color: white;
}

#languageDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#languageHeader {
  font-size: 30px;
  text-align: center;
}

#language {
  text-align: center;
  font-size: 28px;
}

#experienceDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#experienceHeader {
  font-size: 30px;
  text-align: center;
}

#experience {
  font-size: 28px;
}

#educationDiv {
  margin-left: 25%;
  width: 60%;
  border: 1px solid rgba(200, 70, 70, 0);
}

#educationHeader {
  font-size: 30px;
  text-align: center;
}

#highschool {
  font-size: 28px;
  text-align: center;
}

#college {
  font-size: 28px;
  text-align: center;
}


/* FOOTER NAV STARTS HERE*/

footer {
  position: static;
  text-align: center;
  /*margin-top: 100px;
margin-bottom: 50px;*/
  margin-left: 25%;
  display: inline;
}

.ftr-nav-link {
  color: rgb(255, 0, 0);
  text-decoration: none;
  font-size: 22px;
  float: left;
  background-color: #ffee00;
}

.ftr-nav-link:hover {
  color: rgb(255, 1, 1);
  background-color: rgb(5, 107, 133);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Animations</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- <span class="backgroundImg"> -->
  <header>
    <h1>Maurice Rogers</h1>
    <nav>
      <ul class="navbar">
        <li class="nav-link"><a class="nav-link" href="index.html">Bio</a></li>
        <li class="nav-link"><a class="nav-link" href="technical-resume.html">Technical Resume</a>.
        </li>
        <li class="nav-link"><a class="nav-link" href="my-animations.html">Animations</a></li>
        <li class="nav-link"><a class="nav-link" href="me-surfing.html">Surfing</a></li>
        <li class="nav-link"><a class="nav-link" href="my-art.html">Art</a></li>
      </ul>
    </nav>
  </header>
  <main>

    <br />
    <h2>My Animations</h2>
    <br />
    <!-- <iframe width="560" height="315" src="https://www.youtube.com/embedvideoseries? 
list=PL9xPrB7vjr6kZYms6RFtpyPGmZqvNj7MS" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen 
enablejsapi="1"></iframe>
<p>My animations took many hours of hard work to create. Enjoy.</p> -->
  </main>
  <footer>
    <nav>
      <a class="ftr-nav-link" href="my-animations.html">Back to top</a>
    </nav>
    <p>&copy; 2021 Maurice Rogers</p>
  </footer>
  <!-- </span> -->
</body>

</html>

Codepen: https://codepen.io/manaskhandelwal1/pen/mdOemMz?editors=1100

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
0

i've added some code and comments, which you will find with the keyword "bit:" additional you should take a look for responsive design and flex items :)

/* GENERAL CSS */

/* bit: remove default browser styles */
* {
    margin: 0; 
    padding: 0;
}

/* bit: set the default page min-height from your device height*/
html,
body {
    min-height: 100vh;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(0deg, #00ffffc2 1%, #ff02029a, #6403bec0 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

img {
    margin-top: 10%;
    width: 85%;
}

.images {
    margin-left: 20%;
}

figcaption {
    font-size: 25px;
    width: 85%;
    color: rgb(25, 0, 255)
}


h1 {
    /* margin-top: -10%; /* bit: bad practice to do styling with negative values */
    text-align: center;
    color: rgb(140, 6, 230);
    font-size: 80px;
    text-shadow: -5px 5px 20px black, 0px -5px 20px black, 5px 0px 20px black;

}

/*h1 span {
background-color: rgba(255, 238, 0, 0.5)
}*/

h2 {
    text-align: center;
    color: rgb(253, 228, 0);
    font-size: 50px;
    margin-top: 7%;
    text-shadow: -5px 5px 20px rgb(8, 56, 110), 0px -5px 20px rgb(8, 56, 110), 5px 0px 20px rgb(8, 56, 110);

}

/*h2 span {
background-color: rgba(255, 0, 0, 0.438)
}*/

p {
    font-size: 28px;
    color: white;
}

.box {
    margin-left: 16%;
    width: 90%;
    border: 1px solid rgba(200, 70, 70, 0);
}

a {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 132, 255, 0.568);
}

/*a:hover {
color: rgb(255, 255, 255);
background-color: rgba(0, 132, 255, 0.568);
}*/


/* BACKGROUND IMAGE CSS */
.backgroundImg {
    padding: 150px;
    display: inline-block;
    position: relative;
}

.backgroundImg:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(pics/stockton-tube.jpg);
    opacity: 0.3;
    background-size: cover;
    background-repeat: repeat-x;
    background-attachment: fixed;
    /*background-position: center;*/
    position: fixed;
    z-index: -1;
}

/* BACKGROUND IMAGE CSS ENDS HERE*/


/*NAVBAR CSS STARTS HERE*/

/* bit: better way to centering elements */
nav {
    margin-left: 50%;
    transform: translateX(-50%);
}

.navbar {
    list-style: none;
    /*margin-left: 10%;*/
    padding: 0px;
    overflow: hidden;
    display: inline;
    text-align: center;
}

/* bit: order here was wrong */
li.nav-link {
    display: inline;
    color: rgb(0, 0, 0);
    text-align: center;

}

.nav-link a {
    float: left;
    margin-left: 1%;
    padding: 14px 30px;
    text-decoration: none;
    background-color: rgba(63, 255, 5, 0.445);
    font-size: 20px;
    display: inline-block;
    color: rgb(38, 0, 255);
    border: 5px solid rgba(165, 9, 255, 0.658);
}

.nav-link:hover {
    background-color: rgba(7, 221, 71, 0.432);
    color: rgb(255, 2, 2);
    font-size: 23px;
}

/*nav-bar css ends here*/


/*TECHNICAL RESUME CSS STARTS HERE*/
#skillsDiv {
    margin-left: 45%;
    width: 50%;
    border: 1px solid rgba(200, 70, 70, 0);
}

#skillsHeader {
    font-size: 30px;
}

#skillsUl {
    font-size: 28px;
    color: white;

}

#languageDiv {
    margin-left: 25%;
    width: 60%;
    border: 1px solid rgba(200, 70, 70, 0);
}

#languageHeader {
    font-size: 30px;
    text-align: center;
}

#language {
    text-align: center;
    font-size: 28px;
}

#experienceDiv {
    margin-left: 25%;
    width: 60%;
    border: 1px solid rgba(200, 70, 70, 0);
}

#experienceHeader {
    font-size: 30px;
    text-align: center;
}

#experience {

    font-size: 28px;
}

#educationDiv {
    margin-left: 25%;
    width: 60%;
    border: 1px solid rgba(200, 70, 70, 0);
}

#educationHeader {
    font-size: 30px;
    text-align: center;
}

#highschool {
    font-size: 28px;
    text-align: center;
}

#college {
    font-size: 28px;
    text-align: center;
}

/* FOOTER NAV STARTS HERE*/
footer {
    position: static;
    text-align: center;
    /*margin-top: 100px;
    margin-bottom: 50px;*/
    margin-left: 25%;
    display: inline;
}


.ftr-nav-link {
    color: rgb(255, 0, 0);
    text-decoration: none;
    font-size: 22px;
    float: left;
    background-color: #ffee00;
}

.ftr-nav-link:hover {
    color: rgb(255, 1, 1);
    background-color: rgb(5, 107, 133)
}
0

I solved my own problem. With all of the replies to this post taken into consideration, all that was needed this whole time was for me to add sufficient content under the <h2> inside the <main> section of the body.

problemSolver
  • 27
  • 7