Rastergrafik als Positionierungshilfe

Am Bildschirm sind 2cm eine sehr sehr relative Längenangabe. Dank zahlreicher Browserbugs gilt das gleiche leider oft auch für eigentlich so eindeutige Anweisungen wie 20 Pixel. Über Perus Weblog fand ich nun kürzlich etwas, das bei derartigen Fragen Abhilfe verspricht: Ein großes Raster mit Pixelangaben als Hintergrundbild zum präzisen Abmessen von Positionen und Längen. Eine schöne Idee, allein, die Grafiken, die's dort zu laden gab erschienen mir aus zweierlei Gründen nicht besonders brauchbar.

Warum ein neues Raster?

Erstens scheine ich der einzige zu sein, der bei der Gestaltung seiner Websites das Layout nicht in 10er-Schritten, sondern in Zweierpotenzen anlegt - bei mir ist nie etwas 250 Pixel breit, sondern bestenfalls 256 Pixel. Erscheint mir bei Computergrafiken sinnvoll, der Bildschrim ist ja in der Regel auch 1024 Pixel und nicht 1000 Pixel breit.

Zweitens ist diesere Raster-als-Hintergrundbild-Konstruktion ebenfalls nicht sinnvoll, sobald auf der Seite andere Elemente ebenfalls Hintergründe sporten und damit das Raster überdecken. Also heißt es mal wieder selbst ist der Mann.

Download und How-To

In mühevoller Kleinarbeit habe ich also ein mir zusagendes Raster in verschiedenen Farben gebaut. Als transparentes PNG lässt sich jede Version als absolut positioniertes img sehr schön über allen bestehenden Inhalt legen - an den Linien kann man dann seine Elemente präzise ausrichten.

Die Anwendung ist ebenfalls denkbar einfach, muss man doch lediglich die Grafik als absolut positioniertes Element auf seiner Seite einfügen.

<img src="grid-blue.png"
    style="position:absolute; top:0; left:0;" />

Und schon hat man ein schönes Raster über seiner Seite liegen und kann in Bequemlichkeit Pixel schubsen.

Raster bei Kram-hochladen.de im Einsatz
Wenn mal ein Element nicht genau sitzt, lässt es sich mit Hilfe eines Rasters genauestens nachvollziehen.

Einen (geringfügigen) Nachteil hat diese Technik allerdings. Das Raster ist ein absolut positionirtes Element über überdeckt als solches alle anderen Elemente - oder zumindest die meisten. Das heißt, dass Links u.Ä. die unter dem Raster liegen aufgrund der Transparenz der PNGs zwar sichtbar, aber nicht mehr anklickbar sind. Nicht weiter schlimm, weil außer dem Entwickler eh niemand das Raster zu sehen bekommen sollte. Und schließlich hat man ja seine statischen URLs sowieso im Kopf. Alles kein Problem.

Die praktische Ein-Bild-Navigation

Manchmal möchte man aus rein optischen Erwägungen auf seiner Seite eine aus Grafiken bestende Navigation haben. Das bedeutet im Normalfall viel Arbeit. Man muss die ganzen Einzelgrafiken zurechtscheiden (und jeweils Mouseover-Versionen), sich dann den Kopf darüber zerbrechen wie man den Mouseover-Effekt realisiert (Javascript? Kann man abschalten. CSS-Pseudoklasse :hover? Geht beim IE auf img-Elementen nicht...) und am Ende muss man sich dann auch noch darum bemühen, dass der Mouseovereffekt ohne Verzögerung beim Nachladen der entsprechenden Grafik kommt.

Weniger ist mehr

Die Lösung all dieser Probleme besteht darin, die entsprechenden Schritte beim Bau einer Bildernavigation einfach nicht auszuführen. Nehmen wir erst einmal eine ganz einfache HTML-Navigation her:

<ul id="navi">
    <li><a href="/">Startseite</a></li>
    <li><a href="projekte.html">Projekte</a></li>
    <li><a href="referenzen.html">Referenzen</a></li>
    <li><a href="impressum.html">Impressum</a></li>
</ul>
Das Navibild
Dies Bildnis ist bezaubernd schön... bzw. hässlich. Macht aber nichts, es ist ja nur ein Beispiel.

Passend dazu basteln wir uns dann die grafischen Repräsentationen der Navigationspunkte (inkl. Varianten für den Mouseover-Effekt), lassen sie aber, statt sie wie gewohnt in Einzelbilder zu zerlegen, in einem Stück.

Dieses Bild wird in Folge nicht mehr angerührt - ab jetzt brauchen wir nur noch css und ein paar kleinere Änderungen an der HTML-Datei. Der Plan sieht wie folgt aus:

  1. Die Navigationspunkte (Der Text zwischen den a-Tags) werden mit einem Image-Replace-Trick durch das große Navigationsbild ersetzt.
  2. Durch individuelles CSS-Styling wird das Navigationsbild für jeden Punkt so positioniert, dass es aussieht als wäre dort jeweils ein Einzelbild am Werke.
  3. Weil das ganze in a-Tags stattfindet, ist es kein Problem mit der :hover-Pseudoklasse den Mouseovereffekt zu erstellen. Es wird einfach das Navigationsbild für a:hover so verschoben, dass statt der normalen Grafik die Mouseover-Version zu sehen ist.

Schritt 1

Image-Replace-Trick bedeutet in diesem Fall, dass die a-Tags zu Block-Elementen werden, ein Hintergrundbild bekommen - und dass der Text zwischen den a-Tags verschwindet. Wir setzen ihn einfach in einen Span und stylen diesen unsichtbar. CSS-Fähige Browser werden ihn nicht anzeigen, aber für Suchmaschinen, Screenreader und Textbrowser ist der Text immer noch da. Der Code für diesen Schritt:

<ul id="navi">
    <li><a href="/"><span>Startseite</span></a></li>
    <li><a href="projekte.html"><span>Projekte</span></a></li>
    <li><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

CSS macht aus den Links Block-Elemente und verpasst ihnen unser Navibild als Hintergrund.

#navi {
  list-style-type:none;
  margin:0;
  padding:0;
}

#navi li a {
  display:block;
  width:160px;
  height:32px;
  background:white url(navi.jpg) no-repeat top left;
}

#navi li a span {
  display:none;
}

Jetzt sieht die Navigation schon richtig nach etwas aus, allein die richtige Positionierung des Hintergrundbildes für die einzelnen Punkte fehlt noch.

Schritt 2 und 3

Mit CSS und background-position kein ist die Positionierung des Hintergrunds kein Problem; und um Zeit zu sparen, legen wir das ganze gleich so an, dass die Position beim Mouseover eine andere ist. Weil das ganze ja nur Hintergrundbilder eines a-Tags sind, brauchen wir dafür nicht mehr als die :hover-Pseudoklasse. Um die einzelnen Links in den Navigationspunkte zu identifizieren, verpassen wir den Listenpunkten noch IDs. Jetzt schaut das ganze so aus:

<ul id="navi">
    <li id="navi-start" ><a href="/"><span>Startseite</span></a></li>
    <li id="navi-projekte"><a href="projekte.html"><span>Projekte</span></a></li>
    <li id="navi-referenzen"><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li id="navi-impressum"><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

Das CSS mit all den Zahlen ist dann doch etwas mühsam (Beziehungsweise es wird schnell mühsam wenn die Navigationsliste lang wird), aber schneller als sich im Grafikprogramm einen Wolf zu schnibbeln ist's allemal. Letztendlich ist es ja nur einfachstes Rechnen.

#navi-start a:link, #navi-start a:visited, #navi-start a:active {
    background-position:0px 0px;
}
#navi-start a:hover {
    background-position:0px -128px;
}

#navi-projekte a:link, #navi-projekte a:visited, #navi-projekte a:active {
    background-position:0px -32px;
}
#navi-projekte a:hover {
    background-position:0px -160px;
}

#navi-referenzen a:link, #navi-referenzen a:visited, #navi-referenzen a:active {
    background-position:0px -64px;
}
#navi-referenzen a:hover {
    background-position:0px -192px;
}

#navi-impressum a:link, #navi-impressum a:visited, #navi-impressum a:active {
    background-position:0px -96px;
}
#navi-impressum a:hover {
    background-position:0px -224px;
}

Uns schon ist unsere Navigation fertig. Kein Javascript, keine großen IE-Probleme, keine Nachladezeit-Probleme. Die optimale Lösung wenn's denn mal Bilder sein müssen.

Nachtrag vom 26. August 2007

Die Methode, die hier zum Verstecken des Textes der Navigationspunkte verwendet wird, hat den Nachteil, dass die versteckten Elemente von Screenreadern nicht erfasst werden. Wie man es besser besser macht ist im Artikel über Image Replacement beschrieben.

Klicken-Sie-Hier-Links taugen nichts.

Wenn es an das Erstellen von Inhalt geht und Links gesetzt werden, ist der häufigst gemachte Fehler das Produzieren von Klicken-Sie-hier-Links. Diese sehen in der Regel so aus: Klicken Sie hier um unser Angebot einzusehen! Was soll daran schlecht sein? Wie sonst soll der arme Surfer denn wissen, dass er hier etwas anklicken kann!

Dies ist das mehr oder minder einzige Argument, das für Klicken-Sie-hier-Links spricht. Und dieses Argument ist durchaus nicht immer abwegig. Wenn der Webdesigner Mist im großen Stile gebaut hat, trifft es zu, anderenfalls nicht.

Einen Link erkennt jeder

Ein Link in einem Text ist in der Regel als solcher zu erkennen, durch Farbe und durch Unterstreichung - Entweder durch den Designer so festgelegt oder durch den Browser mangels Angaben in Eigenregie so dargestellt. Um einen Link in Text zu verstecken, müsste man sich als Gestalter einer Seite regelrecht anstrengen. Jeder, der schon mal mehr als 20 Minuten im Internet unterwegs war, weiß: Bunt + unterstrichen = Anklicken!. Niemandem muss man erklären was mit einem Link zu tun ist, solange die Zielgruppe einer Seite nicht aus jenen besteht, die in ihrem Leben wirklich noch nie eine Maus in der Hand hatten. Somit ist der einzige Grund für Klicken-Sie-hier-Links dahin und wir wenden uns der langen Liste der Gegenargumente zu. Um diese zu illustrieren, habe ich mir erlaubt, zwei Beispieltexte zu improvisieren:

Linktexte im Beispiel

Beispiel A:

Die Include Design GbR ist ein junges Unternehmen, dass für Sie Websites nach Maß erstellt. Klicken Sie hier um unseren Onlineauftritt zu besuchen. Klicken Sie hier um unsere Referenzen anzuzeigen und sich von unserer Arbeit zu überzeugen. Um unser Kontaktformular aufzurufen, klicken Sie hier und lassen Sie uns wissen was Sie brauchen.

Beispiel B:

Die Include Design GbR ist ein junges Unternehmen, dass für Sie Websites nach Maß erstellt. Überzeugen Sie sich in unserem Referenzen-Bereich von unserer Arbeit und lassen Sie uns über unser Kontaktformular wissen was Sie brauchen.

Schon beim lesen der Texte wird ein erster Nachteil der Klicken-Sie-hier-Methode offenbar. Sie zwingt zu umständlichen Formulierungen und bei vielen Links in wenig Text würde jeder Deutschlehrer angesichts der zahllosen Wortwiederholungen durchdrehen. Einen normalen Text schreiben und einfach die Schlüsselwörter zu Links machen ist einfacher und liest sich besser.

Stichwort lesen. Die wenigsten Texte im Internet werden wirklich gelesen. Meist werden sie von Usern mit Eile überflogen , auf der Suche nach einer bestimmten Information (der Text wird gescannt). Da ist es nicht gerade dienlich, wenn statt der für solche Überflug-Suchen wichtigen Schlüsselwörter immer nur hier als Link vervorgehoben wird.

Die Beispielboxen machen offenbar, in welchem Text man z.B. die Referenzen schneller finden würde. Auch gibt es Fälle und Surfer, die einfach innerhalb einer Seite mit der Tab-Taste von Link zu Link springen. Diese stehen dann vor dem gleichen Problem wie Benutzer eines Screenreaders: Ein Haufen Hier-Links, bei dem man nur raten kann, was im einzelnen dahiner steckt. Oder man stelle sich vor, man würde einen Online-Text ausdrücken. Wie bizarr würde doch die Phrase Klicken Sie hier um... auf einem Blatt Papier anmuten.

Der Faktor Suchmaschine

Schließlich gibt es noch Google und Konsorten. Diese achten bei ihrer Seitenindizierung auch und besonders auf Links und verbinden den Link-Text mit der dahinter stehden Seite. Konsequenz bei Klicken-Sie-hier-Links: Die Angebots-Seite wird beim Googlen nach dem Begriff Klicken Sie hier gefunden, statt bei der Suche nach etwas Sinnvollen wie z.B. Angebot Tontechnik.

Diese zahlreichen Argumente erlaube ich mir abschließend noch mit dem Hinweis zu garnieren, dass das W3C die Klicken-Sie-hier-Problematik ähnlich sieht: Siehe Accessibility Guidelines und den entsprechenden Eintrag in den QA-Tips.

Und dann gibt es auch noch jene, die der Ansicht sind, die Benutzung von Klicken-Sie-hier-Links erfülle den Tatbestand der Benutzerbeleidigung - Weil eben die mitgelieferte Bedienungsanleitung für Links in etwa so wäre, als würde man Ronaldo die Abseitsregel nochmal erklären. Man kann es auch übertreiben.

Der Disclaimer-Mythos

Als verantwortungsvoller Berater muss man seinen Kunden oft eine ganze Menge an Wünschen und Vorstellungen auszureden. Vieles was sich Otto Normalverbraucher so vorstellt ist eben nicht umsetzbar, hat beim zweiten Hinsehen erkennbare Nachteile oder ist einfach nutzlos.

So zum Beispiel der sogenannte Disclaimer. Jeder hat so ein Ding und jeder will es haben. Solche Texte (oft auch Hanftungsausschlüsse genennt) beziehen sich stets auf ein gewisses Urteil vom Landgericht Hamburg. Lässt man Google nach dem typischen Anfang dieses Textes suchen, findet man mehr als 2 Millionen Treffer. Im Disclaimer steht dann, man distanziere sich von allen auf andere Seiten führenden Links auf seiner Seite - Sonst würde dieses hamburger Urteil ja bedeuten, dass man möglicherweise für irgendeinen Link haftbar gemacht werden kann. In der Regel sehen diese Texte so oder ähnlich aus:

Das Landgericht Hamburg hat mit Urteil vom 12.05.1998 entschieden, daß man durch die Ausbringung eines Links die Inhalte der gelinkten Seite ggf. mit zu verantworten hat. Dies kann nur dadurch verhindert werden, daß man sich ausdrücklich von diesen Inhalten distanziert. Ich erkläre an dieser Stelle ausdrücklich, daß ich keinerlei Einfluß auf die Gestaltung und die Inhalte der gelinkten Seiten habe. Deshalb distanziere ich mich hiermit ausdrücklich von allen Inhalten aller gelinkten Seiten auf meiner gesamten Website inkl. aller Unterseiten. Diese Erklärung gilt für alle auf meiner Homepage ausgebrachten Links und für alle Inhalte der Seiten, zu denen Links oder Banner führen.

Disclaimer sind Humbug!

Dass Disclaimer nicht viel taugen können diktiert allein schon die Logik. Man kann sich schließlich auch nicht von Diebstahl distanzieren und danach straffrei den Aldi ausrauben.

Wen das nicht überzeugt, der sollte das angesprochene Urteil einmal lesen. Der im fraglichen Prozess Angeklagte wurde in der Tat mangels Distanzierung von gewissen Links zu einer saftigen Geldstrafe verurteilt. Obwohl er auf seiner Seite einen Disclaimer hatte!

Desweiteren habe er [der Angeklagte] durch Aufnahme einer Haftungsfreizeichnungsklausel klargestellt, daß er keinerlei Verantwortung übernehme.

Daraus lernen wir: Solche allgemein gehaltene Distanzierungsversuche sind rechtlich wirkungslos. Wenn man sich nicht präzise von etwas Bestimmtem distanziert, sondern vor sich hinpauschalisiert (Ich distanziere mich von allem was ich eines Tages hier möglicherweise mal verlinken könnte) und das ganze dann auch noch irgendwo auf irgendeiner Unterseite versteckt, erreicht man nichts.

Das Urteil unter der Lupe

Gegenstand des zum so oft zitierten Urteils gehörenden Prozesses war, dass der Angeklagte mit seiner Website die Persönlichkeitsrechte des Klägers verletzte. Zu diesem Zwecke hatte der Angeklagte gezielt diverse seinem Ziel dienliche Links auf seiner Seite untergebracht und wähnte sich durch den Disclaimer sicher.

Der Beklagte ließ, nachdem ein weiterer Rechtsstreit zwischen den Parteien vorangegangen war, auf seiner Internet-Homepage [...] Links auf im Internet vorhandene Informationen über den Kläger aufnehmen, so auf die Webpage [...]

Das Gericht stellte fest, dass eine solche allgemeine Distanzierung wirkungslos ist und dass allein eine exakte Distanzierung von den fraglichen Links irgendetwas hätte bewirken können. Theoretisch jedenfalls. Denn die für den Kläger ehrverletzenden Links konnten im Gesamtkontext gesehen und ob ihrer schieren Anzahl kein Fall von Ups, wie konnte das hier hingeraten sein.

Somit ist der oft gesehene Disclaimer wirkungslos - und der Beweis dafür (das Urteil) wird ironischerweise immer im Disclaimer selbst erwähnt.

Aktuelle Rechtslage

Wie sieht es denn nun mit der Rechtslage rund um Links aus? Einfach gesagt: Dieses Problem ist nicht definiert. Gemäß § 9 Teledienstgesetz sind Diensteanbieter für fremde Informationen, die sie in einem Kommunikationsnetz übermitteln oder zu denen sie den Zugang zur Nutzung vermitteln, nicht verantwortlich sofern der Anbieter die Übermittlung nicht veranlasst hat, den Adressaten der Information nicht ausgewählt hat und übermittelte Informationen nicht ausgewählt oder verändert hat. Gemäß § 8 ist ein Anbieter auch nicht zur andauernden Kontrolle der übermittelten Inhalte verpflichtet. Wenn man das auf Links übertragen würde, wäre man mit folgendem Vorgehen auf der sicheren Seite:

  1. Die zu verlinkende Seite einmal gründlich nach allem was Ärger machen könnte durchsuchen.
  2. Den Link setzen und ihn (z.B. per CSS) als auf einen auf eine externe Seite verweisenden Link auszeichnen.
  3. Zurücklehnen und in dem Moment den Link entfernen, in dem man davon erfährt, dass sich Inhalte in einer problematischen Art und Weise geändert haben - zur andauernden Kontrolle ist man nicht verpflichtet.

Problem bei der Sache: Das Teledienstgesetz gilt nicht für Links. Ein Beispiel: OLG München 21 U 1914/02. Die Leitsätze des Urteils gemäß www.kanzlei-prof-schweizer.de:

1. Wenn ein Link zu einer anderen Internetadresse gesetzt wird, geschieht dies mit dem Ziel, dem Leser einer Homepage weiterführende Informationen zukommen zu lassen, die aus Sicht der den Link setzenden Person sinnvoll erscheinen.
2. Der Linksetzer übernimmt mit seiner Verweisung eine Art Internet-Verkehrssicherungspflicht. Der Linksetzer geht das Risiko ein, daß die Verweisungsseite später geändert wird.

Etwas aktueller ist ein Urteil vom Hanseatischen Oberlandesgericht Hamburg, in dem es heißt:

Die Haftung des Anbieters eines Hyperlinks fällt nach der dem TDG zugrunde liegenden Richtlinie 2000/31/EG nämlich nicht unter die §§ 8 -11 TDG (Spindler NJW 2002, 921, 924)

Würde das Teledienstgesetz Anwendung auf Links finden, wär's schön. Das ist aber leider nicht der Fall. Es kann prinzipiell Ärger drohen, wenn man sich den Inhalt einer verlinkten Seite zu eigen macht, was immer das auch heißen mag. Reicht es, externe Links (wie auf meiner Seite) mit CSS als solche auszuzeichnen? Oder muss man sich von jedem einzelnen Link ausdrücklich distanzieren?

Die einen Urteile sagen, durch das pure Setzen eines Links macht man sich Inhalte zu eigen. Die anderen sagen, dass das nicht der Fall ist.

Es gab für das Teledienstgesetz einmal einen Änderungsantrag einer CDU/CSU-Politikerin, der die Lage von Hyperlinks geklärt hätte. Dort heißt es auf Seite 3:

Diensteanbieter sind für fremde Informationen, auf die sie zur leichteren Informationsfindung für den Nutzer verweisen (Hyperlinks) nicht verantwortlich, sofern
1. sie keine tatsächliche Kenntnis davon haben, dass der Hyperlink auf eine rechtswidrige Handlung oder Information verweist und ihnen im Falle von Schadensersatzansprüchen auch keine Tatsachen oder Umstände bekannt sind, aus denen eine solche rechtswidrige Handlung oder Information offensichtlich wird, oder
2. sie unverzüglich tätig geworden sind, um den Hyperlink zu entfernen oder den Zugang zu ihm zu sperren, sobald sie diese Kenntnis erlangt haben und sofern ihnen die Sperrung technisch möglich und zumutbar ist.

Das wäre eine schöne, absolut umsetzbare Regelung, wie es sie neuerdings in ähnlicher Form auch für die Inhalte von Forenbeiträge gibt - Haftung erst ab Kenntnis. Schade dass der Änderungsantrag abgelehnt wurde.

Fazit

Die Rechtslage rund um Hyperlinks bleibt ungeklärt und jeder Seitenbetreiber im Internet ist damit theoretisch ein Straftäter. Denn von jeder mit einigen Links ausgestatten Seite kann man irgendwie auf etwas geraten, das Naziparolen verbreitet, Warez anbietet und die Persönlichkeitsrechte von irgendwem verletzt. Und wenn man tausend Klicks tätigen muss - ein Richter könnte theoretisch eintscheiden, dass man sich die Inhalte zu eigen macht. Sollte es dazu kommen, hilft ein Disclaimer auch nicht weiter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon