Tabelle an Browsergröße anpassen

[vodoomaster]

Hallo erstmal!

Hab sonst keine Probleme mit HTML aber im moment steh ich anscheinend total auf der Leitung.

Also folgendes Problem:
Ich habe eine Seite die sich aus Header, Nav, Content zusammsetzt.

Sind wie folgt aufgebaut:
+------------+
|...HEADER....|
+------------+
|.......NAV.....|
+------------+
|.................|
|...CONTENT..|
|.................|
+------------+

Und ich will nun das der Contentbereich immer vertikal max. groß ist.
Gescrollt soll aber erst dann werden, wenn wirklich soviel Content vorhanden ist.

Wie soll ich das am besten lösen?

Wahrscheinlich nur ein kleiner dummer Fehler von mir, aber ich hoffe ihr könnt mir helfen!

thx, cu

[maulwurf]

du brauchst ne tabelle mit 100% höhe oder frames...

[vodoomaster]

frames möchte ich auf keine fall verwenden..

ja schon klar, aber soll ich nuh in die bereits bestehende tabelle noch eine einbaun?

cu

[Jan Krüger]

100% Höhe ist etwas, das man vermeiden sollte. Dann wird nämlich der Content immer so hoch wie das Fenster, d.h. er ragt dann unten entsprechend der Größe von Header und Navigation über den unteren Fensterrand hinaus.
Einfachste Lösung: schreib einfach genug in die Seiten rein, damit er sich immer weit genug ausstreckt. Der Sinn von kürzeren Seiten ist sowieso erfahrungsgemäß in den meisten Fällen begrenzt. ;)

[vodoomaster]

Ok, aber die Lösung mit soviel Leerzeilen etc. find ich blöd, da es ja eben immer angepasst werden sollte.

Ich werd das mit 100% Höhe probiern, da ich ja genau den Zustand, dass der Contentbereich nach unten hin gezogen wird erreich will.

cu

[Jan Krüger]

Ich rede ja auch nicht von Leerzeilen, sondern von echtem Inhalt. Und ich finde es nicht gerade schick, wenn die 100% den Content-Bereich dermaßen ausweiten, dass man runterscrollen muss, um die komplette Leere sehen zu können...

[vodoomaster]

man soll ja auch nur dann scrollen wenn wirklich soviel content ist, das scrollen notwendig wäre... ansonsten soll doch nur eine leerer content background angezeigt werden.

vl. gefällts dir nicht, ist aber auf das design abgestimmt ....

[Jonas]

Jan: Um den kompletten Inhalt eine Tabelle machen und die auf height:100% setzen, da is doch nix gegen einzuwenden, oder?
sodaß man z.B. den Footer immer ganz nach unten kriegt...

[Jan Krüger]

Das Problem ist, dass "height:100%;" den Footer unter ganz unten positioniert, denn der Content-Bereich wird auf die Höhe des Fensters gesetzt (eben 100%). Da der Header und Footer aber auch noch Platz wegnehmen, wird der Content damit größer als der freie Bereich zwischen Header und Footer innerhalb des Anzeigebereichs, und schon muss man scrollen.

Und wenn ich Tabellen ganz außenherum baue, wird bei mir immer der Footer ausgedehnt und nicht der Content (und sag jetzt nicht, dass man die Größe des Footers statisch festlegen sollte, das ist nämlich ganz böse :p). Außerdem benutzt man natürlich DIVs und nicht Tabellen.

[Jonas]

nö, ich benutze tabellen und stehe dazu *AscheAufMeinHaupt*
so naja wenn man ein bild oder so im footer hat, kann man den doch schon auf ne feste höhe setzen, was spricht dagegen?

[vodoomaster]

dagegen spricht für mich zumindestens nichts ...

habs nun anders gelöst .. die 100% variante gefiel am schluss dann net so, wie ichs mir vorgestellt habe ..

aber trotzdem danke

cu

[DaRoot]

problem ist bei 100% höhe eines dokumentes "wie hoch ist ein HTML dokument eigentlich?" denn 100% sind anders als 100% breite nicht "das ganze fenster" sondern "so groß wie der Inhalt ist" also lässt man am besten das design am Inhalt angepasst.

[vodoomaster]

Original geschrieben von DaRoot
problem ist bei 100% höhe eines dokumentes "wie hoch ist ein HTML dokument eigentlich?" denn 100% sind anders als 100% breite nicht "das ganze fenster" sondern "so groß wie der Inhalt ist" also lässt man am besten das design am Inhalt angepasst.

so hab ichs jetzt auch gelöst .. ist anscheinend die beste lösung ....

cu

[Klaus1980]

Hi,

wie bekomme ich eine Tabelle über eine ganze Seite auch wenn ich scrolle ?


<table bgcolor="#FF0000" width="20%" height="100%" border="0" align="right">
<tr><td background="images/neo1.gif" height="90"></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>


Problem: Der Inhalt der Seite ist so lang das man scrollen muss. Und sobald man dann nach unten scrollt hört die Tabelle auf der rechten Seite auf. Also wenn ich praktisch eine ganzes Bild nach unten gehe ist auf der rechten Seite keine Tabelle mehr.

Warum nicht ? Was mache ich falsch ?

Wie bekomme ich eine Tabelle hin auch wenn ich scrollen muss ?

Danke für Eure Antworten im Vorraus.

Gruss Klaus1980

[Jan Krüger]

In reinem HTML/CSS kenne ich dafür keine direkte Lösung, denn:

A percentage height on the root element is relative to the viewport.

Man kann aber wahrscheinlich den gesamten Inhalt (inkl. Hauptteil und Tabelle am Rand) in ein <div>-Element verpacken, dann sollte sich die height-Angabe auf dessen Höhe beziehen.

[Klaus1980]

hehe .. ok das mit dem <div 100%> geht :) die rechte Tabelle ist nun 100% so wie ich will. ABER : :)

Ich habe oben drüber noch eine Tabelle. Und der <div ..> Teil beginnt mit seiner Darstellung ganz oben. siehe Grafik.


<table align="left" width="85%" height="100">
<tr><td></table>

<div id="table">
<table bgcolor="#FF0000" width="15%" height="100%" align="right">Inhalt</table>
Hauptteil ( Tabellen mit align="center" )
</div>


Bekomm ich das auch noch anständig hin irgendwie mit Tabellen ?

Allgemeine Frage: Wie kann ich das besser lösen ? Frames ?

Gruss klaus

[Jan Krüger]

Von Frames rate ich generell eher ab, weil sie bei der Navigation oft einige Steine in den Weg legen. Außerdem hast du in der Frage vergessen zu erwähnen, was denn jetzt genau anders sein soll...?
Spontan fällt mir auf, dass bei der ersten Tabelle das '%' nach der 100 fehlt (wenn das nicht so gedacht ist... aus den Teil-Screenshots ist schlecht zu erkennen, wie es insgesamt aussehen soll).

[Klaus1980]

Das ist extra so.

Das erste ist meine "Kopftabelle" die soll nur 100 pixel hoch sein.

Screen 1 zeigt wie es aussehen soll. Ist kein Problem so hinzubekommen. Problem: Rechte Tabelle ist nicht wirklich 100% hoch. Halt nur bis man scrollen muss. Darunter ist die Tabelle nicht mehr.

Screen 2 zeigt wie es nun aussieht. Da hab ich halt den Hauptteil und die rechte Tabelle in ein <div Höhe=100% Hintergrund=Grün> gesteckt. Also praktisch ausser der "Kopftabelle" ist in dem div Teil.

Problem: Entweder die beiden Tabelle passen oben zusammen, aber dafür ist die Tabelle unten nicht bis zum Seitenende ODER rechte Tabelle geht bis ganz unten aber dafür passt es oben nicht.

Lösung ?!?

Gruss Klaus

[Jan Krüger]

Kann man den Markup mal in komplett ansehen (am besten URL, zur Not aber auch [code])?

[Caesar]

hi!
es ist vielleicht insgesamt viel einfacher sich von dem "align"-attribut zu lösen und satt dessen die tabellen zu schachteln also z.b. so:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td><table width="100" height="100" border="0">
<td>linke tabelle</td></table></td>
<td><table width="200" height="200" border="0">
<td>rechte tabelle</td></table></td>
</tr>
<td><table width="100" height="100" border="0">
<td>linke tabelle</td></table></td>
<td><table width="200" height="200" border="0">
<td>rechte tabelle</td></table></td>
</table>

das sollte dann vier tabellen ergeben (2x2). dann kannst du die positionierung der tabellen z.b. über das "cellpadding"-attribut der "rahmentabelle" steuern oder über das "align"-attribt des <td>-tags in der "rahmentabelle".
probier damit am besten mal herum.
gruß,
*Caesar*

[Jan Krüger]

Genauer gesehen ist es ratsamer, sich vom Schachteln von Tabellen zu lösen (das W3C rät davon explizit ab) und sich allgemeinen Blockelementen und CSS zu bedienen. Aber das ist natürlich eine deutliche Umgewöhnung...

[Klaus1980]

Test Link (http://217.234.182.113:8080/Tippspiel/index.jsp)

Login --> test//test --> Tippen und Ergebnisse

Ich bräuchte eher eine schnelle kurze Lösung. Will mir keine grosse Gedanken mehr über das Layout machen. :)

[zeus]

Test Link (http://217.234.182.113:8080/Tippspiel/index.jsp)

Login --> test//test --> Tippen und Ergebnisse

Ich bräuchte eher eine schnelle kurze Lösung. Will mir keine grosse Gedanken mehr über das Layout machen. :)

Ich denke wenn DU nur noch die Funktion Tippen & Ergebnisse ausrechnen haben willst und das für viele Personen, die nachträglich nichts mehr ändern dürfen, wirst Du um ne SQL mit PHP nicht rumkommen.

[Klaus1980]

nene ... es geht nur ums Layout.

Die Anwendung steht ansonsten. Ist soweit auch fertig. Servlets,JSP`s und MySQL sind im Einsatz.

Geht im Grunde nur um die Tabellen. :)

[Jan Krüger]

Am schnellsten geht sicher der von Caesar vorgeschlagene Klassiker. Aber, wie gesagt, das wird vom W3C nicht empfohlen und verstößt gegen die Accessibility Guidelines.
Hier der Code, trotz Vorbehalten. Und weil das sowieso schon unkonform ist, benutze ich gleich noch unkonforme Attribute. Aber ich habe dich ja gewarnt. ;)

<table cellpadding="2" cellspacing="0"><!-- ganz außen -->
<tr>
<td bgcolor="red">Kopfzeile links</td>
<td bgcolor="green">Kopfzeile rechts</td>
</tr>

<tr>
<td bgcolor="green" valign="top">Hauptteil</td>
<td bgcolor="red" valign="top">Balken rechts</td>
</tr>
</table><!-- ganz außen -->

Achja, und habe ich schon erwähnt, dass diese Lösung weder zukunftskompatibel noch für Sehbehinderte benutzbar ist?

[Klaus1980]

Danke für die ganzen Antworten. :)

Habe es jetzt so wie ich es haben wollte ... ob das gut ist werden wir noch sehen. :)

Die EM läuft ja nur 3 Wochen. :) Danach überlege ich mir in meinen Semesterferien ein neues Design.

Wie macht ihr eure Navigation ? Auch mit Tables oder was ganz anderes ?

[Jan Krüger]

Ich arbeite für das Layout ausschließlich mit DIVs (und teilweise Strukturelementen wie unsortierten Listen). Wie sowas funktioniert, lässt sich auf vielen Webseiten nachlesen, die sich mit CSS beschäftigen.

[Klaus1980]

Werde ich mal bei Gelegenheit nachschlagen. Thx. :)

Und gleich noch eine allgemeine Frage: Wie geht man mit verschiedenen Bildschirmauflösungen am besten um ?

Wie bekomme ich es am besten hin das meine Page bei den meisten Standard Auflösungen gut aussieht ?

[Caesar]

hi Jan!
ich habe mir deinen rat durch die blume mal zu herzen genommen und habe mir die zugänglichkeitsrichtlinien des w3c angesehen - also besonders den abschnitt 5.3, der die tabellen als layout-mittel "verteufelt". ;) die argumente, die sie dort anführen sind schon richtig - für menschen, die auf solche übersetzungs- bzw. verbalisierungs-tools zurückgreifen, können tabellen natürlich leicht ein problem darstellen, da tabellen ja für solche tools eine eher logische strukturierung implizieren und eher kein layout- oder positionierungsmittel.
in der tat dürfte die umsetzung dieser richtlinien im nicht-komerziellen-bereich aber eher selten sein. ich meine, das macht schon unter umständen viel arbeit und wenn man ehrlich ist, macht das bei vielen seiten - gerade den viel-frequentierten und meist auch eher "unnützen" eher keinen großen sinn (ich denke da an daddel-seiten & co.), da blinde menschen an sowas wohl eher kein gesteigertes interesse haben dürften.
nichts desto trotz nehme ich mir die richtlinien teilweise zu herzen (auch gerade den tabellen-abschnitt).
gruß,
*Caesar*

[Jan Krüger]

Am besten, indem du innerhalb der Seite keine absoluten Angaben benutzt, zumindest nicht für die Größe des Hauptteils. Ich benutze z.B. nur eine absolute Angabe für die Höhe meiner Header.

[Jan Krüger]

Hallo Caesar (ja, ich kann auch Anreden! ;)),

dass es viel Arbeit ist, lasse ich nicht gelten -- man braucht nur ein bisschen Einarbeitungszeit, danach ist es fast leichter, ohne Tabellen zu arbeiten, denn man muss nicht mehr auf jeder Seite die Layout-Attribute explizit angeben, sondern nur noch das Stylesheet laden.
Es ist richtig, dass viele Seiten vom Inhalt her prinzipiell für sehbehinderte Menschen nicht sehr nützlich sind. Aber es gibt ja auch noch andere Leute, die Probleme mit Tabellen kriegen könnten. Da wären z.B. Textbrowser zu nennen, die oft keine Tabellen unterstützen. Zugegeben, auch diese Leute sind keine sehr große Gruppe. Aber eigentlich hat das schon was von Diskriminierung, so von wegen "ich glaube nicht, dass du diese Seiten lesen willlst, also bist du mir egal"...
Und nicht zuletzt wäre da noch der technische Grund, den du ja schon genannt hast. Tabellen sind Strukturelemente, während DIVs Designelemente sind (da sie keine Strukturinformation beinhalten).
Wenn du mal eine richtig gute Seite mit einem reinen DIV-Design und vielen nützlichen CSS-Artikeln sehen willst, schau dir http://alistapart.com/ an.

[Klaus1980]

Hi,

kann mir jemand noch sagen ob ich, wenn ich für eine Tabellenzeile ein Hintergrundbild angebe, dieses Bild 100% machen kann ?

Also ob ich das Bild praktisch strecken kann ? Wie bei der Auswahl für das Deskopt Walpaper in Windows. Da kann ich, falls das Bild zu klein ist auch sagen "Strecken". Im Moment setzt er das Bild einfach nochmal daneben. Das will ich eigentlich vermeiden.

Gruss Klaus

[Pharao]

für die imagetags gab es ein widht-attribut. (width="100%")weiß nur atm. nicht ob es genau das getan hab und hab grad keinen rechner zum testen da sorry.

[Klaus1980]

hmm jo ich glaub es gibt sowas .. aber ich hab ja kein image Tag sondern direkt in der table das hintergrundbild angegeben. Also so :

<td background="images/Titel.gif">

Gruss Klaus

[DaRoot]

hmm jo ich glaub es gibt sowas .. aber ich hab ja kein image Tag sondern direkt in der table das hintergrundbild angegeben. Also so :

<td background="images/Titel.gif">

Gruss Klaus man kann bilder nie 100% machen.