Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: HTML valign für vertikale Positionierung
Beschreibung: Mit 🌍 valign ist es in HTML möglich, vertikal Text und andere Elemente ✅ auszurichten, was in der Zwischenzeit aber mit CSS leichter ist.
So wie align für die horizontale Positionierung von Text und Elemente in HTML nicht mehr verwendet werden sollte, gilt dies auch für valign, das die vertikale Positionierung zum Thema hatte und technisch gesehen immer noch hat. Auch hier ist CSS die bessere Wahl der Mittel, wobei technisch valign weiterhin funktioniert.
Mit valign kann man die Höhe eines Elements bestimmen, aber man hat nicht die Möglichkeiten von CSS, wo man mit Pixelangaben den Abstand in alle vier Richtungen ebenfalls einstellen kann. Zur Veranschaulichung gibt es nachstehend ein Beispiel für den Sinn von valign und wie dies in CSS gewerkstelligt werden kann.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
das ergibt:
| Das ist die erste Zeile | Das ist die zweite Zeile | Das ist die dritte Zeile | Dreizeiliger Text zur Demonstration. |
Das Beispiel zeigt eine Tabelle mit einer Zeile und vier Spalten, wobei bewusst in der letzten Spalte dreizeiliger Fülltext gewählt wurde. Dadurch konnte ich Ihnen die Wirkungsweise von valign und ihren Hintergrund besser zeigen. Die erste Spalte ist so eingestellt, dass der Text gleich am Zeilenbeginn dargestellt wird (valign = top), die zweite Spalte ist das Gegenteil, nämlich die Einstellung valign=bottom und zeigt den Text am Ende der Zeile.
Und die dritte Spalte hätte gar keine Einstellung gebraucht, denn das vertikal zentrierte Verhalten, das hier auch zu sehen ist, ist standardmäßig eingestellt.
Nun ist es aber so, dass unter CSS diese Möglichkeiten und viele mehr zur Verfügung stehen. Wenn man eine Webseite betreibt, die viele Tabellen auf unterschiedlichen Seiten anbietet, macht es Sinn, mit Klassen zu arbeiten und jeder Klasse die nötigen Parameter in der CSS-Datei mitzugeben. Ein CSS-Aufruf würde nicht "valign=middle" heißen, sondern "vertical-align:middle;", die Funktionalität ist ansonsten sehr ähnlich.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Allerdings kann man im Gegensatz zum reinen HTML mit CSS auf Pixel genau Abstände zusätzlich anführen, wodurch man noch genauer arbeiten kann und man hat lange Zeit in HTML kämpfen müssen, um das auch hinzubekommen. Füllbilder wurden zum Teil eingebaut, damit der Abstand optisch passt. Das braucht es bei CSS nicht.
Die Positionierung auf der Webseite ist eines der Themen, die am stärksten verändert wurden. Statt der Layouttabelle wird mit Ebenen, den div-Tags gearbeiten, die Framesets gibt es nicht mehr und auch die align-Befehle werden zwar noch verwendet, sind aber durch CSS praktisch abgelöst worden.
Mit dem align-Zusatz horizontal und valign vertikal hat man lange Jahre die Texte an Bilder ausgerichtet und umgekehrt, mit CSS-Definitionen lässt sich das aber längst leichter bewerkstelligen.
Ein anderes Thema ist die Ebene mit dem div-Tag, die auch für die responsive Darstellung für Handys und andere Geräte zuständig ist. In Kombination mit CSS gelingen so sehr übersichtliche Seiten, die sich auch anpassen können. Ebenfalls oft im Einsatz ist ein besonders Element auf der Seite und zwar der IFrame als Platzhalter für externen Inhalt wie etwa Börsennachrichten.
Themenseiten
Artikel-Thema: HTML valign für vertikale Positionierung
Beschreibung: Mit 🌍 valign ist es in HTML möglich, vertikal Text und andere Elemente ✅ auszurichten, was in der Zwischenzeit aber mit CSS leichter ist.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel