Die Saugkraft der negativen Margins

Ruft mich doch neulich mein Freund Bruno an, um mich zum Kaffee einzuladen, aber nicht nur dazu, sagt er, er habe ein Problem mit seiner Webseite, ob ich da vielleicht mal, ich sei doch Profi usw. Bis auf Bloggen und Bilder reinbringen habe er ja nicht viel Ahnung davon. Worum geht’s denn, frage ich ihn, als ich dann am nächsten Tag bei ihm eingetrudelt bin.

Na ja, das Design, eigentlich sei er ja nicht besonders pingelig, aber diese grüne Trennlinie zwischen den beiden Textspalten störe ihn doch sehr.

Ausgangssituation

Ein Designproblem, stöhne ich, da kann ich ja nur hoffen, dass das kein Tabellenlayout ist, das rühre ich mit Sicherheit nicht an. Ich werfe einen Blick auf den Quellcode – rechte Maustaste ist nicht geblockt – und sehe weit und breit kein table, td oder tr. Du scheinst Glück zu haben, da kannst du schon mal den Kaffe anwerfen und das Administratorkennwort raussuchen. Das will ich dir eigentlich noch nicht geben, sagt er, sonst machst du mir noch was kaputt, kannste nicht mal so gucken? Soviel zu „Profi“ und Freund. Meinetwegen, schau ich erst einmal so.

Weit und breit kein Firefox zu finden. Der Internet Explorer hat ja mittlerweile auch ein ganz passables Entwicklertool aber mit den von Firefox doch kein Vergleich, außerdem: die

Gewohnheit. Ich lade mir nun mit dem Internet Explorer – dazu muss er sich missbrauchen lassen – den Firefox, installiere ihn und hole mir gleich noch die Add-ons Firebug und Webdeveloper. Letzteren werde ich sicher nicht brauchen, aber man kann ja nie wissen.

Nun suche ich mir mit ein paar Klicks die relevanten Bereiche und – wie zu erwarten – wunderbar floatende div-Container.

Linker Bereich markiert

Nun, welcher der beiden hat nun diesen scheußlichen Rand? Der linke einen rechten oder der rechte einen linken? Gar keiner?

Was ist denn hier los? Aha, ich ahne,

Rechter Bereich markiert

welchen widerlichen Trick der Designer angewendet hat:

Einfach ein bisschen Margin zwischen den Containern gesetzt und damit den Untergrund des umfassenden Containers als Rand

benutzt. Das haben wir gleich. Wo ist denn nun margin-left oder margin-right. Ja, da gibt es margin-right, aber die Trennlinie ist rot und nicht grün wie der Hintergrund. Nun wird es ernst, der Kaffee wird wohl doch kalt werden. Keine ähnlich großen Container darunter oder darüber, die den Rand hätten liefern können. Ich ahne Schlimmes: irgendwo muss ein Hintergrundbild sein, das den Rand liefert. Solch ein sauberes Layout und CSS-Design und dann solch eine Trickserei. Ich kann es eigentlich kaum glauben.

 

Will da jemand die Spaltenbreiten ändern, muss er nachjustieren, will er die Farbe oder die Breite der Trennlinie ändern, muss er ein Grafikprogramm bemühen und das Bild natürlich wieder über ftp einbinden. Von einem flexiblen Layout, bei dem sich die Textbreiten dem Browserfenster anpassen, kann schon gar keine Rede sein. Welch ruchloses Tun und das bei diesem Design.

Bild für Trennlinie wird in unbekanntes Bild umbenannt

Aber tatsächlich, er hat es getan. Gibt es doch tatsächlich einen einschließenden Container mit einem positionierten Hintergrundbild von wenigen Pixeln, das sich beliebig oft vertikal wiederholt: die Trennlinie. Ich blende das Hintergrundbild im Firebug-Baum aus, indem ich es umbenenne und siehe da der Rand ist verschwunden. Nun aber ordentlich border setzen, die sich beliebig anpassen und auch blitzschnell ändern lassen. Ich gebe also dem linken Bereich einen rechten Rand mit einem dezenten Weißanstrich, alles temporär selbstverständlich, das Administratorvertrauen genieße ich ja immer noch nicht.

Linker Bereich erhält weißen rechten Rand

Dann scrolle ich ein bisschen nach unten und, oh Schreck, die Trennlinie hört mit dem rechten Text auf und links geht der Text ohne Trennlinie weiter.

Hässlich. Nichts einfacher als das. Gebe  ich also dem rechten Container einen linken Rand und schon läuft der Rand bis unten.

Rechter Bereich erhält linken Rand

Aber wie sieht denn das aus, oben ist er ja dicker als unten.

Oh Gott, ist ja klar, jeder Bereich will seinen eigenen Rand haben und drückt den anderen Bereich halt ein bisschen weg.

Nun fange ich an zu begreifen, warum mein Vorgänger diese Lösung gewählt hat, aber nein, ein Zurück kann es nicht geben, nachdem ich – wenn auch nur innerlich – mein Verdammungsurteil gesprochen habe. Kurz überlege ich noch, ob ich irgendeinen Trick ausfahre, um die Container gleich lang zu machen, dann brauch ich nur noch einen Rand, aber das verwerfe ich schnell wieder, nicht nur weil mir der Aufwand zu groß für dieses Miniproblem erscheint sondern vor allem, weil ich dieses Thema in einem meiner nächsten Artikel behandeln möchte. Bruno schleppt mir den lauwarmen Kaffee ran und kann sich ein „wird wohl nischt“ nicht verkneifen. „Verschwinde“, fauche ich und versuch, mich entspannt zurückzulegen. Da gibt es was, denke ich, und vermeide es, an mein Image zu denken sondern an das der Webseite. Da dämmert es langsam. Irgendwo habe ich von der „Saugkraft der Margins“, genauer der negativen Margins gelesen. Die Margin ist so etwas wie ein Niemandsland, du kannst es aber nur vor (positiv) oder nur hinter (negativ) der Grenze verwenden. Legst du es hinter die Grenze lässt es die Feinde über die Grenze springen und hinderst die Freunde sich zu verdrücken. Kam mir irgendwie bekannt vor. Also gebe ich erst einmal dem linken Container eine rechte negative Margin von der Breite meiner Grenze und siehe da, die Grenze ist überall gleich dick.

Linker Bereich erhält negative Margin von der Breite des Randes

 

Scheint so, als ob die eine Seite auf den Mauerbau verzichtet hat, sonst hätte es irgendwie

krachen müssen. Versuchsweise gebe ich der anderen Seite auch eine negative Margin. Wie sieht es nun aus? Darüber lasse ich Bruno grübeln, nachdem ich ihm das mit dem Niemandsland erläutert habe.

 

Um nun zu prüfen, ob die Trennlinie immer gleich lang ist, egal ob im linken oder im rechten Teil der längere Text steht, tausche ich nun die Texte aus. Natürlich gibt es mit der Trennlinie keine Probleme,

aber nun sehen wir eine andere Schwäche: die dunkelgraue Hintergrundfarbe des linken Bereiches sollte natürlich die gleiche Ausdehnung haben wie die Trennlinie. Bruno ist enttäuscht und ich muss noch einmal grübeln. Geht das mit CSS. Vielleicht mit dem gleichen fiesen Trick, der negativen Margin?

Ich dehne beide Bereiche mittels padding sehr weit nach unten aus, so dass mit Sicherheit jede Textlänge überschritten wird und nehme diese Ausdehnung mit Hilfe der negativen Margin gleicher Größe wieder zurück.

Gleichelange Bereiche mit Hilfe von Padding und negativer Margin

Um im obigen Bild zu bleiben: das Padding bildet einen inneren Schutzwall, der durch das Niemandsland negative Margin wieder aufgehoben wird. Und siehe da es klappt. Aber nur, weil wir dem Gesamtbereich schon mit overflow:hidden versehen haben.