DIV позиционирование в нижнем колонтитуле - PullRequest
Новая
       28

DIV позиционирование в нижнем колонтитуле

0 голосов
/ 25 января 2020

Я пытался создать домашнюю страницу, но не смог разместить div в нижнем колонтитуле. Это всегда отображается выше. Кто-нибудь может подсказать, почему он отображается таким образом?

Вот мой код: 

* {
  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>

Вот как это выглядит. Изображение отображается над нижним колонтитулом: - (

screenshot

Большое спасибо

astroship

1 Ответ

1 голос
/ 25 января 2020

Создается впечатление, что изображение находится не в нижнем колонтитуле, потому что его цвет фона не черный, а белый. Но это поведение, которое вы приписываете своему css с * {}. Просто удалите background-color из *, и вы увидите, что изображение на самом деле находится в вашем нижнем колонтитуле: 

*{
    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>
...