nicht angemeldet
row/colspan: Tabellenzellen werden unerwünscht gestreckt
Gunnar BittersmannHallo,
ein alt bekanntes Problem - lässt sich mit den mir altbekannten Methoden aber nicht lösen:
Ich habe eine Tabelle, welche nach der folgenden Skizze gebaut ist:
Hierbei sind die Tabellenzellen 1, 2, 3, 4 und 7 in ihrer Größe fest und beinhalten jeweils genau eine Grafik, die genau so groß ist, wie die Zelle selbst.
Zelle 5 ist eine variable Zelle. In ihr ist Text von variabler Länge enthalten, der ggf. die Zelle in die Höhe streckt (feste Breite). Damit durch dieses In-Die-Länge-Strecken das Design nicht zerhackt wird, sind auch die Zellen 6 und 8 variabel - ihre Höhe ist nicht festgelegt (Breite schon) und sie enthalten eine Hintergrundgrafik von 1px Höhe, welche sich nach unten wiederholt.
Das Problem ist nun das folgende:
Wenn der Text die Gesamthöhe der Grafiken aus den Zellen 4 und 7 überschreitet, wird leider nicht - wie gewünscht - ausschließlich Zelle 8 und 6 vergrößert, sondern auch die Zellen 1, 2, 4 und 7! (Obwohl bei diesen feste Höhenangaben gemacht sind.)
Dadurch entstehen unter den eigentlich zellenfüllenden Grafiken in letzteren vier Zellen unschöne weiße Abstände, welche das Design zerfressen. (in Firefox und IE hab ich's ausprobiert.)
Meine Vermutng ist, dass dieses Problem von der komplexen colspan- und rowspan-Verschachtelung herrührt - ich weiß aber nicht, wo ich ansetzen soll, um eine korrekte Darstellung zu erreichen.
Ich danke euch bereits jetzt für eure Hilfe!
Gruß,
Mischa H.
-
Ich habe eine Tabelle, welche nach der folgenden Skizze gebaut ist:
Mischa,
Das ist keine Tabelle, sondern die Skizze einer Aufteilung. Und da sehr oft das Wort „fest“ vorkommt, ist sie als Aufteilung für eine Webseite so kaum brauchbar, da du nicht weißt, wie groß die beim Nutzer verfügbare Anzeigefläche (Viewport) ist.Und eine „1px hohe Hintergrundgrafik“ ist schon seit einem Jahrzehnt nicht zur Layoutgestaltung notwendig – falls sie das je war.
Gestalte dein Layout lieber flexibel an die Gegebenheiten beim Nutzer anpassbar; nutze dazu die Möglichkeiten von CSS, wie floatende Boxen. Das mag am Anfang schwer erscheinen, ist aber bei zunehmender Erfahrung einfacher zu handhaben als ein „Tabellen“layout.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Und eine „1px hohe Hintergrundgrafik“ ist schon seit einem Jahrzehnt nicht zur Layoutgestaltung notwendig – falls sie das je war.
Warum sollte sie das nicht sein? Warum sollte man einen Farbverlauf mit einer riesigen Grafik verwirklichen, wenn ein gekachelter schmaler Streifen dasselbe bewirkt und auf keine Dimension begrenzt ist?
Einen schönen Sonntag noch.
Gruß, Ashura
-
Und eine „1px hohe Hintergrundgrafik“ ist schon seit einem Jahrzehnt nicht zur Layoutgestaltung notwendig – falls sie das je war.
Warum sollte sie das nicht sein? Warum sollte man einen Farbverlauf mit einer riesigen Grafik verwirklichen, wenn ein gekachelter schmaler Streifen dasselbe bewirkt und auf keine Dimension begrenzt ist?
Ashura, ACK.
Mein Fehler. Eine _Hintergrund_grafik kann ja auch gar nicht als Platzhalter dienen. Ich ziehe diesen Einwand zurück.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
-
Hierbei sind die Tabellenzellen 1, 2, 3, 4 und 7 in ihrer Größe fest und beinhalten jeweils genau eine Grafik, die genau so groß ist, wie die Zelle selbst.
Mischa,
Ersetzen wir mal „(Tabellen)zellen“ durch „Bereiche“, das befreit von falschen Denkansätzen.Warum sind das einzelne Grafiken, warum werden diese nicht zusammengefasst?
Da deren Größe und Position genau festgelegt ist, bietet sich <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=absolute Positionierung> an.
Für den Text musst du nichts weiter tun als ihm linken und rechten Rand zu geben (http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin fürs body-Element). Die Hintergrundgrafiken 6 und 8 sind http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=background für html bzw. body; oder wenn IEs das nicht darstellen können für body und _ein_ dann notwendiges div.
Schon hast du ein flexibles Layout völlig ohne table dafür zu missbrauchen.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar,
vielleicht mag es falsch herübergekommen sein, aber es geht hier nicht um die Gestaltung einer ganzen Website, sondern nur um die Gestaltung eines kleinen "Panels", welches mehrfach auf der Seite vorkommt und in einer Art Newssystem verwendet wird.
Daher sind auch die Grafiken so merkwürdig zerhackt, weil nämlich Zelle 2 ein dynamisches Bild enthält, welches in jedem "Newspanel" anders ist.
Diese Zerhackung ist also notwendig und mir ist bislang keine CSS-Eigenschaft (außer eben background-image) bekannt, welche eine mehrfache Wiederholung eines Hintergrundbilds abhängig von der Länger eines Texts ermöglicht.Abgesehen davon ist das meiner Erfahrung nach die gängigste Methode, Farbverläufe etc. durch kleine Grafiken darzustellen und damit ein "dynamisches Design" zu basteln, welches sich an den enthaltenen Text anpasst!
Gruß,
Mischa H.-
vielleicht mag es falsch herübergekommen sein, aber es geht hier nicht um die Gestaltung einer ganzen Website, sondern nur um die Gestaltung eines kleinen "Panels", welches mehrfach auf der Seite vorkommt und in einer Art Newssystem verwendet wird.
Mischa,
Das hattest du in der Tat verschwiegen. Ist aber auch egal. Dann wird halt nicht body so formatiert, sondern die Elemente, die die Panels enthalten. Das werden wohl sinnvollerweise li sein.Für diese wird die display-Eigenschaft so gesetzt, dass sich die absolute Positionierung der darin enthaltenen Bilder auf die Panel-Box und nicht mehr auf den Viewport bezieht. Fertig.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
Nochmal die Ingrid. ;-)
Die Hintergrundgrafiken 6 und 8 sind http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=background für html bzw. body;
Die beiden können auch zusammengefasst werden als ein Hintegrundbild, was sich über die ganze Breite erstreckt. Dann könnte die Maximal(!!)-Breite für den Text auch in px angegeben werden; kleineren Viewports passt er sich so an und bricht früher um.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
Hi there,
Zelle 5 ist eine variable Zelle. In ihr ist Text von variabler Länge enthalten, der ggf. die Zelle in die Höhe streckt (feste Breite). Damit durch dieses In-Die-Länge-Strecken das Design nicht zerhackt wird, sind auch die Zellen 6 und 8 variabel - ihre Höhe ist nicht festgelegt
Die Angabe der Höhe einer Zelle wird erstens nicht von allen Browsern verstanden (wenngleich die vermutlich das Aussterben schon hinter sich haben) und stellt nur eine Minimalhöhe dar. Imho kannst Du nicht verhindern, daß sie sich streckt, wenn es die sich ändernde Gesamthöhe der Tabelle erfordert.
Ich würde mir da etwas anderes überlegen, mit einer Tabelle schätze ich wirst Du das so nie hinkriegen...
-
Hi,
Die Angabe der Höhe einer Zelle wird erstens nicht von allen Browsern verstanden (wenngleich die vermutlich das Aussterben schon hinter sich haben) und stellt nur eine Minimalhöhe dar.
Die Angabe der Höhe eines <td>-Elemtens ist valides HTML und sollte von den meisten Browsern verstanden werden - zumal es als andere Option noch die CSS-Eigenschaft max-height gibt (mit der es zugegebenermaßen auch nciht funktioniert).
Imho kannst Du nicht verhindern, daß sie sich streckt, wenn es die sich ändernde Gesamthöhe der Tabelle erfordert.
Naja, wenn du dir oben die Tabellenskizze nochmal anschaust, siehst du ja, dass in jeder Spalte eine Zelle enthalten ist, die flexibel ist (5, 6 und 8). Wenn ich in Zelle 5 Text eingebe, sollten sich meiner Ansicht nach die Zellen strecken, welche KEINE feste Höhenangabe haben, also die Zellen 6 und 8.
Das tun sie auch etwas - leider aber eben auch die Zellen 1, 2, 4 und 7, die eigentlich fest bleiben sollten. Und das genau ist das Problem!Ich würde mir da etwas anderes überlegen, mit einer Tabelle schätze ich wirst Du das so nie hinkriegen...
Vorschläge?!
Danke für deine Unterstützung,
Mischa H.-
Hi there,
Ich würde mir da etwas anderes überlegen, mit einer Tabelle schätze ich wirst Du das so nie hinkriegen...
Vorschläge?!ich würde die ganze Konstruktion mit in sich absoluten positionierten Divs erledigen, da Du ja innerhalb der Tabelle auf fixe Abstände hast. Zelle 5 ist dann halt einfach ein Div, je nach gewünschtem Design fix mit overflow:auto oder unten offen...
-
-