blind.gif

Häufig braucht man auf seiner Seite Abstände. Natürlich ist es nicht machbar, wie auf der Schreibmaschine, einfach Leerzeichen ein zu fügen. Die meisten Browser ignorieren die Leerzeichen einfach. Auch geschützte Leerzeichen (siehe geschützte Leerzeichen) sind oft nicht brauchbar. Ihre Größe ist von der Browserschriftart und -größe abhängig und kann nicht frei definiert werden. Für so etwas wird gerne ein blind.gif verwendet. Dabei handelt es sich um ein Bild, das meist nur 1x1 Pixel groß ist und vollständig transparent ist. Man kann es also nicht sehen.

Anwendungsbeispiel:

Angenommen du willst eine Tabelle machen, die ein besonderes Design, nämlich einen dünnen, zweifarbigen Rahmen hat, und die auch mit Netscape und allen anderen Browsern so dargestellt wird. (Viele, auch erfahrene Designer fangen schon an zu zittern, wenn die Wörter "Tabelle", "Design" und "Netscape" in einem Satz erwähnt werden. Besonders die Version 4 hat es in sich.). Die Tabelle soll keine "Bilderrahmen" haben (d.h. es sollen keine Grafiken als Rahmen eingesetzt werden), und sie soll sich wie gewöhnliche Tabellen an die Fenstergröße und an den enthaltenen Text anpassen, ohne dass das Design leidet.

Lösung:

Text der ersten Zelle
Text der zweiten Zelle

Diese Tabelle sieht in allen aktuellen Browsern genau gleich aus!

Wie ich das gemacht hab:

X
X X Y X X
X Z X X Z X
X X
X

Ich habe zunächst eine Tabelle mit 9 Spalten und 5 Zeilen angelegt. Die oberste und die unterste Zeile habe ich zu je einer Zelle zusammen gefasst. Wie ich die anderen Zellen zusammen gefasst habe, siehst du im Bild links. Dann habe ich die Hintergrundfarben Rot, Blau und Weiß für die Zellhintergründe festgelegt. An den Stellen, die mit einem gelben X markiert sind habe ich das Bild "blind.gif" eingefügt. Dieses Bild ist 1x1 Pixel groß und transparent. Ohne dieses Bild wären die Zellen leer gewesen und wären vom Browser nicht dargestellt worden. All diese blind.gif's werden mit width="2" und height="2" abgebildet. An der Stelle, wo das gelbe Y ist, befindet sich ein blind.gif, das mit width="3" und height="3" abgebildet wird. Dadurch kann ich die Dicke der Rahmenlinien pixelgenau und für jede Linie einzeln festlegen. Selbstverständlich hat die Tabelle die Eigenschaften border="0", cellpadding="0" und cellspacing="0". Damit der Text trotzdem Abstand zum Zellrand bekommt, habe ich an den Stellen, die mit Z markiert sind, je eine Tabelle ohne festgelegte Hintergrundfarbe mit nur einer Zelle und mit cellpadding="5" eingefügt. Dadurch kann ich den Textabstand zum Rahmen bei Bedarf sogar für einzelne Zellen unterschiedlich machen.

Auf Wunsch einer Benutzerin dieses Kurses, zeige ich dir hier noch den Quellcode der Beispieltabelle von oben.

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FF0000" colspan="9"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
  </tr>
  <tr>
    <td bgcolor="#FF0000" rowspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#0000FF" colspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#FF0000" rowspan="3"><img border="0" src="../../Bilder/blind.gif" width="3" height="3"></td>
    <td bgcolor="#0000FF" colspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#FF0000" rowspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
  </tr>
  <tr>
    <td bgcolor="#0000FF"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#FFFFFF">
      <table border="0" cellpadding="5" cellspacing="0">
        <tr>
          <td width="100%"><b><font color="#000000">Text der ersten Zelle</font></b></td>
        </tr>
      </table>
    </td>
    <td bgcolor="#0000FF"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#0000FF"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#FFFFFF">
      <table border="0" cellpadding="5" cellspacing="0">
        <tr>
          <td><font color="#000000"><b>Text der zweiten Zelle</b></font></td>
        </tr>
      </table>
    </td>
    <td bgcolor="#0000FF"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
  </tr>
  <tr>
    <td bgcolor="#0000FF" colspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
    <td bgcolor="#0000FF" colspan="3"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
  </tr>
  <tr>
    <td bgcolor="#FF0000" colspan="9"><img border="0" src="../../Bilder/blind.gif" width="2" height="2"></td>
  </tr>
</table>

Im nächsten Kapitel geht es um Hyperlinks.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: