CODEWITHSUNDEEP
htmlcssfooter
user12628514
user12628514

Reputation:

DIV positioning in footer

I tried to create a homepage but can't manage to place a div in the footer. It's always displayed above. Can anybody give me a hint why it is displayed that way?

Here is my code:

* {
  color: #000000;
  background-color: #FFFFFF;
  font-family: "Arial", "Sans serif", "Roboto", "ApexNew";
  padding: 0;
  margin: 0;
}

html {
  color: #000000;
  background-color: #FFFFFF;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

body {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  font-family: "Arial", "Sans serif", "Roboto", "ApexNew" !important;
  width: 100%;
  height: 100%;
}

#footer {
  width: 100%;
  height: 520px;
  color: #FFFFFF;
  background-color: #000000;
}


/* --Footer-- */

.ovfl {
  width: 200px;
  height: 200px;
}
<!doctype html>
<html lang="en-US">

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="../assets/css/pages/index.css">
</head>

<body id="page-top" class="body">

  <header id="header" class="header">
    <nav id="navbar" class="navbar">

    </nav>
  </header>

  <main id="main" class="main">
    <div id="hero" class="hero">
    </div>
    <div id="newsletter" class="newsletter">
    </div>
  </main>

  <footer id="footer" class="footer">
    <div>
      <a href="#" id="ovfl-link" class="ovfl-link"><img src="../../../Pictures/JPG/gred.jpg" alt="Ovabis" id="ovfl" class="ovfl"></a>
    </div>
  </footer>

</body>

</html>

This is what it looks like. The image is displayed above the footer :-(

screenshot

Many Thanks

astroship

Upvotes: 0

Views: 49

Answers (1)

johannchopin
johannchopin

Reputation: 14844

You have the impression that the image is not in the footer because its background color is not black but white. But this is the behavior that you attribute in your css with * {}. Just remove the background-color of * and you will see that the image is actually in your footer:

*{
    color: #000000;
    
    /* This rule color your #ovfl image background*/
    /*background-color: #FFFFFF;*/
      
    font-family: "Arial", "Sans serif", "Roboto", "ApexNew";
    padding: 0;
    margin: 0;
}

html{
    color: #000000;
    background-color: #FFFFFF;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

body{
    color: #000000 !important;
    background-color: #FFFFFF !important;
    font-family: "Arial", "Sans serif", "Roboto", "ApexNew" !important;
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 520px;
    color: #FFFFFF;
    background-color: #000000;
}

/* --Footer-- */

.ovfl{
    width: 200px;
    height: 200px;
}
<!doctype html>
<html lang="en-US">
<head>
 <!-- CSS -->
</head>
<body id="page-top" class="body">

    <header id="header" class="header">
        <nav id="navbar" class="navbar">

        </nav>
    </header>

    <main id="main" class="main">
        <div id="hero" class="hero">
        </div>
        <div id="newsletter" class="newsletter">
        </div>
    </main>

    <footer id="footer" class="footer">
        <div>
          <a href="#" id="ovfl-link" class="ovfl-link">
            <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Ovabis" id="ovfl" class="ovfl">
          </a>
        </div>
    </footer>

</body>
</html>

Upvotes: 1

Related Questions