Auf Thema antworten

Beitrag

[QUOTE="bastian48, post: 15020, member: 5390"]
Hi ich habe ein recht einfaches Problem. Trotzdem verzweifle ich daran: Ich möchte einen Footer gestalten: Links eine Span, in der Mitte ein div, und recht ein Link. (selbstverstänlich responsive) also egal wie breit der Bildschirm immer sollte es schön verteilt sein. Das Div in der Mitte macht mir Probleme (daran sind social media icons).

html: (der sollte soweit passen der code)
[CODE=html]<footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <span>Das ist ein beispieltext.</span>
                        <div class="center-links">
                        <a href="link2" target="_blank">
                            <svg id="insta" href="test" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                              <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
                            </svg>
                          </a>
                          <a href="link1" target="_blank"></a>
                          <svg xmlns="test" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
                          </svg>
                        </a>
                    </div>
                        <nav id="footer-nav">
                            <a href="impressum.html">Impressum</a>
                        </nav>
                    </div>
                </div>
            </div>
        </footer>[/CODE]

und hier css:
[CODE=css]#footer {
  background-color: #000;
  height: 2.8rem;
  color: var(--weiss);
  display: flex; /* Flexbox aktivieren */
  justify-content: space-between; /* Verteilt die Elemente gleichmäßig zwischen links, Mitte und rechts */
  align-items: center; /* Zentriert die Elemente vertikal */
  padding: 0 1rem; /* Fügt etwas Abstand am Rand hinzu */
  width: 100%; /* 100% Breite */
}
#footer svg {
  fill: #fff; /* Setzt die Farbe des Logos auf Weiß */
  transition: fill 0.3s ease; /* Weicher Übergang beim Hover */
  margin: 0 1rem; /* Abstand zwischen den Icons */
}
#footer a {
  text-decoration: none; /* Entfernt die Standard-Unterstreichung von Links */
}
/* Hover-Effekt für das Instagram-Logo und Facebook-Logo */
#footer svg:hover {
  fill: #f529ae; /* Ändert die Farbe beim Hover */
}
/* Link-Spans auf der linken und rechten Seite */
#footer span {
  color: white; /* Weißer Text */
}
.center-links {
  display: inline-flex; /* Flexbox aktivieren */
  justify-content: center; /* Zentriert die Links */
  align-items: center;
  gap: 0.5rem; /* Abstand zwischen den Icons */
}
#insta {
  top: 0.2rem;
}
/* Footer-Navigation auf der rechten Seite */
#footer-nav {
  display: inline-flex;
  justify-content: flex-end;
  float: right;
}
#footer-nav a {
  text-decoration: none;
}
#footer-nav a:link,
#footer-nav a:visited,
#footer-nav a:active {
  color: var(--weiss);
}
#footer-nav a:hover {
  color: var(--hell-grau); /* Hover-Effekt für Navigation */
}
@media (max-width: 590px) {
  #footer span {
    display: none; /* Versteckt die Spans auf kleinen Bildschirmen */
  }
}[/CODE]

Entweder die drei dinge sind schön angeordnet horizontal dann habe ich das Problem das das div direkt nach der span links kommt (nicht in der Mitte) oder durch ändern der display Eigenschaft kann ich erreichen das das div in der Mitte ist dann rutscht der Inhalt links nach oben und die nav rechts runter.

Das Problem sollte nicht so schwer sein trotzdem kann ich es nicht fixen und chat gpt leider auch nicht.

Danke für eure Hilfe
[/QUOTE]

Authentifizierung