nicht angemeldet
Abstände innerhalb einer Tabellenzelle
Auge
MudGuardHallo!
Ich habe eine Tabelle mit Zellen berechneter Größe. Z.B.:
<td style="width:80px; height:50px; border:1px solid red;">...</td>
Ich möchte darin eine farbige Fläche mit definierten Abständen zum Rand der Zelle anzeigen, ohne die Größe der Fläche explizit zu berechnen. Ich habe also innerhalb der Zelle kodiert:
<div style="margin:5px; background:blue;">...</div>
Nun habe ich das Problem, dass die Fläche offensichtlich in der Größe durch ihren Inhalt bestimmt wird. Mit width/height komme ich auch nicht weiter bzw. es wirkt sich auf die Größe der umgebenden Tabellenzelle aus.
Wenn der Inhalt klein genug oder nicht vorhanden ist, sind die Abstände größer als gewünscht. Bei größerem Inhalt stimmt zwar der Abstand, aber die umgebenden Zelle wird größer.
Ich bin mir sicher, dass es irgendwie geht - aber wie?
Die Lösung sollte sowohl im IE6 als auch im Firefox zu gleichen Ergebnissen führen. Ich verwende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Ralf
-
Hi,
Ich habe eine Tabelle mit Zellen berechneter Größe. Z.B.:
<td style="width:80px; height:50px; border:1px solid red;">...</td>Wozu braucht man in Tabellen eigentlich Größenangaben in px?
Ich möchte darin eine farbige Fläche mit definierten Abständen zum Rand der Zelle anzeigen, ohne die Größe der Fläche explizit zu berechnen. Ich habe also innerhalb der Zelle kodiert:
<div style="margin:5px; background:blue;">...</div>Nun habe ich das Problem, dass die Fläche offensichtlich in der Größe durch ihren Inhalt bestimmt wird. Mit width/height komme ich auch nicht weiter bzw. es wirkt sich auf die Größe der umgebenden Tabellenzelle aus.
Das ist ja auch ein typisches Merkmal von Tabellen und genau deshalb sind sie für Layoutzwecke nicht unbedingt geeignet.
Wenn der Inhalt klein genug oder nicht vorhanden ist, sind die Abstände größer als gewünscht. Bei größerem Inhalt stimmt zwar der Abstand, aber die umgebenden Zelle wird größer.
???
Ich bin mir sicher, dass es irgendwie geht - aber wie?
Die Lösung sollte sowohl im IE6 als auch im Firefox zu gleichen Ergebnissen führen.
Im Opera nicht?
Ich verwende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">Auch wenn der IE hier nicht in den Quirksmodus schaltet - eine uri kann nicht schaden.
Einen schönen Mittwoch noch!
-
Hallo
Ich verwende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">Auch wenn der IE hier nicht in den Quirksmodus schaltet - eine uri kann nicht schaden.
Nicht? Es ist ja nichteinmal angegeben, welcher Modus verandt wird (transitional, strict oder frameset). Erst bei Angabe der URI der DTD würde der MSIE in den 'standards compliant mode' schalten.
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Nicht? Es ist ja nichteinmal angegeben, welcher Modus verandt wird (transitional, strict oder frameset).Doch, das ist klar erkennbar. Da weder Transitional noch Frameset da steht, ist es strict.
Bei XHTML 1.0 steht "Strict" im Public Identifier, bei HTML 4.01 nicht.http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp
Das solltest Du Dir mal durchlesen, insbes. das unter "Die Variante Strict für HTML:" ;-)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo
Doch, das ist klar erkennbar. Da weder Transitional noch Frameset da steht, ist es strict.
Bei XHTML 1.0 steht "Strict" im Public Identifier, bei HTML 4.01 nicht.http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp
Das solltest Du Dir mal durchlesen, insbes. das unter "Die Variante Strict für HTML:" ;-)
Nun denn. :-)
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Wozu braucht man in Tabellen eigentlich Größenangaben in px?
Die Ausgabe erfolgt in einem Fenster mit fest definierter Größe und daher müssen auch die einzelnen Zellen eine bestimmte Größe haben. Aber das ist doch hier nicht Thema!
Das ist ja auch ein typisches Merkmal von Tabellen und genau deshalb sind sie für Layoutzwecke nicht unbedingt geeignet.
Meine aktuelle Lösung des Problems sieht auch völlig anders aus. Da wird die Tabelle nur absolut positioniert angezeigt und sozusagen als optischer Rahmen dargestellt.
Darüber lege ich absolut positionierte DIV Elemente, so dass der gewünschte optische Effekt erreicht wird.Da aber logisch betrachtet diese DIV Elemente innerhalb der jeweiligen Zelle liegen, hoffe ich auf eine Lösung, die dies auch in der Definition ermöglicht.
Im Opera nicht?
Von mir aus auch da. Spielt aber keine Rolle, da für die Anwendung Opera nicht geeignet ist (fehlende window.onerror Unterstützung).
Nun aber wieder zurück zum Thema!
Ich suche nach einer Möglichkeit, innerhalb einer Tabellenzelle ein Element darzustellen, welches definierte Abstände zu den Rändern der umgebenden Zelle haben soll. Die Größe der Zelle soll unter allen Umständen die per width/height definierte bleiben.
Ralf
-
Hi,
Wozu braucht man in Tabellen eigentlich Größenangaben in px?
Die Ausgabe erfolgt in einem Fenster mit fest definierter Größe und daher müssen auch die einzelnen Zellen eine bestimmte Größe haben. Aber das ist doch hier nicht Thema!
Wäre aber trotzdem schön, wenn du ein flexibles Layout erstellen würdest.
Das ist ja auch ein typisches Merkmal von Tabellen und genau deshalb sind sie für Layoutzwecke nicht unbedingt geeignet.
Meine aktuelle Lösung des Problems sieht auch völlig anders aus. Da wird die Tabelle nur absolut positioniert angezeigt und sozusagen als optischer Rahmen dargestellt.
Darüber lege ich absolut positionierte DIV Elemente, so dass der gewünschte optische Effekt erreicht wird.Wozu das denn? Ich glaub eh du irgendwie absolut positionieren willst, solltest do doch lieber eine Tabelle nehmen. Ich ahne schlimmes!
Da aber logisch betrachtet diese DIV Elemente innerhalb der jeweiligen Zelle liegen, hoffe ich auf eine Lösung, die dies auch in der Definition ermöglicht.
Ja wie denn jetzt? Du positionierst alles absolut. D.h. die Tabelle hat keinen Inhalt. Wie willst du damit die Größe der Tabelle steuern?
Im Opera nicht?
Von mir aus auch da. Spielt aber keine Rolle, da für die Anwendung Opera nicht geeignet ist (fehlende window.onerror Unterstützung).
Von mir aus (ich verwende eh Firefox). Nur wird Opera meistens grundlos vernachlässigt.
Nun aber wieder zurück zum Thema!
Ich suche nach einer Möglichkeit, innerhalb einer Tabellenzelle ein Element darzustellen, welches definierte Abstände zu den Rändern der umgebenden Zelle haben soll. Die Größe der Zelle soll unter allen Umständen die per width/height definierte bleiben.
Ich denk das Element befindet sich außerhalb der Tabelle?
Einen schönen Sonntag noch!
-
Wäre aber trotzdem schön, wenn du ein flexibles Layout erstellen würdest.
Was sollte in diesem Zusammenhang flexibel bedeuten? Wie schon festgestellt, ist die Größe der Tabellenzellen fix. Darüber muss m.E. nicht diskutiert werden.
Meine aktuelle Lösung des Problems sieht auch völlig anders aus. Da wird die Tabelle nur absolut positioniert angezeigt und sozusagen als optischer Rahmen dargestellt.
Darüber lege ich absolut positionierte DIV Elemente, so dass der gewünschte optische Effekt erreicht wird.Wozu das denn? Ich glaub eh du irgendwie absolut positionieren willst, solltest do doch lieber eine Tabelle nehmen. Ich ahne schlimmes!
Ich will nicht unbedingt absolut positionieren, möchte das sogar möglichst vermeiden. Ich brauche aber exakte Abstände, die in Pixel bemessen sind.
Zum Verständnis habe ich mal nachfolgenden Screenshot meiner derzeitigen Lösung erstellt:
Der schwarze Rand begrenzt die Tabelle sowie die enthaltenen Zellen. Deren Größe wird berechnet und ergibt sich aus der Anzahl Spalten/Zeilen sowie der festen(!) Größe der Tabelle.
Soweit noch alles ganz einfach ...In jeder Zelle befindet sich eine farbige Fläche, deren Außenabstände zu den Rändern der umgebenden Zelle berechnet werden können.
Es ist mir jedoch nicht gelungen, diese Flächen innerhalb der Zellen zu definieren und dabei sowohl die Abstände einzuhalten als auch die Größe der Zellen nicht zu verändern.
Daher habe ich die Eckpunkte und Größe der Flächen berechnet und diese dann absolut über die Tabelle positioniert.Ja wie denn jetzt? Du positionierst alles absolut. D.h. die Tabelle hat keinen Inhalt. Wie willst du damit die Größe der Tabelle steuern?
Mit width und height - oder habe ich die Frage falsch verstanden?
Von mir aus (ich verwende eh Firefox). Nur wird Opera meistens grundlos vernachlässigt.
Opera unterstützt leider nicht die mehrfache Referenzierung über das opener Objekt und muss daher für diese Anwendung unberücksichtigt bleiben.
Ich suche nach einer Möglichkeit, innerhalb einer Tabellenzelle ein Element darzustellen, welches definierte Abstände zu den Rändern der umgebenden Zelle haben soll. Die Größe der Zelle soll unter allen Umständen die per width/height definierte bleiben.
Ich denk das Element befindet sich außerhalb der Tabelle?
Logisch und optisch betrachtet (s.o.) nicht. Jedoch leider von der Definition bisher schon.
Ralf
-
-
-
-
Hallo,
ich habe gerade Deinen Post von heute (22.06.) gelesen.
Folgende Tipps von mir:- schreibe "1px" statt "1 px" (siehe Styles in den TD-Elementen);
- schmeiße die width- und height-Angaben aus dem TABLE-Element raus, so daß sich Breite und Höhe der Tabelle von den Zellen bestimmt werden.
So geht es bei mir in Firefox und IE:
<table style="border:1px solid green; table-layout:fixed; border-collapse:collapse;">
<tr>
<td style="width:80px; height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
<td style="width:80px; height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
<td style="width:50px; height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
</tr>
<tr>
<td style="height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
<td style="height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
<td style="height:50px; border:1px solid red;">
<div style="margin:10px 8px 5px 8px; background:lightblue; border:1px solid blue;">
???
</div>
</td>
</tr>
</table>Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
Hallo Andreas,
ich habe gerade Deinen Post von heute (22.06.) gelesen.
Dann hat es ja immerhin was gebracht ;)
- schreibe "1px" statt "1 px" (siehe Styles in den TD-Elementen);
Ich schreibe das "px" immer unmittelbar nach der Zahl und kann auch nicht erkennen, dass ich das anders gemacht habe.
- schmeiße die width- und height-Angaben aus dem TABLE-Element raus, so daß sich Breite und Höhe der Tabelle von den Zellen bestimmt werden.
Das ist problematisch, weil der äußere Rahmen eine feste Größe haben muss - daher auch table-layout:fixed.
So geht es bei mir in Firefox und IE:
So geht es bei mir weder in Firefox noch IE! Die Größe der DIV wird durch deren Inhalt bestimmt - was auch logisch ist. Mach mal die Zellen erheblich größer und du siehst das Problem.
Vielleicht habe ich einen falschen Ansatz gewählt. Ich hatte die Vorstellung, dass eine Tabellenzelle mit fest definierter Größe ein Element beherbergen kann, dessen Größe durch die umgebenden Zelle beschränkt werden kann. Das bekomme ich aber nicht hin - auch nicht mit overflow:hidden.
Ich werde jetzt mal versuchen, die Zelle mit Padding zu definieren. Dafür ist jedoch (außer im quirks mode) eine Neuberechnung der Zellengröße erforderlich ...
Ralf
-
Hallo,
vielleicht mißverstehe ich Dein Problem, aber hast Du auch daran gedacht, daß sich table-layout:fixed; nur auf die Zellenbreiten bezieht?
Ich hatte angenommen, daß Du auch die Höhen festlegen möchtest.
Das wäre aber nicht möglich über die Höhe der TD-Elemente, denn anscheinend ist es so:
"Height aplied to table row acts roughly as min-height to other
elements."
(http://www.thescripts.com/forum/thread98087.html)Hm, habe jetzt leider auch keine Lösung.
Aber die Anregung, vielleicht doch noch mal nach einer Alternative zu der derzeitigen Konstruktion zu suchen.Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
vielleicht mißverstehe ich Dein Problem, aber hast Du auch daran gedacht, daß sich table-layout:fixed; nur auf die Zellenbreiten bezieht?
Jetzt wo ich es lese, erinnere ich mich daran, hatte es aber wohl verdrängt. Das war dann auch der Grund für meine derzeitige Lösung, die mit absolut positionierten DIV Elementen arbeitet.
Ich hatte angenommen, daß Du auch die Höhen festlegen möchtest.
Richtig.
Das wäre aber nicht möglich über die Höhe der TD-Elemente, denn anscheinend ist es so:
"Height aplied to table row acts roughly as min-height to other
elements."
(http://www.thescripts.com/forum/thread98087.html)Das spricht auch nicht unbedingt dagegen, weil ja das enthaltene Element klein genug gewählt werden könnte. Mir widerstrebt es aber, dessen Größe auch noch zu berechnen, weil es ja für die Breite auch nicht sein muss.
Aber die Anregung, vielleicht doch noch mal nach einer Alternative zu der derzeitigen Konstruktion zu suchen.
Ich habe ja eine Alternativkonstruktion. Tabelle als "optischer Rahmen" und DIV-Elemente in die Zellen absolut positioniert.
Funktioniert auch gut, befriedigt aber nicht mein Bedürfnis nach einer "logischen" Lösung. Aber da habe ich vielleicht die Messlatte zu hoch gelegt.Eine optimale Lösung wäre, die Tabellenzellen ebenfalls als DIV-Elemente zu erstellen. Dann bekomme ich aber ein Darstellungsproblem mit der fixen Größe des Anzeigebereiches.
Wie ich es auch drehe und wende - an einer Stelle klemmt es dann ;)
Ralf
-