HTML/CSS - 2-Spalten Layout nach Vorgabe (Aufgabe)

rtyz

Hallo allerseits,
ich sitze schon viel zu lange an folgender Aufgabe:
"Erstellen Sie zu folgendem Screenshot das HTMLDokument. Verwenden Sie ein absolutes Zwei-Spalten Layout, die Navigationsspalte sollte 100 Pixel breit sein und der Abstand zwischen den Boxen 10 Pixel."

Folgendes (unfertige) Dokument ist vorgegeben:

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
header,footer,nav,article {
    background-color: yellow;
    border-style: dotted;
    border-width: 1px;
}
nav {...}
article {...}
</style>
</head>
<body>
    <header>Überschrift</header>
    <nav>Navigation...</nav>
    <article>Inhalt...</article>
    <footer>Fußzeile</footer>
</body>
</html>

Alles anzeigen

Hier mein (mMn. bisher bester) Lösungsansatz:

HTML

<!doctype html>
<html>
<head>
    <style type="text/css">
        header, footer, article, nav {
            background-color: yellow;
            border: 1px dotted;
        }
        nav {
            width: 100px;
            float: right;
            margin: 10px 0 10px 5px;
        }
        article {
            margin: 10px 5px 10px 0;
        }
        footer {
            clear: right;
        }
    </style>
</head>
<body>
    <header>&Uuml;bung</header>
    <nav>Navigation Navigation Navigation</nav>
    <article>
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    </article>
    <footer>Fu&szlig;zeile</footer>
</body>


</html>

Alles anzeigen

Wie man sehen kann ignoriert der article-block den nav-block einfach (abgesehen vom Inhalt, dieser umfließt den nav-block).
Ich konnte das Problem sogar beheben indem ich article eine absolute Breite gegeben und 'float' ebenfalls auf 'right' gesetzt habe.

HTML

article {
            width: 200px; <!-- ausgedachter Wert -->
            float: right;
            margin: 10px 5px 10px 0;
        }

Nur ich kann mir doch nicht einfach einen Wert für die Breite ausdenken...

MrMurphy

Hallo

Float ist überhaupt nicht für Layouts gedacht und hat zudem Nebenwirkungen. Zum Beispiel werden gefloatete Elemente aus dem Dokumentenfluß genommen. Float ist in diesem Zusammenhang also sachlich falsch und sollte nur Aufgaben übernehmen, für die es auch erstellt wurde. Nämlich damit Text andere Elemente, in der Regel Bilder, umfließt.

Ich habe mal eine Lösung mit aktuellem HTML und CSS erstellt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <style type="text/css">
   body {
      display: flex;
      flex-wrap: wrap;
   }
   header,
   footer,
   nav,
   article {
      background-color: yellow;
      width: 100%;
      border-style: dotted;
      border-width: 1px;
      margin: 5px;
   }
   header {
      order: 1;
   }
   nav {
      width: 100px;
      order: 3;
   }
   article {
      width: calc(100% - 124px);
      order: 2;
   }
   footer {
      order: 4;
   }
   </style>
</head>
<body>
   <header>Überschrift</header>
   <nav>Navigation...</nav>
   <article>Inhalt...</article>
   <footer>Fußzeile</footer>
</body>
</html>

Alles anzeigen

In der Praxis werden noch ein paar zusätzliche Angaben erforderlich sein, aber ich habe nur die notwendigen Angaben zur Lösung der Aufgabe verwendet.

Gruss

MrMurphy

rtyz

Zitat von MrMurphy

Float ist überhaupt nicht für Layouts gedacht und hat zudem Nebenwirkungen.

Das hatte ich genau falsch herum in Erinnerung, kein Wunder das ich mit der Aufgabe solche Probleme hatte. Jedenfalls vielen dank für das Beispiel MrMurphy.

Jedoch befürchte ich das du womöglich auf Methoden zurückgreifst die für den Stand der Aufgabe etwas zu fortgeschritten sind (konntest du natürlich nicht wissen) :).

Ich habe jetzt nochmal alle meine Unterlagen durchgeblättert und bin nun ziemlich sicher das man diese Aufgabe mit 'position' lösen soll.

Hier mein Ansatz:

HTML

<!doctype html>
<html>
<head>
    <style type="text/css">
        header, footer, article, nav {
            background-color: yellow;
            border: 1px dotted;
        }
        nav {
            margin: 10px 0 10px 0;
            position: absolute;
            right: 8px;
            width: 100px;
        }
        article {
            margin: 10px 118px 10px 0;
        }
    </style>
</head>
<body>
    <header>&Uuml;bung</header>
    <nav>Navigation Navigation Navigation</nav>
    <article>
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
        Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    </article>
    <footer>Fu&szlig;zeile</footer>
</body>


</html>

Alles anzeigen

Es ist jetzt nicht 100% perfekt (z.B. falls article-height < nav-height) aber ich bin fürs erste zufrieden. Nochmal danke MrMurphy für den entscheidenden Hinweis.

Tags