Auf Thema antworten

Beitrag

[QUOTE="Vogtei, post: 11924, member: 3490"]
Hallo zusammen,

ich bastel gerade in CSS etwas mit SVG Hintergründen herum und habe jetzt das Problem, dass sich mein Footer mit dem DIV der Hintergrund SVGs überlappt, habt ihr eventuell eine Idee, wie ich das lösen könnte?

Mein Problem:
[ATTACH type="full" width="494px"]169[/ATTACH]

So sollte es sein, der Footer hat seinen festen Platz am Ende der Seite:
[ATTACH type="full" width="491px"]170[/ATTACH]

[B]Code:[/B]

[I]HTML:[/I]
<div class="background">
        <img id="bg" src="quelldateien/bg.svg">
        <img id="left" src="quelldateien/left.svg">
        <img id="right" src="quelldateien/right.svg">
</div>

<footer class="footer">
        <div class="container">
            <div class="row">
                <div class="footer-col">
                    <h4>Unternehmen</h4>
                    <ul>
                        <li><a href="#">Über Uns</a></li>
                        <li><a href="#">Unser Service</a></li>
                        <li><a href="#">Datenschutz</a></li>
                        <li><a href="#">Impressum</a></li>
                    </ul>
              </div>
                <div class="footer-col">
                    <h4>Kontakt</h4>
                    <ul>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Galerie</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Richtlinien</a></li>
                        <li><a href="#">Versand</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Online Shop</h4>
                    <ul>
                        <li><a href="#">Silikone</a></li>
                        <li><a href="#">Klebstoffe</a></li>
                        <li><a href="#">Acrylate</a></li>
                        <li><a href="#">Sonstiges</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Folge Uns</h4>
                    <div class="social-llinks">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
          </div>
      </div>
    
</footer>

[I]CSS:[/I]
.background {
    position: absolute;
    width: 100%;
}

#left {
    position: absolute;
    width: 15%;
    display: block;
    padding-top: 700px;
}

#right {
    padding-top: 100px;
    position: relative;
    width: 15%;
    display: block;
    float: right;
}

#bg {
    position: absolute;
    width: 100%;
    display: block;
}

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.footer {
    background-color: #6c757d;
    padding: 70px 0;

Schon mal vielen Dank und ein schönes Wochenende!
Grüße Leon
[/QUOTE]

Authentifizierung