Danke
Das reicht dann schon, vielen Dank für die Beiträge ... hat mir sehr geholfen.
Beiträge von freezly
-
-
Wenns eine Tabelle sein soll(muss), dann vielleicht so.
Ja, der Gedanke ist mir auch gekommen. Allerdings war das etwas problematisch, wenn in der rechten unteren Zelle der Tabelle kein Inhalt ist, dass trotzdem der Rahmen angezeigt wurde. Das war dann nicht so schön.
Vielleicht mal eine grundsätzliche Frage dazu: Was ist der Vorteil der so angepriesenen DIVs an dieser Stelle? Von den Eigenschaften her scheinen mir die DIVs mit den display: table... Eigenschaften ja genauso zu funktionieren, wie die Tabelle. Und vom Code her scheine ich mir auch nichts zu sparen, wenn ich mir die Beispiele von djheke und styleshiet ansehe.
-
OK, das Problem habe ich nun nach intensiver Recherche gefunden. Es fehlte in dem Beispiel noch ein div um das ganze mit "display:table; border-spacing:10px;". Margin hat keine Auswirkung auf divs mit "display:table-cell". Auch auf divs mit "display:table-row" hat das border-spacing keine Auswirkung. Es muss "display:table; border-spacing:10px;" sein.
Hier der komplette Quellcode:
HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- .table{display:table; border-spacing:10px;} .tr{display:table-row;} .tc{ position: relative; display:table-cell; padding:10px; padding-bottom:30px; width:200px; border-collapse: separate; border: 1px solid; } /* padding und width optional */ div.tc span.unten{ position:absolute; bottom:5px; left:10px; display:block; } --> </style> </head> <body> <div class="table"> <div class="tr"> <div style="background:red;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> <span class="unten">unten</span> </div> <div style="background:green;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span> <span class="unten">unten</span> </div> <div style="background:blue;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> <span class="unten">unten</span> </div> </div> <div class="tr"> <div style="background:red;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> <span class="unten">unten</span> </div> <div style="background:green;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span> <span class="unten">unten</span> </div> <div style="background:blue;" class="tc"> <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> <span class="unten">unten</span> </div> </div> </div> </body></html> -
Danke für den Tipp. Funktioniert super. Die Display Einstellungen waren mir neu.
noch eine Frage dazu:
HTML.tc{ display:table-cell; padding:10px; width:200px; margin:10px; border: 1px solid; } /* padding und width optional */Wieso bekomme ich keinen Abstand zwischen den div.tc?
- - - Aktualisiert - - -
OT: ist es normal, dass das Forum im geposteten HTML Quellcode die Zeilenumbrüche schluckt? Oder mache ich was verkehrt?
-
Danke fürs öffnen.
widersprichst du dir selbst in nur einem Satz
Das kann ich erklären: Die "Faux Columns" basieren darauf, dass eine Grafik in einem Wrapper DIV gelegt wird. Nun habe ich hier aber den Fall, dass ich auch 10 Zeilen haben kann und jede Zeile eine andere Höhe haben könnte (Mein Beispiel oben hat nur eine Zeile damit es einfach bleibt). Sind ja immerhin dynamische Daten ... wer weiß denn ob in dem einen 10 Zeichen und in dem anderen 1000 Zeichen stehen (mal überspitzt ausgedrückt). Die "Faux Columns" scheinen mir tatsächlich zu einem Layout Problem zu passen ... aber eben nicht zu den Daten, die ich darstellen möchte.
Sei es drum. Was sind die Alternativen zu der Tabelle? Wie bekomme ich es mit anderen Komponenten hin? Oder verstehe ich die faux columns falsch?
-
Also mal ganz ehrlich. Sieht das Beispiel wie ein Layout aus? Linksbündig. Genau drei Spalten mit 200px Breite. Es ist eine Datentabelle! In der 2. Zeile wiederholen sich die DIVs. 3. Zeile wieder usw.
Ich bin auch offen für andere Komponenten oder auch für Workarounds. Nur um die Tabelle komme ich nicht herum ... es ist ein DataGrid von Primefaces http://www.primefaces.org/showcase/ui/datagrid.jsf ... ich hoffe damit sind auch die letzten Zweifler überzeugt, dass der Einsatz der Tabelle richtig ist.
- - - Aktualisiert - - -
Ich habe die Vermutung, du steckst gedanklich in einer Sackgasse, kannst dich nicht mehr bewegen, nimmst aber auch keine Hilfe an, um ein kurzes Stück zurückzukommen um dann auf einem anderen Weg im Endeffekt schneller zum Ziel zu gelangen.
Klar stecke ich in ner Sackgasse. Ich nehme jede Hilfe an, nur die "Faux Columns" sind keine Alternative und ein Layout ist es auch nicht.
-
Danke für die schnelle Antwort.
wenn ich es richtig verstehe soll ich ein Wrapper DIV verwenden. Das funktioniert aber für mein Beispiel nicht. Ich habe immerhin einige tr und td zwischen den einzelnen DIVs. Wie soll ich das Beispiel dafür hernehmen?
Leider kann ich auch nicht die Rahmen der Tabelle nehmen, da diese dynamisch befüllt wird und wenn in einer Zelle kein Inhalt ist, soll natürlich auch kein Rahmen zu erkennen sein.
- - - Aktualisiert - - -
Igittigitt!! Tabellen-Layout ist absolut out. Beachten den Link, den ich vorhin gepostet habe.
Jetzt mal langsam! Das ist nur ein Beispiel für meine Datentabelle und kein Layout für eine Seite. Wollte ja niemanden mit dem kompletten html Code der Seite erschlagen.
