Größenanpassung von Trennlinien

Jede Grafik (Fotos und Animationen ebenfalls) hat eine bestimmte Größe, festgelegt durch die Breite und die Höhe. Diese Werte können Sie natürlich mit jedem Grafikprogramm verändern.

Was ist aber zu tun, wenn Sie die Größe flexibel gestalten wollen oder müssen? Nehmen wir z.B. eine Trennlinie von einer Pixelbreite von 1500. Die Höhe beträgt übrigens 10 Pixel.

Das Problem: Sie wissen natürlich nicht, welche Monitorgröße der Betrachter Ihrer Seiten benutzt oder welche Bildschirmauflösung dort eingestellt ist. Wenn Sie also den Grafikbefehl als HTML-Code in folgender Form eingeben

<IMG SRC="trenner.gif">

oder mit den Größenangaben

<IMG SRC="trenner.gif" WIDTH=1500 HEIGHT=10>

passiert Folgendes: sehen

Jetzt könnten Sie die Grafik natürlich mit einem Grafikprogramm verkleinern. Oder noch einfacher mit dem WIDTH-Attribut in der Länge beschneiden. Also z.B. die Länge auf 500 Pixel festlegen:

<IMG SRC="trenner.gif" WIDTH=500 HEIGHT=10>

Das Ergebnis sehen

Mit dem Weglassen von Größenangaben oder der Angabe von festen Pixelgrößen kommen wir hier nicht weiter. Gott sei Dank ist die Lösung des Problems viel einfacher als vermutet. Setzen Sie einfach einen Prozentwert ein. In unserem Fall empfiehlt sich ein Wert von 100%.

<IMG SRC="trenner.gif" WIDTH=100% HEIGHT=10>

Da das Problem auf diese Weise gelöst wurde, kann das Ergebnis auch auf dieser Seite betrachtet werden:

Das hat übrigens noch einen anderen Vorteil. Auf meiner Homepage können Sie auf der Startseite wählen, ob Sie die Seiten mit Frames oder ohne betrachten möchten. Dabei können Sie die Navigationsleiste wahlweise an den linken oder rechten Rand des Browserfensters anzeigen lassen. Oben und unten übrigens auch. Aber das tangiert dann nicht die Breite, sondern die Höhe des Fensters. Die linke oder rechte Navigationsleiste nimmt natürlich einen gewissen Teil des darstellbaren Fensters weg. Mit der Prozentangabe ist man aber für alle Eventualitäten gerüstet. Die Grafik wird immer in der vollen Breite des Ausgabefensters angezeigt – mit oder ohne Navigationsleiste.

Ohne diese Angabe würde das Problem im Zusammenhang mit der Möglichkeit der Frameswahl praktisch unlösbar.

Bitte beachten Sie, daß beim HTML-Befehl für Trennlinien <HR> die Prozentangabe 100% praktisch schon eingebaut ist. Es ist also egal, ob

<HR> oder <HR WIDTH=100%>

eingegeben wird. Das Ergebnis ist identisch:


Die HR-Trennlinie wird also automatisch richtig angepasst.

Es wird Ihnen vielleicht aufgefallen sein, daß die HEIGHT-Angabe nicht mit einem Prozentwert ausgestattet ist. Das ist in diesem Fall auch Absicht. Eine derartige Prozentangabe bezöge sich ja auf die Höhe des Ausgabefensters vom Browser

<IMG SRC="trenner.gif" WIDTH=100% HEIGHT=10%> hat zum Ergebnis:

Es ist interessant, daß das Weglassen der Höhenangabe ein anderes Resultat bringt

<IMG SRC="trenner.gif" WIDTH=100%>

als die Pixelangabe 10:

<IMG SRC="trenner.gif" WIDTH=100% HEIGHT=10>

Einen Grund kann ich dafür (noch) nicht nennen. Die 10 ist ja eigentlich von der Grafik vorgegeben. Vielleicht besteht eine Wechselwirkung mit der Prozentangabe in der Breite. Nehmen wir das halt mal so hin.

Wir haben noch gar nicht geklärt, wie das eigentlich mit kleineren Grafiken aussieht. Kann man die problemlos strecken? Dazu benutzen wir eine Trennlinie mit einer Länge von 500 Pixel und einer Höhe von 5 Pixel. Hier zunächst die Originalgrafik:

Mit <IMG SRC="linie.gif" WIDTH=100% HEIGHT=5>

Hier kann man auch schön sehen, daß die Prozentangabe sich natürlich auf die alle Grafikinhalte bezieht. Der etwas dunklere Bereich links wird ebenfalls prozentual gestreckt.

Zum Abschluß bemühen wir noch einmal unsere lange Trennlinie und machen kurzen Prozeß mit ihr:

<IMG SRC="trenner.gif" WIDTH=20% HEIGHT=10>

Viel Spaß bei weiteren Experimenten!

Zum Seitenanfang
http://www.htmlbasis.de