Beiträge von rtyz

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.

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...

Beiträge von rtyz

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

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