Linien mit HTML
Linien strukturieren eine Webseite. Dieser 2003 in Internet Professionell erschienene Beitrag zeigt, welche Linientypen es gibt und wie Sie sie einsetzen.
War es von einer Weile noch in, Inhalte auf Webseiten in dick umrahmte Kästen zu packen, so setzen sich langsam feine Linien durch. Sites wie Yahoo machen es vor: Feine Striche unter farbig hinterlegten Textabschnitten schaffen ein ruhiges, praktisches Layout mit feinen Akzenten. Aber welche ist die Linie der Wahl? Lesen Sie hier, womit Sie Linien ziehen können und wo die Vor- und Nachteile der Linientypen liegen.
Der Klassiker hr
Schon aus den frühen Tagen des HTML bekannt ist das Tag <hr>. Von vielen als unflexibel geschmäht, ist es zu schnell aus der Mode gekommen. Dabei eignen sich <hr>-Linien im begrenzten Umfang durchaus für das Linien-Design. Nämlich dann wenn es um die Darstellung von langen Listen geht. Hier trennt <hr> beispielsweise Datensätze. Gegenüber tabellarischen Auflistungen hat das einen großen Vorteil: Es geht schnell. Mit einem <hr> oder – XHTML-konform <hr /> zeichnet der Browser schneller die Linie als jedes andere Verfahren.
Was viele nicht wissen: Ein paar einfache Parameter beeinflussen das Aussehen der Linie. Ein Beispiel:
<hr width=“15“ size=“1“ noshade=“noshade“ align=“left“ />
Damit zeichnet der Browser eine 15 Pixel lange, ein Pixel hohe Linie auf die Seite. Die seltsame Schattierung, die <hr> lange als Design-Element unmöglich gemacht hat, lässt sich mit „noshade“ beseitigen. Und mir „align“ zeichnet der Browser die Linie vom linken Rand ausgehend.
Soweit die Theorie. Wer die Linie mit dem Internet Explorer anzeigen lässt, wird keine Probleme haben. In Mozilla leider sieht es schon anders aus: Hier ist die Linie in jedem Fall zwei Pixel dick. Das kann manch fein gesponnenes Layout durcheinander bringen. Zum Thema Inkompatibilität noch ein Parameter: Der Internet Explorer interpretiert – nicht standardkonform – zusätzlich den Parameter „color“.
Ebenfalls auf dem Internet Explorer ist das <hr>-Tag mit CSS einsetzbar, zum Beispiel:
<head><style type="text/css">
hr.deutlich {color: red;
width: 200px;
height: 3px;
text-align: left;
}
</style></head>
[..]
<hr class=“deutlich“ />
Dieser Befehl zeichnet eine 200 Bildpunkte lange und 3 Pixel hohe Linie in roter Farbe. Die Ausrichtung der Linie ist links – allerdings nur im Internet Explorer. Mozilla schert sich nicht um diese CSS-Anweisungen und platziert einen grauen Strich in der Mitte der Seite.
Fazit <hr>:
+ Schnelle Darstellung
+ unkomplizierte Programmierung
- unflexibel
- CSS für <hr> funktioniert nicht mit Mozilla
- keine kompatible Darstellung
- nur waagerechte Linien
Das Pixel
Lieblingsspielzeug grafikverliebter Designer ist das Pixel. Eine Winz-Grafik, die zu Füllzwecken bis in die Unendlichkeit ausgedehnt werden kann. Solch ein Werkzeug eignet sich nicht nur um Räume punktgenau zu füllen, sondern auch, um Linien zu erzeugen. Schnappen Sie sich ein einfaches Malprogramm, erzeugen Sie ein neues Bild in der Größe 1 x 1 und setzen Sie darin einen Bildpunkt in beliebiger Farbe. Tipp: Setzen Sie die Farbe schon beim Einrichten des Winz-Bildes als Hintergrundfarbe. Das spart Zeit und Feinarbeit mit dem Pinsel.
Speichern Sie das Bildchen als GIF und überlassen Sie den Rest HTML. Die Anweisung
<img src="redpixel.gif" width="20" height="2" align="top">
zum Beispiel erzeugt aus dem Pixel eine 20 Bildpunkte lange und zwei Punkte hohe Linie. Wichtig: Geben Sie immer den Parameter Height mit an, ansonsten setzt der Browser einen Default-Wert. Der Vorteil: Sie können Linien sowohl senkrecht wie auch waagerecht ziehen. Und wenn Sie sich auf ein zweites oder drittes Pixel einlassen, können Sie sogar kleine Muster basteln oder gar ein animiertes GIF einbauen.
Allerdings: eine flimmernde Linie ist nicht jedes Lesers Geschmack. Knifflig ist auch die Kontrolle der Grafiken: Die Platzierung der Bildchen mit Hilfe des Parameters „align“ erzeugt nicht immer zuverlässig passende Ergebnisse. Im Gegensatz zu Tabellen können sich solche Grafiken auch nicht automatisch beispielsweise der Länge eines Textes anpassen.
Fazit grafische Linien:
+ da horizontale und vertikale Linien möglich
+ Animation möglich
+ Muster möglich
- Schwierige Ausrichtung am Text
- Keine automatische Anpassung an Abschnitte
CSS
Mit Hilfe von Cascading Stylesheets zaubern Sie hübsche Rahmen und Linien um Textabschnitte. Der kleine Nachteil ist: Die Formatierung ist nicht sehr flexibel. Aber der Reihe nach. Ein Linienkonstrukt mit CSS könnte so aussehen:
.linie {border-bottom-width: 2px;
border-bottom-style: solid;
border-color: red;
}
Mit „border-bottom-width“ erzeugen Sie einen Linie unter dem Element, das die Klasse „linie“ verwendet. Die Linie soll durchgängig sein, sagt „border-bottom-style“ und „border-color: red“ gibt der Linie eine rote Farbe. Doch hier fängt schon das Problem an: Eigentlich sollte es heißen „border-bottom-color: red“, doch das scheitert am Netscape Navigator 4.x. Doch immerhin kommt er mit den restlichen Anweisungen zurecht.
Um die Linie unter einem Text zu zeigen, verwenden Sie das Tag <span>:
<span class=linie>Hallo, unterstrichen von CSS?</span>
Mit einem <p> würden Explorer und Mozilla die Linie über die ganze Browser-Breite zeichnen. Und das ist nur in Ausnahmefällen erwünscht.
Da sind wir noch mal beim kleinen Nachteil: Die Formatierung ist unflexibel. Sie können nicht einfach schreiben: „Zeichne mir eine 50 Pixel breite Linie“. Denn die Formatierung hängt immer an einem Tag. Möglich wäre es, das Stylesheet einer Tabellenzelle zuzuweisen, die die gewünschte Breite bringt:
<table>
<td width=300 class=linie> </td>
</table>
Doch das scheitert schon wieder an der Kompatibilität zum alten Navigator.
Fazit Linien mit CSS
+ ideal in Kombination mit Textabschnitten
+ einfache Programmierung
- Kompatibilitätsprobleme
- Oft Hilfskonstruktionen notwendig
Tabellen
Unbestrittene Könige des Liniendesigns sind Tabellen. Nur mit ihnen ist es möglich, auch frühen Netscape-Versionen eine klare Linienführung zu verpassen. Allerdings: Wer sich ohne Werkzeug an die verschachtelten Tabellen wagt, braucht viel Geduld und Disziplin. Denn nur ein falsch gesetztes Tag reicht, um Tabellenkonstrukte zum Einsturz zu bringen.
Eine einfache Linie ziehen Sie so:
<table width=”30px” cellpadding=”0” cellspacing=”0” border=”0” bgcolor=”#0E0E0E”>
<tr>
<td height=”1”>
<table cellpadding=”0” cellspacing=”0” border=”0”>
<tr>
<td height=”1”></td>
</tr>
</table>
</td>
</tr>
</table>
Einfach? Ja, aber nur, wenn Sie sich ein wenig Zeit nehmen, die Tabellen-Logik zu verstehen. An die Arbeit: Zunächst wird die Haupttabelle geschrieben. Sie ist 30 Pixel breit und in dezentem Dunkelgrau gehalten. Ganz wichtig sind die Parameter „cellpadding“ für den Abstand von Zellenrand zum Inhalt und „cellspacing“ für den Abstand der Zellen untereinander. Nur wenn beide Werte auf 0 stehen, haben Sie volle Kontrolle über die Linien. Stehen die Werte über 0, ist es nicht möglich, zusammenhängende Linien oder Rahmen zu gestalten. Der Parameter border=“0“ entspricht der Default-Einstellung der meisten Browser, sollte aber aus Kompatibilitätsgründen im Quelltext stehen. Schließlich legt „bgcolor“ noch die Farbe der Tabelle fest und damit die Farbe der Linie.
Eine Zelle zeichnet die Linie und legt ihre Höhe fest: <td height=“1“>. Danach hieße es nur noch Zelle zu, Zeile abschließen und Tabelle beenden. Doch da ist noch die Sache mit der Kompatibilität zu den Browser-Fossilien. Damit auch der Netscape Navigator der 4er-Reihe die Linie zeigt, müssen Sie die Zelle füllen. Denn der Navigator zeigt keine inhaltslosen Tabellen. Jedoch: alles andere als eine weitere Tabelle in der Zelle würde das Design durcheinander bringen. Deshalb bauen Sie nochmals eine Mini-Tabelle ein, die noch eine Zelle der Höhe 1 enthält. Falls Sie auf die Kompatibilität zum Navigator verzichten können, lassen Sie diese hinein geschachtelte Tabelle draußen.
Der klare Vorteil solcher Tabellenlinien: Sie lassen sich prima mit Text kombinieren. So ist beispielsweise eine fein unterstrichene Überschrift machbar, neben der zusätzlich links eine feine senkrechte Linie steht. Probieren Sie es einmal damit:
<p>Horizontale und vertikale Linien mit Tabellen</p>
<table width="300" cellpadding="0" cellspacing="0" border="0" bgcolor="#0E0E0E">
<tr>
<td width="1" valign=bottom>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="1" width="1"></td>
</tr>
</table>
</td>
<td bgcolor="lightgrey" class="standard"> Ich bin die Headline mit Linie</td>
</tr>
</table>
<table width="300" cellpadding="0" cellspacing="0" border="0" bgcolor="#0E0E0E">
<tr>
<td height="1">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
Los geht’s mit einer Tabelle für den senkrechten Strich und die Überschrift. Den senkrechten Strich erhalten Sie, indem Sie eine Zelle mit einem Pixel breite herstellen. Den Rest überlassen Sie dem Browser: Er passt die Höhe der Linie automatisch der Schrifthöhe der Schrift an. Die folgt in einer weiteren Zelle, bevor die Tabelle wieder schließt. Genau darunter folgt eine Tabelle für den waagrechten Strich.
Das ist eine Menge Tabelle für eine kleine Überschrift. Jedoch: Sie sieht gut aus. Falls Sie eine Programmiersprache zur Hand haben, etwa PHP, sollten Sie solche Konstruktionen in einer Funktion zusammenfassen. Anstatt dann jedes Mal von Hand die Tabellentags zu programmieren, rufen Sie die Funktion auf, übergeben ihr den Text der Überschrift und lassen den Rest PHP erledigen. Ein einfaches Beispiel für so eine Funktion finden Sie unter dem Namen „linie.php“ auf der Heft-CD. Wenn Sie wollen, verwenden Sie diese Funktion und bauen Sie diese noch weiter aus. Ein Problem soll nicht verschwiegen werden: In manchen Fällen zeichnet der Netscape Navigator 4.x die senkrechte Linie zu breit. Doch dieses Zugeständnis können Sie der Kompatibilität zum alten Browser machen.
Fazit Linien mit Tabellen
+ flexibelster Ansatz
+ kommt gut mit Text zurecht
- unübersichtliche Programmierung
- Kompatibilitäts-Zugeständnisse an Netscape Navigator notwendig
