HTML und CSS für Designer

Die <section> schwimmen lassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Designvorgabe aus InDesign sieht einen linken und einen rechten Seitenabstand zum Fließtext vor. Da das Online-Magazin responsive umgesetzt werden soll, muss hier das gesamte Dokumente zentriert und mit flexiblen Randbreiten ausgestattet werden.

Transkript

Möchte ich diesen Container, in dem sich der Fließtext befindet, ähnlich wie in meinem Vorgabedokument zentriert unter diesem Bild ausgeben, dann ist da ein ganz kleines bisschen mehr Arbeit notwendig. Diese Arbeit, was man dort quasi verrichten muss, die schauen wir uns jetzt an. Das Ganze sieht nun so aus, dass ich aufgrund der Angabe hier im Stylesheet, - ich wechsele da mal hin- hier oben mit "margin:0" -- "margin" im Übrigen, wenn man kein "top", "left", "right" nimmt, und schreibt dann die 0 hin, dann betrifft das "top","right","bottom" und "left", also alle Angaben, alles ist 0. Da ich das eben gemacht habe, habe ich das Problem, dass nun auch der Fließtext, also alles, was hier innerhalb des "section"-Bereiches steht, mit 0 nach links und auch mit 0 nach oben, abgesehen von diesem Eintrag, ausgerichtet wird. Da muss ich mir nun Gedanken machen: Wie kriege ich das wieder verändert? Zum Einen möchte ich die "section" schwimmen lassen in einer Mitte. Denn es kann ja nicht sein, dass ich jetzt hier die Größenangabe habe, und das Ganze steht nur linksbündig. Ich weiß ja gar nicht, wie groß ist hier mein Dokument. Es muss ja immer die Mitte ausmachen, nicht mehr und nicht weniger. Entsprechend trage ich hier nun ein, dafür gibt es einen kleinen Trick: Das ist "margin-left:" nach links "auto", und noch mal "margin-right:" auch. Gucken wir, was jetzt passiert. Da wird nicht so viel passieren, weil, wir können das nicht so groß machen, dass ich das zeigen kann. Das Ganze schwimmt bereits an der Stelle, das Einzige was fehlt, ist das "padding", der Abstand, da nehme ich mal 1,75, das habe ich mir vorher rausgesucht: "paddding:1,75em". Jetzt wird's gleich deutlich: Jetzt mache ich eine maximale Breite des Dokumentes von 75 rem. Schauen wir uns an, was das jetzt bedeutet. Die Abstände, die eingetragen wurden, und vor allen Dingen, hier links und rechts der Abstand: Jetzt wird es sichtbar, wenn ich das Ganze jetzt vergrößere. Sie merken, jetzt fängt es an zu schwimmen. Dann habe ich die Gewissheit, dass die maximale Breite dieses Dokumentes 75 rem ausmacht. Mehr kann ich auf diesen Bildschirm in dieser Auflösung nicht zeigen. Wenn Sie einen größeren Bildschirm hätten, würden sie feststellen, dass dieses Verhältnis langsam wächst, weil es prozentual ist zum Originaldokument. Aber so ist genau das, was ich mir vorgestellt habe, von den Abständen entstanden. Um das mal zu verdeutlichen, was man da noch verändern kann: Maximalbreite nicht 75, sondern nehmen wir mal 50, ich speichere das ab. Jetzt ist der Abstand weitaus größer geworden, vielleicht sogar schöner, keine Ahnung. Dann merkt man auch, dass das Ganze wirklich schwimmt. Da passen sich dann auch alle Inhalte mit ein, denn die müssen ebenfalls mitsortieren; erst dann, wenn kein Platz mehr da ist, dann soll das Ganze zusammenrutschen. Das tut es auch schon bereits. Wir sind nahezu fertig mit unserer Formatierung. Das Einzige, was jetzt noch ansteht, sind Abstände hier zu den Überschriften. D. h., hier muss man mit "margin-bottom" oder "margin-top" arbeiten, je nachdem, was man dort machen möchte. Der Rest, der noch fehlt, ist hier unten, das sind die Abstände hier zwischen den einzelnen Aufzählungspunkten. Das kann man gerade noch einfügen, das geht ruckzuck. Ich suche mir also hier den "ol"-Bereich. Da geht's jetzt, was den Abstand angeht, nicht um "ol", sondern um die Liste. Das bedeutet, das ist "section ol li". Die Liste selber, die muss ich verändern, das ist einfach nur "margin-top:1.55em", das habe ich mir schon vorher rausgesucht. Jetzt habe ich genau das, was sich auch in dem Vorgabedokument meines InDesign-Designentwurfes ausgesucht und eingestellt habe, in dem CSS abgebildet. Jetzt sind wir nahezu fertig, wie gesagt, noch ein paar kleine Abstände hier bei den Überschriften. Sie können damit selber herumspielen, oder schauen in das fertige Dokument, wenn sie Zugriff auf die Projektdateien haben. Aber damit ist uns das Dokument fast schon 1:1 gelungen, wie wir uns das in InDesign vorgestellt haben.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!