The footer content and social media icons are not visible

I've been working on a multi-column website and I'm almost done, but I've encountered an issue - the footer text at the bottom of the page and the social media icon are not showing up. Even when I tried viewing the page without the linked CSS file, the social media icon appeared as a broken image (which means it's referenced correctly).

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta name="description" content="Your description goes here">
        <meta name="keywords" content="one, two, three">

        <title>Relaxr</title>

        <!-- external CSS link -->
        <link rel="stylesheet" href="css/normalize.css">
        <!-- <link rel="stylesheet" href="css/style.css"> -->

    </head>
    <body>
        <div id="mainColumn">
            <header>
                <h1>Relaxr</h1>
                <h2>Get piece of mind with a single tap</h2>
            </header>

        <span>
            <button id="getButton">Get it Now</button>
        </span>
        </div>

        <div id="secondColumn">
            <header>
                <h1>Benefits</h1>
                <p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
                <ul class="benefitss">
                    <li>Schedule meetings for you</li>
                    <li>Excel automation to complete your <br>work for you</li>
                    <li>Responds to e-mails on your behalf</li>
                    <li>Does all yor work for you with our<br>revolutionary technology</li>
                </ul>
            </header>
        </div>

        <div id="thirdColumn">
            <src="../images/testimonial_bg.jpg">
            <p class="herWords">“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
            <p class="name">- Amanda, Intuit</p>
        </div>

        <div id="fourthColumn">
            <button id="signupButton">Sign Up Now!</button>
        </div>

        <div id="fifthColumn">
            <p>Relaxr</p>
        </div>
            <div id="footer">
                <img src="../images/twitter.png">
                <p>Copyright 2015. Relaxr.</p>
            </div>
        </div>
    </body>
</html>

AND HERE IS MY CSS FILE:

/******************************************
/* SETUP
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
  clear: both;
}

.alignright {
  float: right;
  padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
  float: left;
  padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     color: #000;
     font-size: 12px;
     line-height: 1.4;
     font-family: Open Sans;
     background: url(../images/header_bg.jpg) no-repeat center center;
     background-size: cover;
}


/******************************************
/* LAYOUT
/*******************************************/

/*MAIN COLUMN*/

#mainColumn {
  width: 100%;
  height: 450px;
  text-align: center;
}

#mainColumn h1 {
  color: white;
  padding-right: 80%
}

#mainColumn h2 {
  color: white;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 50px;
  text-align: center;
}

header {
  height: 40%;
}

/*GET IT NOW BUTTON*/
#getButton {
  background-color: yellow;
  border-radius: 3px;
  border-style: none;
  font-family: 'Roboto'; sans-serif;
  font-size: 14px;
  font-weight: 700;
  height: 30px;
  width: 135px;
}

/*SECOND COLUMN*/

#secondColumn {
  width: 100%;
  margin: auto;
  height: 360px;
  background-color: white;
}

#secondColumn h1 {
  padding-left: 65px;
  padding-top: 60px;
  color: navy;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 700;
}

#secondColumn p {
  font-size: 13px;
  padding-left: 70px;
  font-family: Open Sans;
  color: navy;
}

.benefitss {
  margin-left: 80px;
  padding-top: 10px;
  font-size: 13px;
}

.benefitss li{
  padding-top: 3px;
  font-family: Open Sans;
  color: navy;
} 

/*THIRD COLUMN*/
#thirdColumn {
  width: 100%;
  height: 250px;
}

#thirdColumn .herWords {
  color: #ffffff;
  font-style: italic;
  font-size: 16px;
  margin-top: 45px;
  text-align: center;
}

#thirdColumn .name {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

/*FOURTH COLUMN*/
#fourthColumn {
  background-color: yellow;
  width: 100%;
  height: 75px;
}

/*SIGN UP BUTTON*/
#signupButton {
  background-color: #000040;
  color: white;
  border-radius: 3px;
  border-style: none;
  font-family: 'Roboto'; sans-serif;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  width: 150px;
  margin-left: 43.5%;
  margin-top: 25px;
}

#fifthColumn {
  background-color: #000000;
  width: 100%;
  height: 240px;
  position: absolute;
}

#fifthColumn p {
  color: yellow;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
}

/*FOOTER TEXT*/

#footer p {
  font-size: 9px;
  color: #ffffff;
  text-align: center;
  padding-top: 11%;
}

This is what needs to appear:

However, only "Relaxr" shows up in the last column. Can anyone help me figure out why this problem is occurring? Thank you.

htmlcss

Answer №1

Your HTML code is missing the "<img>" reference. While there is no additional "</div>", make sure to add the img tag correctly. Here's what I found:

<div id="thirdColumn">
    <src="../images/testimonial_bg.jpg">

To correct it, you should have the following code instead:

<div id="thirdColumn">
    <img src="../images/testimonial_bg.jpg" />

Answer №2

#fifthColumn is currently configured with position: absolute. This setup could be causing it to overlap or hide the content of #footer, which comes after it in the document flow (absolutely positioned elements do not occupy space and can overlap other elements). Try changing the position to relative to see if this resolves the issue...

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

Exploring the document body with jquery

In my homescreen.jsp, I have a link that opens an iFrame when clicked. My goal is to hide the vertical scrollbar of homescreen.jsp when the iFrame is open. Using jQuery, I attempted to access the body of homescreen.jsp and was successful. However, I encou ...

jqueryhtml

Aligning an image next to a login form with the help of materializecss

https://i.sstatic.net/tki2N.png https://i.sstatic.net/4tJE0.png To view the complete code, visit http://codepen.io/anon/pen/BjqxOq I have implemented a login page using materializecss and I am looking to align an image with the login form. However, when ...

htmlcssmaterial-designmaterialize

problem with the clientHeight attribute in window event handlers

The component below is designed to react to changes in window resize based on the container height. However, there seems to be an issue where the containerHeight variable increases as the window size decreases, but does not decrease when I make the window ...

javascriptcssreactjsflexbox

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...

cssreactjs

Show or hide a div based on the visibility of another div in Angular using *ngIf

Looking for a way to dynamically display images based on the visibility of another image? Consider the code snippet below: <div *ngFor="let badge of user.progress.unlockedBadges"> <img id="{{i}}_unlockedImage" *ngIf="badge == achievemen ...

htmlangular

Utilize jQuery and plotly.js to exclusively display newly selected items in a dropdown menu

I'm exploring plotly.js and I want to create a dynamic plot that changes based on dropdown selection. My code includes jQuery and bootstrap. However, I faced an issue where selecting a new option adds a new line to the existing graph instead of replac ...

javascriptjqueryhtmlplotly

Troubles with implementing child routes in Angular 6

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ...

angularhtmltypescriptangular-routing

Place the span element above the div container

I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before? Is there a way to display the numbe ...

htmlcss

What could be causing the misalignment of my select box in Bootstrap framework?

I'm currently trying to replicate the layout of the second image shown below, as seen in the first image. However, I'm facing an issue with the positioning of the selection box and I can't seem to figure out why. I've experimented wit ...

htmlcssbootstrap-4

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

Tips on looping through a universal array and retrieving user input

My current project involves creating a news site using the Guardian API. I want to implement a search feature that allows users to input keywords and retrieve the webTitle attribute for matching elements. While I could simply insert the user input directly ...

jqueryhtmlarraysajax

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

css

Modify the styling of the main webpage using the iframe

Can the CSS of a parent page be modified from an iframe when the parent page and iframe are hosted on separate domains? ...

jqueryhtmlcss

What is the best way to identify the full URL along with the querystring?

While using a web application on Firefox, I encounter an issue where clicking on a button redirects me to a different page and processes query string parameters that are hidden in the URL. Can anyone suggest tools that can help me identify these query str ...

htmlurlpostget

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

htmlangular

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

Issues with refreshing the content in form fields

I am encountering issues with reloading fields, especially the datepicker in a form. The website is live at , and when I attempt to search using the search form, it works fine the first time. However, if I press the reset button before searching again, th ...

phpjqueryhtml

Experience the feeling of releasing momentum by click and dragging the scroll

One feature I am looking for is the ability to control the scroll speed when dragging, and have the scroll continue moving slightly after release instead of stopping instantly. CodePen: https://codepen.io/rKaiser/pen/qGomdR I can adjust the speed adequat ...

javascriptjquerycssscroll

Unable to achieve horizontal alignment with DIV element set as inline-block

Currently, I have five columns that are aligned using the display:inline-block. Everything seems to be working fine, but there's a peculiar issue that arises when I refresh the page multiple times. Occasionally, while the first column remains at the t ...

htmlcss

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

jquerycsslist