I am experiencing issues with the HTML footer not displaying correctly on my website

My GitHub Pages hosted website is giving me trouble with the footer styling. No matter what I try, I can't seem to get the background color to show up:

h1 {
  background-color: #000000;
}

I'm attempting to create a footer similar to the one at the bottom of this page, but using background-color: #color; isn't working for me. Could someone assist me? Here's the HTML and CSS I'm currently using:

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
                <link rel='stylesheet' href='style.css'/>
                <script src='script.js'></script>
                <link rel="shortcut icon" href="MyLogo.ico" />

    </head>

    <body>
      <center>
        <img src="A.jpg"></img>
          <div class="navbar">
            <a href="/">Home</a>
            <a href="About/">About</a>
            <a href="Photos/">Photos</a>
            <a href="Contact">Contact</a>
          </div>
    </center>
      <br/>
      <br/>
      <br/>

        <div class="footer">

      <a href="https://www.facebook.com/Amundson-Aerial-Photography-AAP-881108668736951/">My Facebook page</a>

        </div>
    </body>
</html>


body {
      font-family: sans-serif;
    }

    .navbar {
      overflow: hidden;
      background-color: black;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      transition: .3s;
    }

    .navbar a:hover {
       background-color: #666666;
}    
    .footer {
       width: 100%;
       background-color: #000000;
       padding: 60px 0px;
       position:fixed;
       left:0px;
       bottom:0px;
       height:50px;
       width:100%;
       background:#999;

    }
htmlcss

Answer №1

The code snippet you provided applies a background color, but there is a conflict with the background:#999 rule that overrides it.

If you are unsure about CSS inheritance, it's worth exploring. In simple terms, a rule lower down in the same selector statement or one with a more specific selector will always take precedence.

For more information on cascade and inheritance in CSS, check out this link: Cascade and Inheritance

I've also used a self-closing tag for your <img/>, which is the correct syntax since the <img> tag does not require an end tag.

Here is the snippet of CSS code you provided:

body {
      font-family: sans-serif;
    }

    .navbar {
      overflow: hidden;
      background-color: black;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      transition: .3s;
    }

    .navbar a:hover {
       background-color: #666666;
}    
    .footer {
       width: 100%;
       padding: 60px 0px;
       position:fixed;
       left:0px;
       bottom:0px;
       height:50px;
       width:100%;

       background-color: #000000;
       background:#999;
       background-color:red;
    }

And here is the HTML structure you provided:

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
                <link rel='stylesheet' href='style.css'/>
                <script src='script.js'></script>
            <link rel="shortcut icon" href="MyLogo.ico" />

    </head>

    <body>
      <center>
        <img src="A.jpg" />
          <div class="navbar">
            <a href="/">Home</a>
            <a href="About/">About</a>
            <a href="Photos/">Photos</a>
            <a href="Contact">Contact</a>
          </div>
    </center>
      <br/>
      <br/>
      <br/>

        <div class="footer">

      <a href="https://www.facebook.com/Amundson-Aerial-Photography-AAP-881108668736951/">My Facebook page</a>

        </div>
    </body>
</html>

Answer №2

In case you are unable to modify the background color of the footer, note that both background-color: #000000; and background:#999; serve the same purpose. You can remove one of them for a cleaner code.

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

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

javascripthtmlcssangulartypescript

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

javascriptpythoncssseleniumselenium-webdriver

Is it possible to create an If Statement within a foreach loop on an ASP.Net view page?

I am attempting to showcase 4 columns in a single row, with an opening <div class="row"> tag following every group of 4 data elements and a closing tag </div> at the end. @{ int i = 1; } @{ foreach (var item in ViewBag.Prod) { ...

jqueryhtmlasp.net-mvcrazorasp.net-mvc-5

Adjust the cell text overflow based on the width of the table

I am working with a table that has multiple columns. I want the first 3 columns to have a larger width than the others, specifically taking up 15% each for a total of 45% of the table's width. Currently, I am using this code in a sandbox environment: ...

javascripthtmlcssreactjs

Concentrate on a specific component within an overlay using jQuery

How can I focus on a specific area within an overlay when adding an item to the cart? I want to make the rest of the overlay darker and the targeted area more visible. See a quick mockup here: https://i.sstatic.net/UpJuc.png Here's the HTML code: & ...

javascriptjqueryhtmlcss

Exploring the impact of JavaScript tags on website performance in accordance with W3

While researching website optimization strategies today, I came across an article discussing the benefits of moving JavaScript scripts to the bottom of the HTML page. I am curious if this approach aligns with W3C's recommendations since traditionally ...

javascripthtmloptimizationtagsw3c

Utilizing HTML Elements for Conditional Statements

I had a question regarding HTML code and JavaScript functionality that I came across while honing my coding skills. My curiosity lies in understanding how an HTML element can act as a boolean condition within a JavaScript while loop. Take, for instance, ...

javascripthtmlwhile-loopbooleanconditional-statements

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

htmlangulartypescriptionic2

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

javascripthtmljquerycssbootstrap-4

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

javajavascriptcssselenium-webdriver

In order to maintain a custom tooltip in an open state until it is hovered over, while also controlling its

When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog. <ng ...

javascripthtmlcssangular

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

"Enhancing the spacing between background images through CSS: A guide to using the repeat property

Looking to design a background with a repeating image using CSS. background: url(../images/bg.PNG) repeat; However, facing an issue where the images are too close together. Any suggestions on how to add padding around each image? ...

css

Auto-closing dropdown menus in the navbar of a Shiny app with Bootstrap

Is there a way to customize the behavior of a shiny navbarMenu so that when I click inside or outside it, the dropdown does not automatically hide? I have seen mentions of using data-bs-auto-close="false" in the Bootstrap documentation, has anyon ...

htmlcssrshinybootstrap-5

Combining broken down values within a loop

https://i.sstatic.net/PI3NI.png Take a look at this image, then review the code I've provided: function addNumbers() { var inputList = document.getElementById("listInput").value.split(" "); for(i = 0; i <= inputList.length; i+=1) { ...

javascripthtml

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

I need to implement a functionality where clicking a button within a <td> element will retrieve the values of other <td> elements within the same row (<tr>). Here is the current implementation: $(document).ready(function(){ ...

javascriptjqueryhtml

What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...

javascriptjquerycss

The autocomplete attribute is not compatible with GroceryCrud functionality

I attempted to implement the autocomplete feature using an example from w3schools. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_form_autocomplete Although I used jQuery to modify the form and add autocomplete="on" to both the form and input ...

jqueryhtmlautocompletegrocery-crud

PHP: Locate a class within an HTML element using a regular expression

I have a question about customizing my HTML ul menu with submenus. Specifically, I am looking to dynamically add a "first-item" class to the first item within the submenu using PHP. <ul id="menu-main" class="menu"> <li id="menu-item-68" class=" ...

phphtmlregex

Utilizing jQuery to dynamically load CSS files on a webpage

For my website, I have implemented 4 different .css files to handle various screen resolutions. Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen. <link id="size-stylesheet" rel="st ...

jqueryhtmlcss