Website Not Loading Correctly

Why is my webpage not loading properly, even though it has the same HTML and CSS as my other functioning pages on the site?

The page loads without the h1 element. If I comment out the span used for adding a transparent background image behind the whole webpage (I use this same background image style across all pages), then the nav-bar doesn't get scrunched up (which I want to avoid). The issue arises when using the span with the background image.

With the transparent background image span active, there are unintended styling discrepancies like extra positive margin-top on h1, decreased margin-top on h2, content misalignment, and the nav-bar getting scrunchy. These problems persist with or without the span background image.

Check out my code below:

htmlcss

Answer №1

Take out the margin-top: -10%; property from the h1 element.

/* 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<span>/title>
  <link rel="stylesheet" href="styles.css">

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

Answer №2

i've made some modifications and included comments marked with the keyword "bit:". Additionally, don't forget to consider responsive design and flex items :)

/* GENERAL CSS */

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

/* bit: set the default page min-height based on 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: avoid using negative values for styling */
    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 center 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: corrected order here */
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)
}

Answer №3

After carefully reviewing all the responses to my post, I realized that the solution to my problem was simple - I just needed to make sure to include enough content under the <h2> tag within the <main> section of the body.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting rid of the Horizontal Scroll Bar

Having trouble with a persistent horizontal scrollbar in the "section3__container" container despite attempts to adjust size and overflow settings. Need assistance in removing this unwanted feature. <html lang="en"> <head> <m ...

javascripthtmlcsssassoverflow

Utilizing Android's advanced feature of overlapping buttons to create multiple states

I'm currently developing a Piano app for Android. In my XML layout, I have created two rectangular buttons representing white and black keys. The challenge I'm facing is getting the black key to overlap the two white keys, similar to how a real p ...

androidcssxmlandroid-layoutandroid-button

When a condition fails, the default style in the CSS media query does not apply

Whenever the user resizes the browser, my media query for max-width kicks in to make the design responsive. But I'm facing an issue where when the user returns back to the original browser size, the design is still a little messed up and doesn't ...

css

Struggling to align a box perfectly to the right within an AppBar

I'm struggling with aligning the box containing user info to the right edge of my MUI App bar. It seems to be stuck at the end of the last box instead of going all the way to the right. Can anyone help me achieve this? https://i.stack.imgur.com/uJ1on. ...

cssmaterial-ui

Verifying that phone numbers and email addresses are accurate prior to submitting the form

As a PHP newcomer, I apologize if my question appears somewhat naive. Currently, I am working on a contact form that is functioning well, but I need to implement validation for two specific fields: the phone number and the email address. For the phone numb ...

phphtmlformsvalidation

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling

`Enhance Image with a Fresh Hue`

Let me explain my dilemma: I'm dealing with a two-tone png image - one tone is black and the other is transparent. Right now, I'm relying on the background color attribute to dynamically change the color of the transparent section. However, I ...

javascriptcsshtml

Positioning the image to appear behind the Canvas

As I near the end of the game, I'm encountering an issue where the background image overlaps the Canvas. How can I resolve this problem? -Translated by Google Link to game Link to game with background ...

javascripthtmlcsscanvas

One cannot focus on HTML if it's disabled

I am currently exploring options to prevent an input from receiving focus without disabling it entirely. I need the backend to still retrieve data, but I want to restrict user editing of the input fields at certain times. Disabling the input is not an opti ...

jqueryhtmlcss

Is there a way to retrieve the widths of several <span> elements at once?

Having a few <span> elements generated dynamically, I need to find out their combined width. Wrapping them in a <div> and using alert($("#spanWrap").width()); resulted in the container's width instead of that of the <span> elements. ...

javascriptjqueryhtmlcss

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

Adjusting the size of the text input without changing the padding

How can I increase the font size to 1rem without changing the height of an input text field that has a padding of 1rem? The goal is to maintain the same height for the input field. Any ideas on how to achieve this? This is my current HTML structure: < ...

htmlcss

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

Vue component retrieval on the client side

I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...

htmlvue.js

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

Apply a different color to every other header using the nth-child selector

I'm attempting to create alternating color headers without defining multiple header styles. I've opted to use the nth-child selector for this purpose, but I'm having trouble achieving the desired colors. JSFiddle: http://jsfiddle.net/CRh6L/ ...

htmlcsscss-selectors

Using PHPMailer to send attachments uploaded through a form

I have a HTML form where users can select an attachment file (such as a PDF) and I want to send that file via email to a specified destination. While I am able to successfully send all other inputs through email, I'm having trouble with the attachmen ...

phphtmlphpmailer

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

I am just starting to learn AngularJS and I need help with binding column names (keys from key-value pairs) to a select list. I want to be able to retrieve the key name when the selection in the select list is changed. The select list displays: name, snip ...

javascriptjqueryhtmljsonangularjs