nicht angemeldet
Scrollbarer DIV
Hallo zusammen,
ich würde gerne folgendes realisieren:
Ich möchte eine Datentabelle in einem Scrollbaren Div darstellen. Direkt darunter soll eine Navigation dazu angezeigt werden. Das klappt mit untenstehndem Code auch sehr gut. Allerdings nur im Firefox. Der IE spielt da leider nicht mit. Der IE erweitert das DIV und stellt keinen Scrollbalken mehr dar, sobald es einen umschliessenden Tag gibt. In meinem Falle das <form>
Vielleicht kann mir ja einer der CSS Spezialisten hier weiterhelfen.
Danke und Grüße,
Stefan
Code:
<html>
<head>
<title>Table Test</title>
</head>
<body>
<form>
<div style="align:center;width:95%;height:20%;overflow:auto;border:inset;">
<table width="99%" cellspacing="0" cellpadding="0" rules="all" border="1">
<tr>
<td>Col 1:1</td><td>Col 1:2</td><td>Col 1:3</td><td>Col 1:4</td><td>Col 1:5</td>
</tr>
<tr>
<td>Col 2:1</td><td>Col 2:2</td><td>Col 2:3</td><td>Col 2:4</td><td>Col 2:5</td>
</tr>
<tr>
<td>Col 3:1</td><td>Col 3:2</td><td>Col 3:3</td><td>Col 3:4</td><td>Col 3:5</td>
</tr>
<tr>
<td>Col 4:1</td><td>Col 4:2</td><td>Col 4:3</td><td>Col 4:4</td><td>Col 4:5</td>
</tr>
<tr>
<td>Col 5:1</td><td>Col 5:2</td><td>Col 5:3</td><td>Col 5:4</td><td>Col 5:5</td>
</tr>
<tr>
<td>Col 6:1</td><td>Col 6:2</td><td>Col 6:3</td><td>Col 6:4</td><td>Col 6:5</td>
</tr>
<tr>
<td>Col 7:1</td><td>Col 7:2</td><td>Col 7:3</td><td>Col 7:4</td><td>Col 7:5</td>
</tr>
<tr>
<td>Col 8:1</td><td>Col 8:2</td><td>Col 8:3</td><td>Col 8:4</td><td>Col 8:5</td>
</tr>
<tr>
<td>Col 9:1</td><td>Col 9:2</td><td>Col 9:3</td><td>Col 9:4</td><td>Col 9:5</td>
</tr>
<tr>
<td>Col 10:1</td><td>Col 10:2</td><td>Col 10:3</td><td>Col 10:4</td><td>Col 10:5</td>
</tr>
</table>
</div>
<div>
Hier die Navigation
</div>
</form>
</body>
</html>
-
Hallo,
Code:
DOCTYPE? http://de.selfhtml.org/html/allgemein/grundgeruest.htm
<html>
<head>
<title>Table Test</title>
</head>
<body>
<form>
<div style="align:center;width:95%;height:20%;overflow:auto;border:inset;">Es existiert keine CSS-Eigenschaft "align". http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm
Die Höhe height:20% hättest Du gerne wovon berechnet? FORM hat keine definierte Höhe, BODY hat keine definierte Höhe. Demzufolge sind 20% von beliebig auch wieder beliebig.
<style type="text/css">
html, body {height:100%;}
</style>würde das Problem beheben, aber auch neue Probleme aufwerfen. Kannst Du dem DIV nicht eine fixe Höhe in px oder em geben?
viele Grüße
Axel
-
Hallo Axel
<style type="text/css">
html, body {height:100%;}
</style>würde das Problem beheben, aber auch neue Probleme aufwerfen.
Kannst Du mir das mal genauer erklären, welche Probleme tauchen da auf?
Viele Grüße
Minas Mogul
-
Hallo,
Kannst Du mir das mal genauer erklären, welche Probleme tauchen da auf?
Beispielsweise, dass sich nun alle Prozentangaben für die Höhe von Elementen, deren umschließender Block BODY ist, nur noch auf die Höhe des Viewports (Browserfensters) beziehen, selbst, wenn der BODY höher ist, man also vertikal scrollen muss.
Zweitens, dass sich die Höhe verringert, wenn man die Viewportgröße verringert (das Browserfenster in der Höhe verkleinert). Das führt bei kleinen Höhen zur Unbenutzbarkeit des Scroll-DIVs, weil man nichts mehr sieht.
... kann fortgesetzt werden ...
viele Grüße
Axel
-
-
-
moin Stefan :)
Vielleicht kann mir ja einer der CSS Spezialisten hier weiterhelfen.
Spezialist bin ich nicht - aber ich kann dir sagen, dass der IE hier die Prozentangabe für "height" nicht mag (im div). Wenn es dir da irgendwie möglich ist, eine feste Angabe zu machen, dann funktioniert es auch.
Das Beispiel: ~~~html<div style="align:center;width:95%;height:100px;overflow:auto;border:inset;">
liebe Grüße aus Berlin lina- -- Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)