Mockup2markup

Wie lassen sich die Marginalspalten elegant abbilden? Ein offensichtlicher Ansatz wäre das Anlegen von drei Spalten, diese floaten zu lassen und den Content darin zu verteilen. Aus verschiedenen Gründen ist diese Variante allerdings nicht optimal. Im Zuge der Lösungsfindung war es in diesem Fall hilfreich, sich die Funktion der Marginalinhalte zunächst zu verdeutlichen.

<<<<<<< HEAD

Die Inhalte in den Marginalspalten haben einen Bezug zum Inhalt der Hauptspalte. Sie ergänzen ihn, geben Zusatzinformationen oder illustrieren den Hauptinhalt mit Bildern. Darum sollten die Marginalspalten semantisch im Markup entsprechend zugehörig zur Hauptspalte sein. Diese Zugehörigkeit soll aber auch über das Layout transportiert werden. Also sollten sie vertikal möglichst nah am inhaltlichen Bezugspunkt in der Hauptspalte positioniert werden. Wir gehen hierbei von beliebigem Inhalt Vielleicht noch mal genauer darauf eingehen, was mit beliebigen Inhalt gemeint ist. aus, so dass eine Platzierung via "top" oder "margin" nicht zielführend ist.

=======

Die Inhalte in den Marginalspalten haben einen Bezug zum Inhalt der Hauptspalte. Sie ergänzen ihn, geben Zusatzinformationen oder illustrieren den Hauptinhalt mit Bildern. Darum sollten die Marginalspalten semantisch im Markup entsprechend zugehörig zur Hauptspalte sein. Diese Zugehörigkeit soll aber auch über das Layout transportiert werden. Also sollten sie vertikal möglichst nah am inhaltlichen Bezugspunkt in der Hauptspalte positioniert werden. Wir gehen hierbei von beliebigem Inhalt aus, d.h. wir wissen nicht, wie lang der Haupttext und die Marginalinhalte laufen. Daher ist eine Platzierung via "top" oder "margin" nicht realisierbar.

>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09

Um der Anforderung gerecht zu werden, den Content möglichst im Fluss zu halten, wurden die Marginalinhalte zunächst in eigene Container gepackt und mit einer Klasse ausgezeichnet.

<<<<<<< HEAD Ich würde noch eine kleine JS-Bibliothek einbinden, die Syntaxhighliting macht.
Zudem würde ich auch noch das Markup des umschließenden Containers, für ein besseres Verständnis, hinzufügen. Zudem sieht man dann auch das Markup für die CSS-Regel #wrap > article.

<h1>Headline</h1>
<p>Haupttext</p>
<div class="marginalie_rechts">Marginaltext</div>
    <p>weitere Haupttext</p>
<div class="marginalie_rechts">Marginaltext</div>

=======

<div id="wrap" class="clearfix"> 
    …				
    <h1>Headline</h1>
    <p>Haupttext</p>
    <div class="marginalie_rechts">Marginaltext</div>
        <p>weitere Haupttext</p>
    <div class="marginalie_rechts">Marginaltext</div>
    …
</div>

>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09

Der Grundgedanke war dann, eine Hauptspalte zu definieren und die Marginalinhalte nach rechts und links heraus zu ziehen. Damit sitzen die Marginalinhalte rechts und links neben dem Hauptinhalt und in der Vertikalen bleiben sie im Dokumentfluss, also dem Hauptinhalt zugeordnet.

/* Hauptspalte in die Mitte schieben */
#wrap > article {
<<<<<<< HEAD
	width: 460px;
	margin-left: 240px;
}
/* linke Marginalspalte nach links ziehen */
.marginalie_links {
	margin-left: -240px;
	width: 220px;
=======
    width: 460px;
    margin-left: 240px;
}
/* linke Marginalspalte nach links ziehen */
.marginalie_links {
    margin-left: -240px;
    width: 220px;
>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09
}

/* Rechte Marginalspalte nach rechts ziehen */
.marginalie_rechts {
	margin-left: 480px;
	width: 220px;
}

Schritt 1 als CodePen anschauen

Jetzt galt es den Negativraum zu eliminieren, den die Marginalinhalte in der Hauptspalte hinterlassen haben. Dazu definieren wir die Höhe der Marginalinhalte einfach mit 0.

.marginalie_links {
<<<<<<< HEAD
	margin-left: -240px;
	height: 0;
	width: 220px;
}
.marginalie_rechts {
	margin-left: 480px;
	height: 0;
	width: 220px;
=======
    margin-left: -240px;
    height: 0;
    width: 220px;
}
.marginalie_rechts {
    margin-left: 480px;
    height: 0;
    width: 220px;
>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09
}

Schritt 2 als CodePen anschauen

Damit waren die Anforderungen erfüllt und das Problem recht elegant gelöst. Im nächsten Schritt könnten jetzt noch Regeln ergänzt werden, die das Reaktionsverhalten der Spalten organisieren. Auch das lässt sich mit dem gegebenen Ansatz sehr leicht umsetzen. Eine Umsetzung könnte sich hier an der Idee von Thierry Koblentz "Device Agnostic Approach To Responsive Design" orientieren und zwei Content-bezogene Breakpoints setzen. Unterhalb des ersten Breakpoints könnte die linke Marginalspalte mit der Hauptspalte zusammenfließen und unterhalb des zweiten Breakpoints könnten beide Marginalspalten in der Hauptspalte aufgehen. Falls die Inhalte beider, oder auch nur einer Marginalspalte eine eher geringe Relevanz haben, könnten diese auch ab einem bestimmten Breakpoint ausgeblendet werden, um den Focus auf dem Hauptinhalt zu lassen.

Hier das CSS für den ersten Breakpoint:

@media (max-width:950px){
	
<<<<<<< HEAD
	#wrap, footer{
		width: 740px;
	}
	
	/* Hauptspalte nach links ziehen */
	#wrap > article {
		margin-left: 0;
=======
    #wrap, footer{
        width: 740px;
    }
	
    /* Hauptspalte nach links ziehen */
    #wrap > article {
         margin-left: 0;
>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09
	}
	
	/* linke Marginalspalte wieder in die 
		Hauptspalte fließen lassen */
<<<<<<< HEAD
	.marginalie_links {
		margin-left: 0;
		height: auto;
		width: auto;
	}
=======
    .marginalie_links {
        margin-left: 0;
        height: auto;
        width: auto;
    }
>>>>>>> 25c035c70644c545bd325560eb96146c19e1cd09
}

Vielleicht ist an dieser Stelle noch das CSS für den zweiten Breakpoint interessant. letzten Schritt als CodePen anschauen

Das Gute an diesem Lösungsansatz ist die Einfachheit, die sich auch im Markup ausdrückt. Der Dokumentfluss bleibt erhalten und die zusätzlichen Inhalte werden lediglich ausgezeichnet. Damit lässt sich der Content sehr gut editieren und weiter verarbeiten und Autoren müssen sich keine (großen) Gedanken machen, welcher Content wo eingepflegt werden muss. Fast keine Gedanken, denn leider gibt es doch auch einen Nachteil. Dieser ist dem height:0 der Marginalelemente geschuldet. Damit schließen wir die Negativräume in der Hauptspalte, aber gleichzeitig weiß der Browser nicht mehr, wie hoch die Marginalinhalte sind. Darum dürfen diese nicht länger als der Hauptinhalt sein, oder nicht zu weit unten im Hauptinhalt platziert sein, weil sie sonst den Hauptinhalt nach unten überragen (oder sagt man hier unterragen?) würden. Aus dem gleichen Grund ergibt sich das Problem, das Marginalinhalte ineinander laufen könnten, wenn es viele davon gibt und selbige zu lang sind.Der Vollständigkeit halber und da ein Beispiel mehr als tausend Worte sagt, könnte man hier noch ein Codepen zeigen, die den Fall zeigt wenn der der Marginalspalte zu lang ist

Trotzdem ist dies aus meiner Sicht ein sehr eleganter und schöner Lösungsweg.