Dynamische Menulänge zum InhaltArtikel
HTML-Layout-Power mit JavaScript und CSS
Keine gute Lösung: Tabellen, das Pseudoraster für Designer
Es gibt Momente, da kommt man mit reinem (X)-HTML und CSS nicht weiter: Noch heute weigern sich beispielsweise viele Webdesigner auf die Verwendung von Tabellen für Webdesigns zu verzichten.
Das hat gute Gründe: Bisher lassen in HTML nur Tabellenzellen Beziehungen in Höhe und Breite zueinander zu. Andere Blockelemente (z.B.
) ziehen sich in der Regel nur so lang wie der Inhalt es benötigt. Oft möchte man aber 2 nebeneinanderstehende Blöcke gleich lang darstellen, um so ein bündiges Design zu ermöglichen.
Zwar ermöglich der HTML-Standard durch das CSS-Attribut display die Deklarierung von Tabellen-Elementen in beliebigen HTML-Tags, jedoch ist dies für den Einsatz in XML gedacht um Datensätze tabellarisch aufzubereiten und nicht um diese für die Websiterasterung zu missbrauchen.
Das Ziel: Das Menü erstreckt sich genausolang wie der Content. Das eigentlich längere Menü erhält einen Scrollbalken. Wichtig: Das Menü muss sich dynamisch an die Höhe des Content-Bereichs anpassen.
Das W3C hinkt hinterher
Es gibt jedoch auch ein Formatierungsziel, an dem jede Tabelle und jede CSS-Eigenschaft scheitert.
Es handelt sich hierbei um die dynamische Anpassung der Länge einer Spalte mit der einer anderen, so dass beide stets gleich lang sind. Hierbei soll die eine Spalte jedoch maximal so lang sein wie die andere. Ist sie länger, soll ein Scrollbalken den Inhalt zugänglich machen. Hier muss ein kleines javascript dem Browser und dem HTML-Standard auf die Sprünge helfen.
Praxisbeispiel
In der Praxis stellt sich das Problem wie folgt dar: 2 div-Container, einer für das Menü, einer für den Content, sollen stets gleich lang sein. Hierbei möchten wir auf den Einsatz von Tabellen verzichten um so volle Kontrolle über die Anordnung des Codes zu haben (um z.B. im Quellcode den Inhalt vor das Menü zu positionieren).
Ohne das dynamic height Script wird jeder Container so lang gezogen wie er es benötigt - und zerreisst somit das gesamte Layout.
Die div-Container werden mittels des float-Attributes nebeneinander positioniert. Nun soll der Menü-Container stets so lang gestreckt werden, dass er die gleiche Höhe erhält wie der Content-Container. Gleichzeitig soll verhindert werden, dass das Menü länger wird als der Content. Stattdessen soll es bei gleichbleibender Höhe einen Scrollbalken anbieten. Spätestens hier würde auch die Tabellenvariante versagen.
Wir müssen also dynamisch die Höhe des Content-Containers feststellen und dem Menü-Container zuweisen. Gleichzeitig erzwingen wir im Menü via overflow einen Scrollbalken.
Der HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Dynamic Height Script by pc-intern.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="lib/screen.css" type="text/css" />
Zwar ermöglich der HTML-Standard durch das CSS-Attribut display die Deklarierung von Tabellen-Elementen in beliebigen HTML-Tags, jedoch ist dies für den Einsatz in XML gedacht um Datensätze tabellarisch aufzubereiten und nicht um diese für die Websiterasterung zu missbrauchen.
Das Ziel: Das Menü erstreckt sich genausolang wie der Content. Das eigentlich längere Menü erhält einen Scrollbalken. Wichtig: Das Menü muss sich dynamisch an die Höhe des Content-Bereichs anpassen.
Das W3C hinkt hinterher
Es gibt jedoch auch ein Formatierungsziel, an dem jede Tabelle und jede CSS-Eigenschaft scheitert.
Es handelt sich hierbei um die dynamische Anpassung der Länge einer Spalte mit der einer anderen, so dass beide stets gleich lang sind. Hierbei soll die eine Spalte jedoch maximal so lang sein wie die andere. Ist sie länger, soll ein Scrollbalken den Inhalt zugänglich machen. Hier muss ein kleines javascript dem Browser und dem HTML-Standard auf die Sprünge helfen.
Praxisbeispiel
In der Praxis stellt sich das Problem wie folgt dar: 2 div-Container, einer für das Menü, einer für den Content, sollen stets gleich lang sein. Hierbei möchten wir auf den Einsatz von Tabellen verzichten um so volle Kontrolle über die Anordnung des Codes zu haben (um z.B. im Quellcode den Inhalt vor das Menü zu positionieren).
Ohne das dynamic height Script wird jeder Container so lang gezogen wie er es benötigt - und zerreisst somit das gesamte Layout.
Die div-Container werden mittels des float-Attributes nebeneinander positioniert. Nun soll der Menü-Container stets so lang gestreckt werden, dass er die gleiche Höhe erhält wie der Content-Container. Gleichzeitig soll verhindert werden, dass das Menü länger wird als der Content. Stattdessen soll es bei gleichbleibender Höhe einen Scrollbalken anbieten. Spätestens hier würde auch die Tabellenvariante versagen.
Wir müssen also dynamisch die Höhe des Content-Containers feststellen und dem Menü-Container zuweisen. Gleichzeitig erzwingen wir im Menü via overflow einen Scrollbalken.
Der HTML-Code:
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Dynamic Height Script by pc-intern.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="lib/screen.css" type="text/css" />
Monday, 03. April 2006 @ 22:31:44 |
7917 Zeichen |
1 Antworten
Antwort hinzufügen
Teilweise geht es bisher wohl noch nicht immer ohne Tabellen auch wenn sie natürlich sehr unschön sind.
Andererseits ist es aber auch gut, weil nur so kann man als Webautor dem IE gutes Benehmen beibringen ohne die ganzen CSS-Bugs des IE und die passenden Hacks dazu im Kopf zu haben: Sie sind nicht eingeloggt.
Login
Noch keinen Account? Jetzt kostenlos registrieren und Mitglied werden.