Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Funktionsweise negativer Abstände

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert detailliert die grundsätzliche Funktionsweise von negativen Abständen bei der Gestaltung eines mehrspaltigen Layouts.

Transkript

Hier ist ein dreispaltiges Layout und, wenn ich hier das im Inspektor zeige, dann sieht man sehr deutlich, dass hier ein negativer Margin mit im Spiel ist, klein, bisschen größer noch hier, main der mittlere Inhaltsbereich hat 60% Breite links, 20% Margin, das ist einfach nachvollziehbar, einfach hier 20% und jetzt margin:right -80%. Sie sehen hier schon, das ist der Trick an der Sache, um hier die Sidebars, die im Quelltext nachdem main kommen, hier an beliebiger Stelle einzublenden, also, beliebig heißt links und rechts. Und wir können die beiden natürlich auch tauschen: infobereich float:right und infobereich2 float:left, und schon sind die am Bildschirm andersrum. Das ist, also, eine fast beliebige Reihenfolge, Die Frage, die noch bleibt ist: Wieso funktioniert das überhaupt? Und dazu möchte ich Ihnen hier die Geschichte mit dem negativen Margin kurz erläutern. "Float und negativer Margin", das ist eine Sache für sich, und zwar ist dieser negative Margin entgegen der Float-Richtung. Das ist das Besondere, also ein Margin entgegen der Float-Richtung erzeugt eine Leere, eine Art Vakuum, versieht das Element, so mit einer Tarnkappe, ermöglicht dadurch eine fast beliebige Spaltenreihenfolge entgegen der Float-Richtung, und, das ist wichtig, bedeutet bei float:left ein negativer margin-right und bei float:right ein negativer margin-left. Hier im Browser bedeutet, also, main hat float:left und hat einen negativen margin-right. Das bedeutet, dass das Hellgelb, hier das main Element, das bekommt eine Tarnkappe, so dass man die andern einfacher positioniern kann. Was hat das jetzt es mit der Tarnkappe auf sich? So funktionieren negative Margins. Im Beispiel haben wir margin-right-80%. margin-right beginnt an der rechten Kante des Elements. Das ist also hier beim Übergang zum Pink Farben in Infobereich2. Dort beginnt der margin-right hier unten. Ein positiver Wert geht nach rechts, ganz normal margin-right 80%, und das wäre natürlich viel zu viel, weil rechts überhaupt kein 80% Platz mehr sind. Ein negativer Wert geht nach links, das heißt, also, jetzt bekommt man langsam Karussellfahrt in dem Kopf, ein negativer margin:right geht nach links. Der positive Wert würde nach rechts gehen, ganz normal, und der geht nach links, der fängt also hier an, und jetzt sehen Sie auch die 80% sind kein Zufall, sondern der erstreckt sich über die 60% von main und die 20% margin:left von main. Der negative margin:right geht also über die komplette Breite bis ganz hier außen hin. Ein negativer margin bewirkt, dass das Element für andere eigentlich nicht mehr zu sehen ist. Also, der Wert -80, das ist die Summe von width und margin:left gerade gesehen hier noch einmal die Summe von width und margin:left ist -80 in diesem Fall. Also, die Summe ist natürlich 80, aber wir setzten ein minus(-) Zeichen davor, damit wir mit negativen Margins arbeitenen können. Das gefloatete Element, also main in diesem Fall wird durch einen negativen Margin ganz normal positioniert, also, das normale Float wird nicht verändert, aber es wird für andere Elemente quasi versteckt. Das hatten wir ganz im Anfang gesehen, dass die Elemente, wenn hier die beiden nicht gefloatet werden, so und denn auch weg, dann sehen Sie, wenn da auch keinen width wäre, dann laufen die da einfach drüber weg. Das sieht man hier sehr wunderbar, also, das main Element existiert gar nicht für die beiden. durch diesen negativen Margin einmal neu laden und die Ausgangsposition neu herstellen hier. So, und jetzt kann man dadurch eine fast beliebige Reihenfolge erreichen. Ich hatte eben schon gezeigt hier, bei aside, wenn ich den auf Float:right setzte. So, dann schwingt der da auch über, und ich jetzt main in den Float drin lasse, aber hier den margin:left wegnehme, dann sehen Sie, dass haben Sie so typisches Block Layout. Hier kommt die Block-Beiträge und hier eine doppelte Sidebar. Überhaupt kein Problem und einmal neu laden, und Sie sehen, genauso können wir die beiden Bereiche tauschen, wenn ich hier main habe in der Mitte und hier der hat im Moment float:left, dann setzte ich den mal auf right und hier den Infobereich2 wieder auf left, und schon sind die andersrum. Also, Float und negative Margins ermöglichen eine fast beliebige Reihenfolge am Bachen.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!