HTML und CSS für Designer

Listenformatierung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Da Listenobjekte in HTML aus zwei Containern bestehen, benötigt man in der CSS-Umsetzung ebenfalls zwei Blöcke, um das gewünschte Design umzusetzen.

Transkript

Nachdem wir den Textkörper und sämtliche Inhalte, die im "section"-Bereich sich befinden, nahezu formatiert haben, also die Typographie übertragen haben, fehlt noch hier die Aufzählung. Das liegt daran, dass auch das ein separates Absatzformat ist in InDesign, also wenn ich einen Doppelklick darauf ausführe, dann sieht man bei den Absatzformaten, dass es die "Ordered List" ist. Die Einstellung, die ich hier zuweise, muss ich auch im CSS-Dokument zuweisen. Das machen wir mal: Ich bin im Bereich Textinhalt, setze das Ganze unter die "section p", das ist jetzt schon nichts mehr Neues, nur dass sich das Ganze auf "ol", die "Ordered List" beziehen muss. Ich mache mir das jetzt einfach, ich kopiere das, denn das ist ja die gleiche Einstellung, die ich dafür brauche. Wie man sieht, wenn ich das abspeichere, dann sieht das so aus, wie es sein soll. Wenn Sie aber einen solchen Fall haben, dass der Inhalt einer Definition komplett identisch ist, dann brauchen Sie sich die Arbeit gar nicht machen, das zu schreiben, denn ähnlich, wie man auch in InDesign einen Zeichensatz bzw. ein Absatzformat aufeinander aufbaut... Hier sieht man nämlich, hat es jetzt das gleiche Format, aber z. B. bei "Header" ist das nächste Format "Page". Im Grunde ist das ein Aufbau, und dann haben wir hier auch die Information "Basiert auf". Ich mache das mal rückgängig. Jetzt müsste ich mir ein "Header"-Format bzw. ein Zeichenformat heraussuchen, was irgendwo drauf basiert, aber genau das ist die gleiche Variante, die wir hier anwenden können. Somit spare ich mir das, lösche das alles und schreibe dann einfach hier oben hinter, mit ein Komma, "ol". Also "section p" und "ol" mit diesen Einstellungen. Das speichere ich ab, aktualisiere das. Da tut sich nix, das ist gut, denn dann ist die Einstellung übernommen. Hier unten das "ol" habe ich ja gelöscht, irgendwoher muss er die Info kriegen, also greift er sich diese. Und damit haben Sie schon eine weitere Variante kennengelernt, wie auch hier unterschiedliche Angaben zugewiesen werden können, und damit ist die Formatierung fast abgeschlossen.

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!