Frage 2 Bereiche im Footer

[annsen]

Ich habe einen Footer, bekomme aber eine Zeile nicht so gestaltet, wich ich möchte - vielleicht kann mir jemand einen Tipp geben, was ich verkehrt mache...

Der Code:

<footer role="contentinfo">

        <div class="footer-oben">
            <p><a href="" target="">LOREM IPSUM</a></p>
        </div>

        <div class="footer-unten-container">
            <div class="footer-l">
                <a href="impressum.html">Impressum</a>
                <a href="index.html">Startseite</a>
                <a href="#">nach oben</a>
            </div>

            <div class="footer-r">
                <a href="http://" target="_blank">blabla link1</a>
                <a href="http://" target="_blank">blabla link2</a>
                <a href="http://" target="_blank">blabla linl 3</a>
            </div>
        </div>

    </footer>

Es gibt also eine "Kopfzeile" im Footer, in der es einen Link gibt. Unter der Kopfzeile ist (linksbündig) eine Zeile, die 3 interne Links enthält (Impressum/Startseite/nach oben) - die 2 Zeilen passen auch soweit.
Die Zeile darunter soll 3 externe Links enthalten, die rechtsbündig ausgerichtet werden. Diese Zeile wird nicht wie gewünscht abgebildet. Das Problem ist, dass die Zeile unten aus dem Footer herausragt...
Bestimmt hab ich einen Fehler beim floaten gemacht!?

CSS:

@media screen {

    footer {
        margin-top: 2rem;
        }

    footer a {
        color:rgba(0,0,0,0.6);
        text-decoration: none;
        }

    .footer-r {
        text-align: right;
        float: right;
    }

}

 

[Aaron3219]

floaten ist immer eine schlechte Idee. Ich werde es später austesten, aber probiere es mal mit Flexboxen

 

[MrMurphy]

Hallo

Das Problem ist, dass die Zeile unten aus dem Footer herausragt...

Das ist aus deinen hier gezeigten Quellcodeschnipseln nicht nachvollziehbar.

Das float ist in diesem Zusammenhang sachlich falsch.

In deinem Beispiel bewirkt es gar nichts und kann einfach weggelassen werden.

Wenn du uns den problematischen Quelltext nicht zeigen kannst brauchen wir einen Link zu der Seite.

Eine weitere Frage ist warum du die Navigation auf zwei Zeilen verteilst?

Ich sehe zu dem HTML

   <footer class="pagefooter">
      <div>
         <p><a href="" target="">LOREM IPSUM</a></p>
      </div>
      <div>
         <a href="impressum.html">Impressum</a>
         <a href="index.html">Startseite</a>
         <a href="#">nach oben</a>
         <a href="http://" target="_blank">blabla link1</a>
         <a href="http://" target="_blank">blabla link2</a>
         <a href="http://" target="_blank">blabla linl 3</a>
      </div>
   </footer>

eher das CSS

.pagefooter {
   background-color: gold;
   margin-top: 2rem;
}
.pagefooter a {
   color:rgba(0, 0, 0, 0.6);
   text-decoration: none;
}
.pagefooter div:nth-child(2) {
   display: flex;
}
.pagefooter div:nth-child(2) a:nth-child(3) {
   margin-right: auto;
}

Gruss

MrMurphy

 

[annsen]

Vielen Dank für die Hinweise auf Flexbox(en) und den Code. Ich habe in meinen (Lehr)-Büchern ein paar Kapitel vorgeblättert und mich am Wochenende ins Thema eingelesen. Das klappt wirklich perfekt.

Danke nochmal!!!