 Pseudo-Leerzeichen
Was ist ein Pseudo-Leerzeichen?
Sogenannte "Pseudo-Leerzeichen" werden von (einigen) Browsern bei der Darstellung einer HTML-Seite einfügt, wenn im Quellcode ein (weicher) Zeilenumbruch steht, die HTML-Befehle also nicht unmittelbar hintereinander sondern in separaten Zeilen notiert sind.
Eine solche Notierung ist eigentlich wegen der besseren Übersichtlichkeit üblich:
(Beispiel: 3 Grafiken als Verweisfläche)
<a href="dateiname.htm">
<img src="grafik01.jpg" border="1" height="75" width="100" alt="Foto 1">
</a>
<img src="abstandhalter.gif" border="0" height="10" width="20" alt="transp">
<a href="dateiname.htm">
<img src="grafik02.jpg" border="1" height="75" width="100" alt="Foto 2">
</a>
<img src="abstandhalter.gif" border="0" height="10" width="20" alt="transp">
<a href="dateiname.htm">
<img src="grafik03.jpg" border="1" height="75" width="100" alt="Foto 3">
</a>
Die schließenden Tags der Verweise (</a>) stehen jeweils in der nächsten Zeile
Unschöne Darstellung bei Verweisen
Was man bedenken sollte:
Ein Textlink erhält ohne weitere Formatierungsangaben einen Unterstrich. Demzufolge würde ein Leerzeichen innerhalb eines Links einen (1 Zeichen breiten) Unterstrich erhalten!
"Pseudo-Leerzeichen" die der Browser (einige zumindest) einfügt, generieren in der Anzeige ein Leerzeichen welches in einem Link als unterstrichenes Leerzeichen erscheint.
Abhilfe bei einem Link:
1) Code ohne Zeilenumbruch hintereinander notieren. Schließende spitze
Klammer des Img-Tags gefolgt von öffnender spitzer Klammer des Ende-Link-Tags.
<a href="dateiname.htm">
<img src="grafik01.jpg" border="1" height="75" width="100" alt="Foto 1"></a>
<img src="abstandhalter.gif" border="0" height="10" width="20" alt="transp">
<a href="dateiname.htm">
<img src="grafik02.jpg" border="1" height="75" width="100" alt="Foto 2"></a>
<img src="abstandhalter.gif" border="0" height="10" width="20" alt="transp">
<a href="dateiname.htm">
<img src="grafik03.jpg" border="1" height="75" width="100" alt="Foto 3"></a>
2) Eine eigene CSS-Klasse für diese Links ohne Unterstrich definieren. Damit sind die Leerzeichen im Verweis nicht mehr sichtbar (aber immer noch vorhanden).
Benötigte Anzeigenbreite
Wie oben bereits beschrieben, werden diese Pseudo-Leerzeichen in einem Verweis manchmal sichtbar, wenn ein unschöner Unterstrich angezeigt wird.
Nicht zu vernachlässigen ist allerdings, dass sich die benötigte Anzeigenbreite für Seitenelemente durch Pseudo-Leerzeichen vergrößern kann und das punktgenau berechnete Design nicht greift.
Das kann sich durch eine Verschiebung der Elemente nach rechts bemerkbar machen. Schlimmer natürlich wenn Seitenelemente, die eigentlich nebeneinander angeordnet erscheinen sollten, durch den nicht ausreichenden Patz dann untereinander erscheinen.
Pseudo-Leerzeichen auf der Spur
Sie möchten herausfinden ob sich solche Leerzeichen auf ihrer Seite eingeschlichen haben?
Einfachste Methode bei einer Darstellung mit Grafiken: Sie markieren im Browserfenster die in Frage kommenden Passagen mit festgehaltener linker Maustaste.
Hier deutlich (passend zum ersten Quellcode ganz oben): Die 5 weißen Blocks neben den 3 Fotos markieren Leerzeichen. Wenn diese nicht wirklich im Quellcode eingetragen wurden, handelt es sich um Pseudo-Leerzeichen.
Auch bei dem zusätzlichen (hier weißen) Bereich hinter dem Text 'Klickfläche' könnte es sich um ein Pseudo-Leerzeichen handeln.
Ganz klar: Der Text 'Vorschaugrafiken als Verweis- / Klickfläche' steht nicht wirklich in der Mitte der Ansicht. Schließlich wird der gesamte String (inclusive Leerzeichen) zentriert und damit der sichtbare Text nach links versetzt angezeigt!
Fehlerhafte Anzeige möglich:
Vorschaugrafiken als Verweis- / Klickfläche
<br>
besser:
Vorschaugrafiken als Verweis- / Klickfläche<br>
|
HOME
ZURÜCK