Zawartość stopki (footer) pojawia się na samym dole strony, ale pojawił się drobny problem.

pytanie zadane 9 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.
Zawartość stopki (footer) pojawia się na samym dole strony, ale kilka pikseli nad stopką mam zdjęcie, które zahacza o tą stopkę. Problem polega na tym, że ta cała zawartość stopki zakrywa ten fragment zdjęcia. A chciałbym, aby ten fragment zdjęcia był widoczny.

<body>
   
    <div class="wrapper">
       
        <nav>
            <ul>
                <li class="home"><a href="index.php">Strona główna</a></li>
            </ul>
        </nav>
   
        <div id="content">
        </div>
  
        <div class="footer">Strona &copy; 2016</div>
    </div>
   
</body>

body
{
    background-color: #303030;
    font-family: Verdana;
    margin: 0px;
    width: 100%;
    height: 900px;
    position: relative;
}
   
.wrapper
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
   
#content
{
    background-color: #008000;
    height: 362px;
}
   
.footer
{
    text-align: center;
    background-color: #222222;
    color: white;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    width: 1000px;
    line-height: 60px;
}

Dopisałem w CSS do .footer:

{
    z-index: 1;
}

ale dalej jest tak samo.

Co należy dopisać do .footer, aby fragment zdjęcia nie chował się za zawartość stopki?

3 odpowiedzi

odpowiedź 9 kwietnia 2016 przez Robert Saternus Stary wyjadacz (12,180 p.)

odpowiedź 9 kwietnia 2016 przez Eimens Maniak (69,240 p.)

odpowiedź 9 kwietnia 2016 przez Nie znam Użytkownik (590 p.)
edycja 9 kwietnia 2016 przez Nie znam

Spróbuj coś takiego:

body{
   padding-bottom: wpisz tutaj wysokość stopki (np: 150px);
}

komentarz 9 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Gdy do body dopisałem margin-bottom: np. 50px, nic to nie dało, nic nie uległo zmianie.

Gdy usunąłem z .footer:

    position: absolute;
    bottom: 0;

to co prawda fragment zdjęcia jest widoczny, ale zawartość stopki przyczepiła się do diva "content".

komentarz 9 kwietnia 2016 przez Nie znam Użytkownik (590 p.)

Padding miał tam być. Mój błąd.

komentarz 9 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Do body mam dopisać padding: 0px; ?

komentarz 9 kwietnia 2016 przez Nie znam Użytkownik (590 p.)

Poprawiłem już tamten komentarz.

Zamiast margin-bottom: 50px; wpisz padding-bottom: 50px;

komentarz 9 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Niestety nic to nie dało.

komentarz 9 kwietnia 2016 przez Nie znam Użytkownik (590 p.)

Pokaż jak cały przykład. Wraz z tym zdjęciem.
Tutaj np:

http://pastebin.com/

komentarz 9 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

OK, moment. Ogarnę tylko kod ze stroną.

komentarz 9 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Teraz zrobiłem, że działa jak należy. Musiałem w HTML-u do contenta w linijce odpowiadającej za to zdjęcie dopisać do styli: z-index: 2;

<div class="tab-content-2">
	<img src="obrazki/foto2.png" style="z-index: 2; position: absolute; right: 144px; top: 192px" />
</div>

A w CSS musiałem jednak dopisać:

.footer
{
	z-index: 1;
}

Tutaj jest pokazana mechanika działania w tym temacie:

http://www.kurshtml.edu.pl/css/nakladanie,pozycjonowanie.html

Podsumowując:

z-index: 2 jako foto2.png zakrywa fragment zawartości stopki (footer) jako z-index: 1.

Dzięki za próbę pomocy i temat uważam za zamknięty.

komentarz 9 kwietnia 2016 przez Nie znam Użytkownik (590 p.)

Aż jestem ciekaw jaki efekt osiągnąłeś (lub chcesz osiągnąć), bo mam wrażenie, że za bardzo kombinujesz. No nic. W każdym bądź razie powodzenia.

Pozdrawiam