Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML und CSS für Designer

Vom Textumfluss zum Margin

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Box-Modell von CSS bereitet vielen Designern große Schwierigkeiten, dabei sind diese Einstellungen 1:1 auch aus Kreativprogrammen bekannt. Das Kind benötigt nur einen neuen Namen, ansonsten ist es leicht zu adaptieren.

Transkript

Nachdem in einem ersten Schritt die typographischen Vorgaben wie die Schrift auszusehen hat, welche Farben und welche Abstände in CSS umgesetzt wurden, geht es jetzt um die Übertragung des eigentlichen Designs, und da drunten fallen natürlich auch Abstände, zum Beispiel. Hier muss ich ein wenig ausholen, da möchte ich an der Stelle auch ausholen, gerade die Umsetzung der Designvorgaben mit diesen besagten Abständen, das ist immer etwas, was uns in CSS permanent begegnen wird, und was vielen, aus welchen Gründen auch immer, große Schwierigkeiten bereitet. Aber Sie werden sehen, das ist gar nicht so kompliziert. Um das zu verdeutlichen, rufe ich mal ein neues Dokument auf. Ganz gleich, was wir haben und lege einen neuen Textrahmen an, und lasse diesen mit Mustertext füllen. Zoomen wir mal ein bisschen rein. Jetzt habe ich die Möglichkeit, über diesen Textrahmen einen weiteren Rahmen zu legen. Zunächst einmal könnte ich hier ganz normal ein Rechteck darüber legen. Die Kontur schalte ich mal aus, und nehme eine Flächenfüllung. Entsprechend, was damit geschehen soll und mit den darunter liegenden Text, kann ich in InDesign über die Werkzeugpalette Textumfluss realisieren. Im Moment liegt das Ganze einfach da drüber. Klicke ich zum Beispiel diese Option Umfließen der Bounding Box an, passt sich der Text dem Untergrund an. Das gibt es auch entsprechend bei CSS. Auch hier haben alle Objekte einer Webseite quasi eine solche Box, auch wenn man die nicht sieht, das ist auch in InDesign oder einem Satzprogramm der Fall, denn wenn ich jetzt einen Text eintragen will, ich schreibe jetzt mal "Inhalt". Das Ganze richte ich mal zentriert aus, und um das in die Mitte der Box zu bekommen gibt es in InDesign die Möglichkeit die Textrahmenoptionen zu verwenden, und da kann ich hier bei Vertikale Ausrichtung sagen: Zentrieren. Nehmen wir noch ein bisschen was Größeres: 20 - soll reichen. D. h. jetzt habe ich einen Text innerhalb einer Box stehen und wenn der Rahmen beispielsweise auch keine Füllung hat dann sieht das Ganze so aus. Und das entspricht genau dem, was in einer ganz normalen Texteingabe in CSS passiert, ob das Text ist, oder die Bereiche section, body img, die p-Angabe für "page" der Hyperlink und so weiter. Sämtliche Container-Objekte in CSS verhalten sich prinzipiell genau so, wie diese "bounding box" um diese Texteingabe herum. Und genauso wie hier gibt es ebenfalls diverse Randeinteilungen. also bspw. im Moment ist es ja so, dass der Text oben, unten, links und rechts, direkt innerhalb der "bounding box" sitzt. Wenn ich jetzt das Ganze ein wenig erweitern möchte, - ich muss jetzt wieder in den Bereich der Textrahmenoptionen hinein - rechte Maustaste, dann kann ich ihn mit dem Abstand zum Rahmen tatsächlich modifizieren. Ich verwende mal jetzt für links, rechts, oben und unten jeweils zehn Millimeter. Ich bestätige das, und habe vom Textinhalt zehn Millimeter, - vielleicht ein bisschen viel, ich passe das mal auf fünf an - jetzt habe ich vom Textinhalt zum Rahmen fünf Millimeter. Und genauso, wie ich innerhalb des Textrahmens und innerhalb dieser "bounding box" fünf Millimeter habe, kann ich das Ganze nun auch noch nach außen mit einem Abstand versehen. Das geschieht über den Textumfluss Hier kann ich zum Beispiel sagen, hier fünf Millimeter nach außen hin. Jetzt haben Sie es gesehen, jetzt haben wir auch diese drei Rahmen, wenn ich den Textrahmen komplett aktiviere, die sichtbar sind. Wir haben den Inhalt, der abhängig von der Größe ist, wir haben den Abstand vom Inhalt zum Rahmen, und wir haben den Abstand vom Rahmen nach außen zu den nächsten Objekten. Ich kann das Ganze noch toppen, denn jetzt kann ich noch eine Kontur drumherum setzen. Also, beispielsweise, nehmen wir, damit man es erkennen kann, eine pinke Farbe, und von mir aus auch fünf Punkte stark. Ich muss die Box gerade wieder anpassen. Jetz wären wir soweit. Wenn ich jetzt hier reinscrolle, dann fällt auf, dass der Rahmen genau zentriert auf diesem Rahmen sitzt, den ich aufgezogen habe. Anders ausgedrückt, die Kontur sitzt mittig. Und auch dort gibt es die Möglichkeit das zu verändern, denn das entspricht nicht so ganz der Einstellung wie wir sie in CSS wiederfinden, aber kein Thema. Ich gehe hier auf Fenster, rufe die Werkzeugpalette Kontur auf, und sage nun, hier sieht man nämlich, da kann ich sagen, ob die Kontur mittig, das ist Standard in InDesign, oder innen oder außen ausgerichtet sein soll, und richte ich das außen aus, dann liegt die Kontur außen am Rahmen zum Text. Was Sie nun hier sehen, das entspricht 1:1 den Einstellungen, die wir in CSS verwenden, die dort nur etwas andere Namen mit sich bringen. Ich ziehe das mal hier rüber, da habe ich schon was vorbereitet, so eine einfache PNG-Datei. Die rufe ich mal auf. Das, was Sie jetzt sehen, sind typische Beschreibungen für genau dieses Prinzip: margin, border, padding, content in CSS. Sie sehen, dass ist 1:1 identisch. Wir haben den Inhalt, das ist der Content. Wir haben den Abstand vom Inhalt zum Rahmen, und das ist das padding. Wir haben den Abstand vom Rahmen zum nächsten Objekt, das ist das margin. Und wir haben den Rahmen selber, der hier als border daherkommt. Und genauso, wie es auch hier steht also die Einteilungen in top, right, bottom und left, die kann ich hier genauso 1:1 umsetzen. Also, beispielsweise, wenn ich hier den Abstand zum Text links und rechts vergrößern möchte, dann nehme ich einfach diese Verknüpfung in der Mitte heraus, und sage dann hier, anstatt 5, 15 und rechts bitte auch nochmal 15. Sie sehen, das ist absolut identisch. So würde ich dann diese Einstellung, die ich gerade vollzogen habe, mit margin left, das entspricht dem hier und margin right, entspricht dem hier. Margin top und margin bottom, dann hätten wir an der Stelle padding bottom, padding left, padding top, padding right Eigentlich ist es gar kein Geheimnis, und deswegen bereits aus InDesign oder aus Ihrem Satzprogramm, wo das mit ziemlicher Sicherheit ähnlich gehandhabt wird, bereits bekannt. Das können wir in CSS nun 1:1 umsetzen, um Abstände - ich schließe das mal - zum Beispiel wieder in diesem Dokument. von dem Textrahmen zur nächsten Grafik, oder von dieser Grafik zum Text, wo auch immer Sie das benötigen, das ist ja ein bisschen flexibel, wie man das gestalten möchte. Aber damit sind Sie nun in der Lage, das Ganze anzupassen

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)
Teresa S.
Ein super Einstieg in das Thema Responsive Design. Durch die Gliederung ist es für Fortgeschrittene leicht, bereits bekannte Themen zu überspringen und direkt zu den Neuerungen zu hüpfen. Ansonsten ist es auch geeignet für Anfänger und, wie in meinem Fall, um Wissen wieder aufzufrischen.
 

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!