Dynamische Menulänge zum Inhalt
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. <div>) 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:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
<script src="lib/dynamic_height.js" language="javascript" type="text/javascript"></script>
</head>
<body onload="dheight()">
<div id="site">
<div id="main">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="menu">
<h1>Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
</body>
</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" />
<script src="lib/dynamic_height.js" language="javascript" type="text/javascript"></script>
</head>
<body onload="dheight()">
<div id="site">
<div id="main">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="menu">
<h1>Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
</body>
</html>
Die Style-Sheet-Anweisungen und das javascript werden im <head>-Bereich geladen. Im <body>-Tag wird das javascript bei Seitenaufruf ausgeführt. Dieses checkt dann die Höhe von main in Pixeln und setzt diese bei menu als Höhe ein.
Der javascript-Code (lib/dynamic_height.js):
CODE
<!--
function dheight() {
var t1=(document.getElementById('main').offsetHeight)+"px";
document.getElementById('menu').style.height=(t1);
}
//-->
function dheight() {
var t1=(document.getElementById('main').offsetHeight)+"px";
document.getElementById('menu').style.height=(t1);
}
//-->
Der CSS-Code (lib/screen.css):
CODE
<!--
#site {
margin-left:auto;
margin-right:auto;
width:620px;
}
#menu {
width:160px;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
border:1px solid #000;
padding-left:10px;
padding-right:10px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
}
#main {
width:400px;
float:right;
border:1px solid #000;
padding-left:10px;
padding-right:10px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
}
//-->
#site {
margin-left:auto;
margin-right:auto;
width:620px;
}
#menu {
width:160px;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
border:1px solid #000;
padding-left:10px;
padding-right:10px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
}
#main {
width:400px;
float:right;
border:1px solid #000;
padding-left:10px;
padding-right:10px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
}
//-->
Kompatibilität
Das Script funktioniert ohne Probleme in jedem modernen Browser. Getestet wurde es unter Windows im Mozilla Firefox, Internet Explorer, Opera und unter Mac OS X im aktuellen Safari.
Voraussetzung ist aktiviertes javascript. Die Standard-Einstellung des Internet Explorer 6 unter Windows hat jedoch deaktiviertes javascript. Der Browser ermöglicht es dem Benutzer dieses jedoch zu aktivieren:
Deaktiviertes javascript deaktiviert leider auch das dynamic height Script. Die meisten Benutzer haben jedoch ohnehin javascript per se aktiviert.
Mit aktiviertem javascript klappts auch mit dem Browser
Download
Das Script kann man inklusive Beispieldatei und Screenshots unter PC-Intern.com herunterladen.
dynamic_height.zip
(0,13 Mbyte), Hits: 202
Weitere Informationen
Lorem Ipsum was? - Mehr Infos zum Fiktiven Fülltext.
Montag, 03. April 2006 @ 22:31:44 |
8922 Zeichen |
1 Antworten
Antwort hinzufügen
http://dean.edwards.name/IE7/Sie sind nicht eingeloggt.