Webdesign / Tipps / Spacer GIF

von: Werner Zenk

Ein „Spacer-GIF“ (Blind-GIF) ist ein kleines meist durch-
sichtiges Bild mit einer Größe von 1x1 Pixel im GIF-Format*

„Spacer-GIFs“ kann man verwenden ...
  • zum Ausrichten von Grafiken
  • zum Abstand halten zwischen Text
  • als Kopierschutz
  • zum Tabellen formatieren
spacer.gif (42 Bytes) «- Spacer-Gif zum kopieren.     Es wird hier nur ver-
 größert mit 22x22 Pixel und einen Rahmen dargestellt.
Tabellen formatieren mit „Spacer-GIF“
Beispiel:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut


Quelltext:
<table bgcolor=#F7F7F7 cellspacing=0 width=1% height=1%>
 <tr>
  <td colspan=2><img src="spacer.gif" width=300 height=1></td>
 </tr>
 <tr>
  <td><img src="spacer.gif" width=1 height=256></td>
  <td>
    Lorem ipsum dolor ...
  </td>
 </tr>
</table>

Beim Einbinden der „Spacer-GIF“ in eine Tabelle muss
beachtet werden, das zwischen <td>  <img src="spacer-gif">  </td>
keine Leerzeichen stehen.


Ergebnis:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut



Das „Spacer-GIF“ lässt sich auch zur Gestaltung einsetzen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut


„Spacer-GIF“ - Hintergrund einfärben.
Der Hintergrund kann jede gewünschte Farbe annehmen.

Beispiel:




Quelltext:
<img src="spacer.gif" width=250 height=5
 style="background-color: #FF8040">

Anmerkung: „Spacer-GIF“ wird oft auch „Blindes-GIF“
oder „Mini-GIF“ genannt *

* Seit der Erstellung dieser Seite sind schon einige Jahre vergangen.
Mittlerweile benutzt man kein "Spacer-GIF" mehr sondern macht
die Angaben über CSS.
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Sven Kannengiesser:
Och nö, nicht die ollen Kamellen bitte! Spacer-GIFs gehören auf den WWW-Friedhof. Bitte gescheites CSS verwenden!

Innocentus:
Toller Tip!Leider schnallt der IE min-width und min-height leider nicht.Damit geht's dann auf jeden Fall.Das mit dem änderbaren Hintergrund ist besonders toll.Danke euch!

Berend Tuin:
Vielen dank für die klaren Informationen.Blind Gifs statt Leerzeichen sparen viel Platz.

porgato:
Wenn jemand barrierefreie Seiten erstellen will, sollter er auf Spacer-Gifs verzichten. (Siehe BIENE 2008-Kriterieren für barrierefreie Internetseiten), übrigens sollten auch CAPTCHAS, wie das hier unter dem Kommentarfeld vermieden werden, oder ein mp3-Sound als alternative angeboten werden
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Open Source: Quelltext anzeigen  Tabellen mit CSS Filter  Zeilenlinien im Text - Zeilenlinien als Hintergrundbild eines Textes einfügen.  Bilder und Tabellen mit Schatten - Eine optische Aufwertung erhalten Bilder, Text oder Eingabefelder, indem man einen Schatten hinzufügt.  Design in der Titelzeile  Haarlinien-Tabelle 2  Abstand Gewinnen! - Ein Problem auf Webseiten ist immer der Abstand von einem Objekt zum anderen. Es gibt viele Möglichkeiten wie Sie diesen Abstand beeinflussen können.  Kompaktes Design  Container mit „Eselsohren”  Bildformat JPG  Design  Überschrift mit Rahmen  Die Kriterien für Benutzerfreundlicheit  Farblehre  Weicher Farbübergang in Containern  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner