Tabelle im DIV mit 100% Höhe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahne
angabe
boxen
code
container
datei
ecke
element
fehler
grad
http
index
legen
opus
parameter
problem
scheitern
tabelle
testen
url
-
Ich habe hier ein eigtl total banales Problem, und zwar:
Ich habe ein <div> als Parent und darin befindet sich ein <table>. Dieser <table> soll nun das <div> in alle Richtungen voll ausfüllen, also habe ich folgenden Code:
// index.html ... <div> <table>...</table> </div> ... // style.css ... div table { height: 100%; width: 100%; } ...
So. Beim Firefox funktioniert es so wie es soll, aber der IE und Opera ignorieren die CSS-Angaben einfach. Problem an der Sache ist außerdem, dass sich in der Tabelle ein Text mit variabler Länge befindet, daher kann ich die Höhen und Breiten nicht einfach statisch definieren.
Danke schonmal im Vorraus.
Liebe Grüße
- VampireSilence -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Kann Deinen Fehler nicht nachvollziehen.
Folgender Code ging bei ie5,Opera 9,Safari3.2.2 und Firefox:
<html> <head> <style =type ="css/text"> div.contentFrame { width: 100px; height: 100px; border: 1px #aa0000 solid; } div table { margin:0;padding:0; height: 100%; width: 100%; } </style> </head> <body> <div class="contentFrame"> <table cellspacing="2" cellpadding="2" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td>f</td> <td>f</td> </tr> </table> </div> </body> </html> -
Tatsächlich, bei dir funktioniert es. Habe es jetzt nochmal isoliert in einer gesonderten Datei getestet und da klappt das mit dem Verschachteln und Ausfüllen, der Fehler muss irgendwo anders liegen. Ich hab auch schon raus, zwischen welchen beiden Elementen der Fehler auftritt, ich verstehe nur noch nicht so ganz, wodurch dieser hervorgerufen wird. Ich schaue mir das nochmal genau an und melde mich dann per Edit nochmal.
Edit: Also. Ich versteh die Welt nicht mehr. Ich bin jetzt hingegangen, habe eine neue Datei erstellt und nach und nach alle CSS-Einträge einzeln rüberkopiert.
Bis zu folgenden Definitionen bin ich gekommen:
div.infobox { left: 500px; position: absolute; top: 400px; width: 300px; height: 250px; } div.infobox table, div.infobox table tr td table, div.infobox table tr td table tr td table { border: 0px solid cyan; height: 100%; width: 100%; } td.infobox_l, td.infobox_r { height: 100%; width: 34px; } td.infobox_lt { background: url('infobox_left_top.png') top left no-repeat; height: 150px; width: 34px; } td.infobox_lm { background: url('infobox_left_middle.png') top left repeat-y; width: 34px; }
Bis hier hin sieht die Box noch ok aus. Und jetzt kommt Folgende:
td.infobox_lb { background: url('infobox_left_bottom.png') top left no-repeat; height: 100px; width: 34px; }
Und sobald ich diese drin hab, ist das Design zerhauen, obwohl die Definition überhaupt nichts mit den betroffenen Elementen zu tun hat. Meine Datei habe ich mir Opera 10.10 getestet und sieht nun insgesamt so aus:
<html> <head> <style =type ="css/text"> div.infobox { left: 500px; position: absolute; top: 400px; width: 300px; height: 250px; } div.infobox table, div.infobox table tr td table, div.infobox table tr td table tr td table { border: 0px solid cyan; height: 100%; width: 100%; } td.infobox_l, td.infobox_r { height: 100%; width: 34px; } td.infobox_lt { background: url('infobox_left_top.png') top left no-repeat; height: 150px; width: 34px; } td.infobox_lm { background: url('infobox_left_middle.png') top left repeat-y; width: 34px; } td.infobox_lb { background: url('infobox_left_bottom.png') top left no-repeat; height: 100px; width: 34px; } </style> </head> <body> <div class="infobox" id="infobox"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_l" style="border: 1px solid red;"> <table cellpadding="0" cellspacing="0" style="border: 1px solid red;"> <tr> <td class="infobox_lt"> </td> </tr> <tr> <td class="infobox_lm"> </td> </tr> <tr> <td class="infobox_lb"> </td> </tr> </table> </td> <td class="infobox_c" style="border: 1px solid red;"> <table cellpadding="0" cellspacing="0" style="border: 1px solid red;"> <tr> <td class="infobox_ct"> <div class="divDragTitle" id="box"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_ctl"> </td> <td class="infobox_ctm"> </td> </tr> </table> </div> </td> </tr> <tr> <td class="infobox_cm"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_t"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_tl">//title</td> <td class="infobox_display_tm">//time</td> <td class="infobox_display_tr"> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_display_c"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_cl"> </td> <td class="infobox_display_cm">//content</td> <td class="infobox_display_cr"> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_display_b"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_bl"> </td> <td class="infobox_display_bm"> </td> <td class="infobox_display_br"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_cb"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_cbl"> </td> <td class="infobox_cbm"> </td> <td class="infobox_cbr"> </td> </tr> </table> </td> </tr> </table> </td> <td class="infobox_r"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_rt"> </td> </tr> <tr> <td class="infobox_rm"> </td> </tr> <tr> <td class="infobox_rb"> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
Kannst es ja mal testen, vielleicht seh ich den Fehler auch grad nur nicht.
Liebe Grüße
- VampireSilence
Beitrag zuletzt geändert: 20.2.2010 17:58:20 von vampiresilence -
vampiresilence schrieb:
Kannst es ja mal testen, vielleicht seh ich den Fehler auch grad nur nicht.
Liebe Grüße
- VampireSilence
Das sind...
..ziemlich viele Tabellen
Also bei mir sieht's in allen Browser exakt gleich aus (ie5,Opera 9,Safari3.2.2 und Firefox).
Nämlich so
Beitrag zuletzt geändert: 20.2.2010 18:13:48 von simuliertes -
Ja, ich weiss. Deshalb ist auch die Fehlersuche nicht gerade einfach. Der IE packts mit diesem Script, FF ja auch schon lange, aber Opera 10.10 macht wie gesagt immernoch Probleme. Die CSS-Datei sieht im Übrigen auch noch ne ganze Ecke wilder aus, ich habs hier aber extra schon auf die wesentlichen Zeilen reduziert.
Liebe Grüße
- VampireSilence -
Also sowohl in Chrome, Firefox als auch Opera sieht die Datei nahezu gleich aus. Ich verstehe aber nicht so ganz dein Problem. Das div wird doch voll ausgefüllt - es existiert ja kein Rahmen von der Klasse infobox_r und daher fällt das "Ende" nur indirekt auf.
Wenn du eine "richtige" Version hast, lad doch mal ein Bild hoch und wenn möglich lad auch die entsprechende Seite hier hoch - dann muss ich nicht eine erstellen;) -
Also hier die hochgeladene Version: http://vampiresilence.lima-city.de/box/
FF 3.5.5: Funzt (dafür isses auch geschrieben)
IE 6: Zu breit.
Opera 10.10: In der Höhe eingedrückt.
Die roten Border sind nur da, damit man ganz deutlich sieht, dass die Tabelle eben nicht zu 100% füllt. Die kommen später wieder weg.
Liebe Grüße
- VampireSilence -
Ich schätze mal die Antwort ist einfacher als gedacht.
Du musst die 100%/100% auch auf die richtige Tabelle anwenden.
Also auf die, die infobox_c als Elternelement hat.
Naja durch diesen Code blickt eh keiner mehr richtig durch.
Probiere das hier:
<html> <head> <style =type ="css/text"> div.infobox { left: 500px; position: absolute; top: 400px; width: 300px; height: 250px; } div.infobox table, div.infobox table tr td table, div.infobox table tr td table tr td table { border: 0px solid cyan; height: 100%; width: 100%;} } td.infobox_l, td.infobox_r { height: 100%; width: 34px; } td.infobox_lt { background: url('infobox_left_top.png') top left no-repeat; height: 150px; width: 34px; } td.infobox_lm { background: url('infobox_left_middle.png') top left repeat-y; width: 34px; } td.infobox_lb { background: url('infobox_left_bottom.png') top left no-repeat; height: 100px; width: 34px; } td.infobox_c {border: 1px solid blue;} td.infobox_c2 { height: 100%; width: 100%;} </style> </head> <body> <div class="infobox" id="infobox"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_l" style="border: 1px solid red;"> <table cellpadding="0" cellspacing="0" style="border: 1px solid red;"> <tr> <td class="infobox_lt"> </td> </tr> <tr> <td class="infobox_lm"> </td> </tr> <tr> <td class="infobox_lb"> </td> </tr> </table> </td> <td class="infobox_c" > <table cellpadding="0" cellspacing="0" style="border: 1px solid green;" class="infobox_c2"> <tr> <td class="infobox_ct"> <div class="divDragTitle" id="box"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_ctl"> </td> <td class="infobox_ctm"> </td> </tr> </table> </div> </td> </tr> <tr> <td class="infobox_cm"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_t"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_tl">//title</td> <td class="infobox_display_tm">//time</td> <td class="infobox_display_tr"> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_display_c"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_cl"> </td> <td class="infobox_display_cm">//content</td> <td class="infobox_display_cr"> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_display_b"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_display_bl"> </td> <td class="infobox_display_bm"> </td> <td class="infobox_display_br"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td class="infobox_cb"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_cbl"> </td> <td class="infobox_cbm"> </td> <td class="infobox_cbr"> </td> </tr> </table> </td> </tr> </table> </td> <td class="infobox_r"> <table cellpadding="0" cellspacing="0"> <tr> <td class="infobox_rt"> </td> </tr> <tr> <td class="infobox_rm"> </td> </tr> <tr> <td class="infobox_rb"> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
Beitrag zuletzt geändert: 20.2.2010 19:27:46 von simuliertes -
Ja, ich ahne auch, dass es nachher was ganz einfach es ist, aber ich hab in der Zwischenzeit noch weiter gesucht und ich komme einfach nicht drauf. Dein Vorschlag führt leider auch nicht zum Erfolg. Genau wie die vorherigen Versuche auch, wird die Angabe einfach ignoriert und man sieht keine Veränderung. Ich habs jetzt auch so hochgeladen, kannst es dir gern ansehen.
Liebe Grüße
- VampireSilence -
ich würde das so machen erst mal ein container wo alles reinkommt:
der container hat eine prozentuale größe wie höhe von 100.
// index.html ... <div id="container"> <div id="table"></div> </div> ... // style.css ... div container { height: 100%; width: 100%; } ... div.table { deine angaben; }
Beitrag zuletzt geändert: 20.2.2010 20:52:34 von maxdes -
Hab ich auch mal versucht, aber half genau so wenig.
Echt frustrierend, aber wenigstens brauch ich mich mittlerweile nich mehr schämen, an sowas einfachem zu scheitern. ^^
Liebe Grüße
- VampireSilence -
Ich hab jetzt auch nochmal im Opera geschaut - und mir ist es immernoch nicht schlüssig, was dieser anders interpretiert. Dennoch würde ich mal einen anderen Ansatz probieren:
Im Grunde machst du es ja schon mal falsch: Eine Tabelle ist nunmal kein Mittel zur Gestaltung von einem Layout - und wenn ich das Recht überblicke nutzt du es dafür. Also überleg dir, wie du das durch div-Elemente ersetzen kannst - dann müsste erstens der Quellcode übersichtlicher werden und zweitens auch richtiger.
Leider hab ich auch den Überblick verloren, was dynamisch sein soll und was fest ist - daher halt ich mich zurück bevor ich was falsches mache. -
Ja, das Problem ist nur, dass ich um Tabellen nicht drumherum komme, da ich dem DIV nicht sagen kann, dass es zusammen mit 2 anderen insgesamt die Höhe von 3 anderen haben soll. Das wäre per JS ein Rechenaufwand, den einfach kein Besucher tragen wollte. Ich könnte die flexiblen DIVs auch teilweise hinter die fixen Ecken legen, aber hier machen mir die Alphachannel der *.PNGs einen Strich durch die Rechnung, die verdoppeln sich nämlich dann.
Ich habs wirklich am Anfang versucht, nur mit DIVs zu machen, aber da die Ecke teilweise nichtmal die gleichen Maße haben und es zudem auch noch 3 flexible Kästen ineinander sind, wirst du wie ich zu dem Schluss kommen, dass es anders einfach nicht drin ist.
Liebe Grüße
- VampireSilence
Beitrag zuletzt geändert: 23.2.2010 0:16:53 von vampiresilence -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
