Zur Navigation

Frames durch Tabellen ersetzen

1 lava

Hallo, bisher hab ich nur in HTML mit Frames gearbeitet, nun arbeite ich mit PHP und will stattdessen Tabellen anlegen, die mir das Seitengrundgerüst geben und deren Inhalte dann dynamisch gefüllt werden können. Dabei will ich den "Mainframe" bzw. die Tabellenmitte so gestalten, daß bei Bedarf gescrollt wird, dachte, das ginge mit einer height-Angabe (denn oberer und unterer Rand sollen immer angezeigt werden. Aber das klappt scheinbar nicht, wenn der Inhalt zuviel Platz braucht, wird der Bodenframe nicht angezeigt, und das ist blöd. Wie mach ich das?
Lava

05.11.2006 12:33

2 Jörg Kruse

Hallo Lava,

probier's mal mit einem div, das du in die betreffende Tabellenzelle legst, und welchem du in CSS die feste Höhe und Breite der Tabellenzelle sowie die Eigenschaft overflow:auto zuweist, z.B.:

<td>
<div style="height:200px; width:200px; overflow:auto">Inhalt</div>
</td>

Überschreitet der Inhalt dann die angegebene Höhe, sollte ein Scrollbalken erscheinen

05.11.2006 12:48 | geändert: 05.11.2006 12:52

3 lava

Danke :)
Und wieder eine Frage. Jetzt ersetze ich also die Frames durch PHP.
Bei Frames könnte ich angeben, wieviel Prozent des Anzeigefensters sie einnehmen sollen, z.B.
mit dem einleitenden Tag <frameset rows="10%,90%,10%">.

Wenn ich das nun in PHP auch so haben will und wirklich für das Mittelfenster, auch bei längerem Text, 90% haben will (d.h. notfalls soll im Mittelfenster halt gescrollte werden), dann hätte ich gedacht, das ginge nun so:


<table height="100%"><tbody ><tr>
<td height="10%"></td></tr>
<tr> <td height="90%">
<div style="overflow:auto;">
<?PHP include("main.php"); ?>
</div>
</td> </tr>
<tr > <td height="10%"></td></tr></tbody></table>

aber leider scheint das mit den height-Angaben nicht zu funktionieren - warum????

11.11.2006 19:09

4 lava

Falls prozentuale height-Angaben in Tabellen wirklich nicht funktionieren, könnte man sich ja auch die absolut gewünschte Höhe ausrechnen, wenn man die Dimensionen des Anzeigefensters ermitteln kann. Dazu hat mir Google folgenden Code gegeben:

var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}


Das scheint Javascript zu sein, oder? Muß ich das in eine function reinpacken? Dann könnte ich das noch um die Variablen Randbreite = 0.1 * y und Mittelbreite = 0.9 * y ergänzen und mir dann als absolute Höhe

<table height=y><tbody><tr><td height=javascript:Randbreite</td>
</tr><tr><td height=javascript:Mittelbreite ..... etc. einfügen ? Stimmt da die Syntax??? (wahrscheinlich nicht, ist geraten.....)

11.11.2006 19:41

5 Jörg Kruse

Hallo Lava,

damit die Tabelle eine Höhe von 100% hat, müssen auch die Elternelemente html und body schon 100% hoch sein; dazu müsstest du folgende CSS-Angaben im head-Bereich machen:

<style type="text/css">
html, body {
height:100%;
}
</style>

11.11.2006 22:39

6 lava

Hm, nochmals lieben Dank! Mit deiner Antwort bin ich zwar ein Stückchen weiter gekommen, aber leider immer noch nicht weit genug. Es scheint zu funktionieren, wenn ich die o.g. Style Sheet Einträge mache und dann der Tabelle eine Gesamthöhe von 90 % gebe - gebe ich ihr mehr, krieg ich am äußeren Rand noch einen zusätzlichen Scrollbalken, den ich ja gerade nicht möchte, ich will ja nur innen scrollen. Soweit mitgedacht, daß ich vermutlich auch margin-left, margin-right, margin-top und margin-bottom auf 0 setzen muß, hab ich bereits.... Also verstehe ich nicht, wieso ein 100% body dann keine 100% Tabelle verträgt ??? Und wenn ich mit der 90% Tabelle arbeite, dann sitzt mein unterer "Frame" (bzw. meine untere Tabellenzeile) halt trotz valign=bottom nicht ganz unten.... Außerdem erscheint der äußere Scrollbalken trotzdem, obwohl man ihn dann gar nicht scrollen kann, und stört das Bild. Du kannst es dir ja gerne mal anschauen: Aktueller Stand der Dinge (Testversion) steht auf http://sm.ismine.de/marco

12.11.2006 00:00

7 Jörg Kruse

Ja, margin muss auf 0 gesetzt werden, aber auch padding - sowohl für html wie auch für body

html, body {
height:100%;
margin:0;
padding:0;
}

In Opera und Firefox füllt die Tabelle dann den Anzeigebereich exakt aus. Der IE (6 und 7) fügt allerdings immer noch einen Scrollbalken hinzu :/ woher er diese zusätzliche Höhe nimmt, kann ich auf Anhieb aber nicht erkennen. Bei einer einfachen Tabelle bestünde dieses Problem jedenfalls nicht..

12.11.2006 00:42

8 Jörg Kruse

Nachtrag:

wenn du das <br /> in der untersten Tabellenzeile herausnimmst, passt es auch im IE:

<!-- Strich -->

<tr><td valign="bottom" height=5%>

<br />

12.11.2006 00:53 | geändert: 12.11.2006 00:54

9 lava

Danke. Komisch, das <br> stand doch gar nicht GANZ unten, sondern VOR der Adreßzeilentabelle.

[Dreamweaver-Frage von Jörg hierhin verschoben]

Ich find das übrigens super, daß du immer so rasch antwortest. So macht Neues dazulernen richtig Spaß, wenn man im Zweifelsfall auch immer nette Helfer zur Hand hat :)))) Großes Lob und Danke!

14.11.2006 07:48 | geändert von Jörg: 14.11.2006 09:22

10 lava

P.S. Also, das rausnehmen von <br> und sogar Entschachtelung der Tabelle hat aber jetzt doch nichts wesentlich geändert. Trotz 2x valign="bottom" rutscht die graue Zeile mit den Adressdaten den Anwalts nicht ganz nach unten (okay, ganz unten säh vielleicht auch scheiße aus, wahrscheinlich würd ich sogar ein br noch einfügen, aber momentan versteh ich einfach nicht, wieso sie es nicht tut. Immernoch auf http://sm.ismine.de/marco anzusehen....)

14.11.2006 08:04