Individuelle Abstände in HTML/CSS: So geht’s!

Damit hätte ich nicht gerechnet! Auf mein lapidares Twitter-Gestöhne, man könne doch nicht <p></p>, <br><br><br> oder &nbsp;&nbsp;&nbsp; verwenden, um sich Abstände in HTML/CSS-Layouts zurechtzuzimmern, kamen einige ernstgemeinte Rückfragen in Richtung: »Wie sollen wir es denn dann handhaben?« Dafür dieser Artikel.

Zunächst einmal: Der Grund, warum oben genannte Abstandstechniken uncool sind, ist eine Vermischung von Struktur und Styling. Ich packe damit das Styling-Vorhaben »horizontaler Abstand« und »vertikaler Abstand« in den HTML-Code, wo es nicht hingehört. HTML ist für die logisch-hierarchisch-semantische Struktur zuständig, und im CSS kümmert man sich um alles, was visuell zum Styling beiträgt, also auch die Abstände.

Für entsprechende vertikale Abstände nutzt man selbstredend margin und padding, und beschreibt damit die gewünschten Abstände vor und nach bestimmten Headlines und Absätzen. Gerne auch mittels :first-child oder :nth-child() die Abstände zwischen schwerer zu greifenden Konstellationen. Auch der Plus-Selektor (.content ul + p) kann wertvolle Dienste leisten, um dort Abstände zu setzen, wo sie sinnvoll sind.

Doch manchmal ist die Konstellation des Inhalts etwas ungünstig, denn man möchte bisweilen an bestimmten Stellen Abstände haben, wo vielleicht gerade kein besonderes Strukturelement gesetzt ist, der diesen Abstand mit sich bringt. Wenn man also in Gottes Namen ins HTML eingreifen muss, um genau zu definieren, wo denn nun der Abstand hin soll, verwendet man in der Regel das class-Attribut, hängt es an bestehende Elemente (z. B. p oder ul) und denkt sich sinnvolle Klassennamen aus, an die man dann per CSS Abstand zuweist.

Nicht cool sind dabei Klassen wie .large-space-top oder .bottom35, denn dabei handelt es sich um de-facto-Styling-Angaben. Auch diese haben in HTML nichts zu suchen.

Besser wären Klassen wie .teaser, .new-section oder keep-seperated, denn dabei wird ein wenig Semantik deutlich: Man beschreibt mit den Klassen die Funktion, die dieses HTML-Element erfüllt, und kann das im CSS mit den gewünschten Styling-Regeln hübsch machen. Ist mehr Denkarbeit, letztlich aber sinnvoll, denn man bleibt im CSS flexibel und kann statt 35 Pixel auch später mal auf 45 Pixel hochgehen, wenn es besser aussieht. Und im HTML steht dann diese blöde 35er-Klasse nicht fälschlicherweise herum!

In der Horizontalen sieht’s ähnlich aus. Statt:

<div class="timing">17.11.2011&nbsp;&nbsp;–&nbsp;&nbsp;19.11.2011</div>

schreiben wir im HTML lieber:

<div class="timing"><span class="from">17.11.2011</span>–<span class="to">19.11.2011</span></div>

Klar, das ist länger. Aber ich habe zwei wunderbare Haken, an denen ich flexibel handhabbare CSS-Regeln festmachen kann, die über padding-right: 20px; oder padding-left: 16px ganz exakt den Abstand der beiden Datumsangaben definieren können.

Also: Scheut nicht die Arbeit! Haltet das HTML sauber und denkt euch ordentliche, bedeutungsschwangere HTML-Klassennamen aus, dann klappt’s auch bei der Code-Übergabe zu einem anderen Frontend-Entwickler.

30 Kommentare

Pascal

Wo du recht hast, hast du recht!

Zusatzstoff

Wenn das jetzt auch noch die Leute von den WYSIWYG Editoren verinnerlichen würden wäre das Web ein Stückchen besser.

Jakob

Recht so! ;)

Oliver Beckenhaub

Dem ist eigentlich nicht viel hinzuzufügen. Solange man die volle Kontrolle über das HTML hat, ist dein Weg ohne Frage der richtige!
Was aber, wenn der Redakteur, der die Website pflegt, seine Texte über den WYSIWYG-Editor eines CMS selbst »gestaltet«. Hier und da noch ein Umbruch, da noch ein paar Leerzeichen und schon entstehen dann meist genau die von dir bemängelten »HTML Abstände«. Genau das gleiche Problem wie mit dem beliebten Ãœberschriftenformat p strong, was meist genau durch den selben Grund entsteht.
Lässt sich also leider öfters nicht vermeiden, sobald ein »Kunde« an die Seite rangeht, außer man bietet ihm den WYSIWYG-Editor erst gar nicht an.

David

@Oliver
Dann muss der Redakteur in die Funktionsweise des Editors eingearbeitet werden. TinyMCE bringt schon nahezu perfektes Markup hervor, wenn man weiß, wie man ihn bedinen muss.

Steffen Giers

@David

Dann muss der Redakteur in die Funktionsweise des Editors eingearbeitet werden.

Na klar… wenn der Kunde das bezahlt. Sehr gerne :)

Die meisten haben aber kein Verständniss für richtiges Markup. Schon gar nicht für Semantik. Eigentlich muss ein Redaktuer das auch nicht haben. Es ist ja unsere Aufgabe sowas abzufangen. Allerdings ist das auch hier eine Frage des Budgets. Wer hat schon was zu verschenken.

Ausserdem hat die (Mikro)Semantik ein Problem. Es gibt heute wenige Argumente, die eine teure Schulung der Redaktuere rechtfertigt. Und wenn der Redakteur kein Bewusstsein dafür entwickelt bzw. hat… lassen wir das :)

Belles Lettres

Ich habe vor fünf Jahren nur zum Spaß mit HTML und CSS angefangen. Die letzte Schwelle hin zum minimalistischen Markup und wahrhaft kaskadierenden Styling überwindet man nur, wenn man diesen Schritt wirklich gehen will. Wer es beruflich macht, muß diesen Schritt tun, aber den anderen, für die es nur Mittel zum Zweck ist, ist wohl nicht begreiflich zu machen, daß perfektes Markup schöner als ne nackte Frau ist.

Man braucht nicht einmal alle Selektoren aus CSS3 und muß den Elementen im Markup auch keine Klassen geben. Dies kann ja schwierig sein, wenn ein ahnungsloser Redakteur etwas posten will.

Mit Plusoperator und Vererbung kann man jedes Layout hinbekommen. Als Markup-Privatier staune ich schon oft, wenn ich das Markup aus professioneller Hand sehe. Der unnötige Clearfix fehlt da leider nie.

Obwohl es ja immer wieder heißt, Kaskadieren wäre im Seitenaufbau langsamer als das direkte Ansprechen von IDs. Meiner Erfahrung nach liegt der Unterschied aber in einem Wimpernschlag. Wenn es ihn überhaupt gibt.

Man kann übrigens auch <br /> stylen.

ra

@Belles Lettres: Jetzt hast du mich aber neugierig gemacht. Inwiefern ist denn der Clearfix unnötig?

David

Also Clearfix hab ich glaub noch nie gebraucht. Wozu auch? Aber egal.

Ich befülle alle meine Seiten nicht mit dem WYSIWYG Editor sondern im HTML Modus. Da hab ich komplett die kontrolle und es gibt kein böses Erwachen :)

Fabian Michael

Prinzipiell gebe ich dir recht. Aber in der Praxis muss auf einer Website oft mal schnell etwas geändert werden und dann wird sich kaum jemand hinsetzen, seine Agentur anrufen und fragen, ob sie schnell noch eine neue CSS-Klasse erstellen kann. Das soll aber nicht heißen, dass ich in irgendeiner Form gegen sauberes Markup und eine gute Trennung von Struktur und Form bin.

Ich denke, sobald ein Kunde Inhalte selbst pflegt, kann man solches Markup kaum mehr vermeiden. Die Einrückungen und <br/> finde ich dabei schlimmer, als die leeren Absätze.

Machen wir uns aber auch nix vor, heutige WYSIWYG-Editoren sind nicht gerade die erst Sahne, das Bearbeiten von Inhalten im Web ist nach wie vor im Bezug auf Komfort meilenweit von Tools aus dem Printbereich wie Adobe InDesign entfernt. Hier lassen sich direkt Regeln für bestimmte Absätze erstellen und über reguläre Ausdrücke so etwas wie <span>s automatisch innerhalb von Textblöcken erstellen.

Seit ich mit meiner Bachelor-Arbeit zum ersten Mal ein Dokument vom Umfang eines Buches erstellt habe, wurde mir bewusst, dass im Web im Bezug auf Content-Editing noch eine große Baustelle vorhanden ist. Und TinyMCE (als Quasi-Standard) erinnert optisch leider auch eher an Word ’97. Und wenn man sich vor Augen hält, wie die meisten Leute Word oder ähnlichen Programmen ihre Texte formatieren, dann wundert es mich zumindest bei Content-Autoren nicht, wenn sie ihre Inhalte auf derartige Art und Weise formatieren.

Natürlich hinkt der Vergleich etwas, aber bestimmte Dinge sind doch bei jedem Web-Projekt erneut ein Graus. Jeder hier kennt sicher das Problem Adressdaten: Telefon, Fax, Email sollen untereinander und eingerückt werden:

- Tabulatoren zum Einrücken? Gibt’s nicht. – Tabelle? Kompliziert und auch vielleicht nicht die optimale Lösung. – Definitionsliste? Vielleicht. Aber die muss noch per CSS optisch angepasst werden.

Wobei die meisten wie gesagt kaum wissen werden, was denn nun eigentlich eine Definitionsliste ist. Ich kann es keinem Content-Manager übel nehmen, wenn es am Ende entnervt auf die Leerzeichen zurückgreift. Es ist wirklich ein Graus, dass die Macher des Webs bei den Lösungen für solche banalen Probleme nicht ein wenig mehr Pragmatismus gezeigt haben und es auch anscheinend bis heute nicht tun. Als Webworker kann man sich freuen, denn jede halbwegs vergeudete Stunde, um kleine Textformatierungsprobleme durch einen Profi lösen oder erklären zu lassen, schafft am Ende Arbeitsplätze. Auch modernere WYSIWYG-Editoren wie Aloha werden diese Probleme wohl kaum in den Griff kriegen können.

Natürlich braucht jeder halbwegs professionelle Umgang mit einem bestimmten Medium auch eine gewisse Einarbeitung und ein gewisses Grundwissen und zumindest das sollte irgendwie halbwegs vermittelbar sein.

Trotz meinem ganzen Gemecker: Ich finde es gut, dass du eine solche Anleitung veröffentlichst, denn offenbar besteht hier vielerorts Nachholbedarf.

erlehmann

Per JavaScript geroutete Hashbang-Links vertragen sich nicht mit Browserns bzw. Feedreadern, die HTTP und HTML verstehen, aber kein JavaScript (können oder aktiviert haben). Sie verstoßen insofern gegen das Robustheitsprinzip.

Ich benutze daher bei Permalinks auf Twitter immer die Mobil-Version und würde mich freuen, wenn du das auch tun würdest. In diesem Fall: https://mobile.twitter.com/gerritvanaaken/status/137182108899753984

e2b

@erlehmann:

Schöner und einfacher ist es, wenn man einfach die Hashbang-Zeichen (also #!/) entfernt: https://twitter.com/gerritvanaaken/status/13718210889975398

Es handelt sich dabei um eine Art Standard, um AJAX-Aufrufe wieder in normale URLs umzuwandeln, die dann für Suchmaschinen zugänglich sind. Weil die entsprechende Webseiten nur die URL nach dem Doppelkreuz anpassen, wird die Webseite nicht jedes mal neu geladen, was bei AJAX prinzipiell unerwünscht ist. In HTML5 gibt es eine Lösung für diesen Workaround, dort lässt sich der Verlauf über die Methoden history.replaceState() und history.pushState() in JavaScript entsprechend anpassen bzw. neue URLs hinzufügen.

Siehe auch:
* Getting Started – Making AJAX Applications Crawlable – Google Code
* isolani – Javascript: Breaking the Web with hash-bangs
* ongoing by Tim Bray &#xb7; Broken Links
* 5.4 Session history and navigation &#8212; HTML5
* Manipulating the browser history – MDN

Alex

Dass man sowas im Jahr 2011 überhaupt noch erklären muss ist schade.

mes

Ich als Laie fand den kostenlosen Video-Cast 30 Days to Learn HTML & CSS bei tutsplus.com ganz nett. So nebenbei wird dort nämlich genau der semantische Ansatz vermittelt.

Micha

Auf mit WYSIWYG Editoren kann man schönes HTML erzeugen lassen. In allen Vertretern können individuelle Klassen, IDs und Blocklevel-Elemente mit Kombinationen aus Klassen und IDs hinzugefügt werden, die dann über Selectfelder verfügbar sind.

Unnötige Angaben wie mehrere nbsp oder leere p usw. können super mit dem HTMLPurifier gefiltert werden.

erlehmann

e2b, ich kenne die History API – die Bitschubser bei Twitter aber offenbar nicht (im Gegensatz zu z.B. GitHub, dort wird das vorbildlich eingesetzt). Diese Art Standard ist schon deswegen ein Problem, weil die Verwendung Referrer kaputt macht.

Dein vorgeschlagener Link ist übrigens nicht die korrekte Normalisierung einer Hashbang-Schreibweise. Probier es selbst aus:
1402 ~ ★ curl -sI https://twitter.com/gerritvanaaken/status/13718210889975398 | head -n1
HTTP/1.1 404 Not Found

fwolf

@ Fabian Michael:

TinyMCE kann z.B. mit Vorlagen überredet werden, da richtig mitzumachen. Außerdem kann man natürlich in allen gängigen CMSen/Frameworks das, was TinyMCE + Co. so an den Server zurücksendet, zusätzlich parsen.

Damit gehen dann auch so Konstrukte wie:

1. Backend: Vorlage mit Tabelle zum Einfüllen
2: Frontend: Schönes, sauberes HTML ohne Layouttabellen-Krücke oder Leerparagraphen

cu, w0lf.

ps: So geschehen AFAIR etwa beim Karussellblog (habe damals einen Artikel darüber für die WEAVE geschrieben).

e2b

@erlehmann:

Doch, die Schreibweise ist korrekt. Allerdings hatte ich deinen Link falsch kopiert, es fehlt eine 4 am Ende, sorry. Korrigierte Link: https://twitter.com/gerritvanaaken/status/137182108899753984

Facebook setzt übrigens auch schon die History API ein, schade das Twitter das noch nicht implementiert hat, zumal die Hashbang-Schreibweise weiterhin als Fallback genutzt werden könnte. Und in modernen Browsern sollte die API sowieso verfügbar sein. Das würde auch die Verwirrung und Nachteile rund um die Hasbang-Schreibweise beheben.

Belles Lettres

@ra: Man braucht kein DIV allein für den Clearfix einzufügen. Es reicht zur Not, wenn man das Blockelement, bei dem der Float enden soll, über CSS ein unsichtbares Pseudoelement einfügt.

<code>
.section:before { content: ».«; color: transparent; clear: left; float: none; }
</code>
(Programmierzollzeichen statt typografische Anführungszeichen)

So bleibt das Markup sauber.

Was man (in HTML 5) auch machen kann, wenn an dieser Stelle eine inhaltliche Zäsur stattfindet: ein <hr /> ins Markup einfügen. Das muß im Layout nicht zu sehen sein.

@David (9):
»Also Clearfix hab ich glaub noch nie gebraucht. Wozu auch? Aber egal. Ich befülle alle meine Seiten nicht mit dem WYSIWYG Editor sondern im HTML Modus. Da hab ich komplett die kontrolle und es gibt kein böses Erwachen :)«

Benutzt Du denn Floats? Clearfix kann schon nötig sein, weil man ja nicht nur das Floating irgendwann stoppen will. Das erste statische Element kollabiert ja auch, wenn es das Elternelement in der Breite voll ausfüllt. Das sieht man aber erst richtig , wenn man diesem Element einen Topmargin geben will.

Frank

Wann kommt Dein Lehrbuch zum Webdesign? Aber bitte von der Pike auf, dass ich es auch verstehe!

Gerrit

@Frank: Buch wird es von mir in absehbarer Zeit nicht geben, wohl aber einen Videoworkshop. Hier zum Kaufen

erlehmann

Das ist trotzdem nicht die korrekte (als ob es da so etwas geben würde) Normalisierung einer Hashbang-Schreibweise, die enthält nämlich „_escaped_fragment_“.

Nebenbei: »Das hier« typografisch umzuwandeln finde ich mindestens grenzwertig (siehe Kommentar Nummer 22). Ist ja nicht so, als ob „Anführungszeichen“ bzw. »Guillemets« nicht auf der Tastatur verfügbar sind. Und hier wird sicher öfter über Code geredet als anderswo.

e2b

@erlehmann:

Du scheinst dich allein auf die Google-Spezifikation zu beziehen, diese passt aber in diesem Fall aus mehreren Gründen nicht. Dort geht es um Parameter, die von nach dem Hash gesetzt werden, bei Twitter und anderen Seiten handelt es sich allerdings offensichtlich um einen absolute Pfadangabe relativ zum Hostname. Außerdem ist dies beschriebene Vorgehensweise für die einfache Integration von bereits vorhandenen AJAX-Anwendungen in die Google-Suchergebnisse gedacht, ohne die Webseite neu zu strukturieren. Ich hatte die Quelle nur als Hintergrundinformation angegeben.

Wie dem auch sei, die beschriebene Umformung zu einem echten Link funktioniert bei allen Seiten mit #!/, die ich kenne. Außerdem ist die Lösung wesentlich besser als den User auf eine für mobile Geräte optimierte Version zu drängen.

Vlad

Recht haste, daher: +1 :-)

erlehmann

e2b, „für mobile Geräte optimierte“ Seiten sind – wenn es sie denn gibt – oft weit weniger überladen. Falls das für dich ein Nachteil sein sollte, hoffe ich inständig, dass du keine Webseiten baust.

e2b

@erlehmann:

mobile.twitter.com hat seine Vorteile bei mobilen Geräten. Auf dem Desktop möchte ich allerdings die normale Version verwenden, wo ich eh schon eingeloggt bin. Meiner Meinung nach wird man durch einen Link direkt auf die mobile Version nur bevormundet, denn auf einem Smartphone wird man sowieso dorthin umgeleitet.

Wie dem auch sei, du kannst natürlich gerne verwenden was Du willst, auch wenn ich es nicht als allgemeine Empfehlung aussprechen würde. Im Gegensatz zu Dir stört es mich auch nicht, wenn Du da anderer Meinung bist. Und ja, ich weiß wie man (mobile) Webseiten baut.

Enduro

Hilfreich wäre zb ein konkretes Beispiel für einen vertikalen Abstand, den man kopieren könnte und nur die Abstände ändern… Für Websites-Rookies wie mich.

T/io

Gibt es auch eine Lösung, wie man in einer Navigation zwischen den Textschnipseln optisch exakt gleiche Abstände mit CSS (oder JS) einrichtet, sodass aber das erste und das letzte Navigationselement mit dem Rand der Navigation abschließen?

Ich bekomme sowas mit JS nicht gedreht, und bei CSS hab ich keinen Schimmer, ob das überhaupt gehen kann, darumm muss ich da &nbsp;s und co verwenden…

Jan

Und wenn die »Profis« jetzt vielleicht auch noch beachten würden, dass die, die sie so schrecklich finden, keine Profis sind, könnten sie eventuell daran denken, dass ein rein theoretisches Blabla eben diese nicht weiterbringt.
Schön, ich verstehe jetzt, warum man das machen sollte. Dass man irgendwo, irgendwas, irgendwie einfügen muss, um irgendwas zu erreichen, das steht da auch. Aber konkret wird es nicht. Hau doch mal ein explizites und vollständiges Beispiel rein, damit auch der letzte, der eben kein Profi ist, den Kram auch versteht. Die Konsequenz aus dem obigen ist für mich: Die »Erklärung« hier vergessen und »unprofihaft« weitermachen. Denn das erklärt sich von selbst, das ist einfach, es bringt das Ergebnis. Es sieht nur nicht schön im Editor aus – was aber nur den stört, der daran arbeitet – wenn es ihn überhaupt stört. Mich stört es nicht. Warum also in etwas hineinarbeiten, bei dem man hier nur um den heißen Brei redet, wenn es anders auch ausreichend funktioniert? Mehr als ein »Prinzip« gibt es da nicht als Grund.

Ein weiteres Problem: Nimmt man Templates oder ähnliches, kann man in der Regel nicht all zu viel in den dafür vorgesehenen Feldern umschreiben. Da müsste man schon in die css- und schießmichtot-Dateien gehen. Wenn ich das aber muss, dann hat es für mich von Anfang an keinen Sinn, überhaupt ein Template zu nutzen, dann würde ich den Kram nämlich auch gleich selber machen.

Die Moral von der Geschicht‹: Meckern hilft nichts, wenn man nicht zeigt, wie man es besser macht, sodass es auch derjenige versteht, den man erreichen will.

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.