Dlaczego footer jest nie tam gdzie powinien?

0

Cześć, poniżej wklejam kod mich wypocin. Dopiero zaczynam z html i css i mam problem. Mój footer ląduje nie tam gdzie powinien. Ląduje na img z section pod header.
Proszę o pomoc bo nie bardzo wiem co jest źle.
Z góry dzięki za pomoc.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="page-style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=latin-ext" rel="stylesheet">
  <title>Verso Company</title>
</head>

<body>

  <header>

    <h1>Verso</h1>

  </header>

  <section>
    <nav id="head">
      <ul>
        <li>About</li>
        <li>Skincare</li>
        <li>Find</li>
        <li>Science</li>
        <li>Press</li>
        <li>Join</li>
      </ul>
    </nav>

    <img src="header-image.jpeg" alt="">
  </section>

  <div class="main">

    <div class="grid">
      <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg">
      <div class="desc">
        <p>skincare products</p>
      </div>
    </div>

    <div class="grid center">
      <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg">
      <div class="desc">
        <p>about verso skincare</p>
      </div>
    </div>

    <div class="grid">
      <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">
      <div class="desc">
        <p>verso day crem</p>
      </div>
    </div>

    <div class="grid">
      <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg">
      <div class="desc">
        <p>where to find verso</p>
      </div>
    </div>

    <div class="grid center">
      <img src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg">
      <div class="desc">
        <p>8 thruths about verso</p>
      </div>
    </div>

    <div class="grid">
      <img src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg">
      <div class="desc">
        <p>press materials</p>
      </div>
    </div>

  </div>

  <footer>
    <nav id="foot">
      <ul>
        <li>contact / email</li>
        <li>verso company policy</li>
        <li>facebook / youtube</li>
      </ul>
    </nav>
  </footer>

</body>

</html>

* {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

body {
  width: 90%;
  margin: auto;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

header {
  height: 300px;
  background-color: crimson;
  position: relative;
  border-bottom: 2px solid #000000;
}

header h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#head li {
  display: block;
  float: left;
  width: 16.666%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

section img {
  width: 100%;
  margin-bottom: 20px;
}


.grid{
  display: block;
  width: 32%;
  float: left;
}

.center {
  margin-left: 2%;
  margin-right: 2%;
}

.grid img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  padding-bottom: 25px;
  text-align: center;
}

footer {
  display: block;
  border-top: 2px solid #000000;
  position: absolute;
  bottom: 0;
  background-color: cornflowerblue;
}

#foot li {
  display: block;
  float: left;
  width: 33.33%;
  text-align: center;
}
0 
footer { position: relative; }

Jak dajesz absolute - to wylatuje w kosmos w stosunku do nadrzędnego relativa, w tym przypadku do body bodajże.
Ogólnie kod zrąbany, mnóstwo błędów semantycznych. Dam gdzie dajesz float: left, uprzedź wcześniej parenta wyczyszczeniem formatowania, tj.: clearfixem.
http://webkod.pl/kurs-css/lekcje/dzial-1/float-fix-oraz-clear-fix

0

Może zmień position:; w footer z absolute na relative oraz przenieś atrybut background-color:; do #foot li?

0

można też sprawdzić/wzorować się na gotowych rozwiązaniach:
https://devcorner.pl/prosta-responsywnosc-10-systemow-grid-css/

0

Ok zmieniłem position i teraz wylądowało tam gdzie powinno. Ale mam kolejne dwa pytania.
Dlaczego border-top z footer nie wyświetla się nad footer tylko nad div o klasie grid lub main.
A drugie pytanie to dlaczego footer nie ma tła.

Zauważyłem już, że wystarczyłoby odnieść się do elementu #foot li i wyszłoby tak jakbym chciał. Ale wydaje mi się, że z footer też powinno to zadziałać.

0

Podstawy HTML.... https://the-awwwesomes.gitbooks.io/html-css-step-by-step/content/pl/css-layout/css-floats/index.html

1 użytkowników online, w tym zalogowanych: 0, gości: 1