nicht angemeldet
Horizontal angeordnete DIVs vertikal ausrichten
Hallo zusammen!
Folgendes Problem liegt an, bei dem ich scheinbar völlig auf dem Schlauch stehe:
Ich möchte in einer Tabellenzelle zwei oder mehr DIV-Container nebeneinander anordnen. Jedes DIV erhält daher ein float:left (bzw. right). Da die Container allerdings eine unterschiedliche, nicht vorhersagbare Höhe besitzen, werden sie alle obenbündig zueinander ausgerichtet. Die Höhe der umliegenden Tabellenzelle errechnet sich übrigens aus ihrem Inhalt.
Was muss ich tun, um diese Ausrichtung zu ändern? Jeder Lösungsansatz ist willkommen.
Viele Grüße,
Tobias
-
Was muss ich tun, um diese Ausrichtung zu ändern? Jeder Lösungsansatz ist willkommen.
Au, das wird schwierig bis unmöglich. floatende Elemente werden immer so weit nach oben verschoben wie möglich. eventuell wäre dir ohne das float und mit vertical-align:middle in der tabellenzelle besser geholfen.
Gruß,
Niklas-
Das stimmt! Allerdings müsste ich dann <span> statt <div> verwenden, um die Boxen nebeneinander anzuordnen. Und das funktioniert nicht, da der Inhalt einer solchen Box vorher nicht bestimmbar ist. Es können sich also weitere <div>, Tabellen oder was auch immer darin befinden. Elemente also, die selbst eine Blockeigenschaft besitzen und den Vorteil des umschließenden <span> damit wirkungslos werden ließen.
Um dem entgegenzuwirken muss ich als umschließendes Element das <div> wählen. Und das lässt sich entweder nur mit float oder innerhalb einer Tabelle horizontal anordnen. Auf die Tabelle kann ich allerdings nicht zurückgreifen, da die Anzahl der <div>-Blöcke variabel ist.
Eine verzwickte Sache! In Zeiten <div>-basierter Layouts sollte eine so einfache Anforderung allerdings möglich sein.
-
-
Hi Tobias,
sorry to say, aber das solltest du ganz schnell vergessen.
1. Produzierst du damit nicht-validen, nicht-barrierefreien code (in Tabellen nur reine Daten)
2. Ist vertikales Ausrichten ohne feste Höhenangaben schon schwierig genug. Wie eben angemerkt besonders bei floats. In deinem Fall kommt aber noch hinzu, dass du block-level Elemente in Tabellenzellen legst(deshalb musst du ja auch floaten). table-cell ist zwar ein eigener display type und vertical-align funktioniert NUR HIER wie das alte valign="xy". Das ist aber für inline Elemente in td's gedacht (Bilder, Text).
Ich schätze du holst Daten aus'ner DB? Wenn du uns sagst was für welche in welche divs bzw. warum überhaupt div's, können wir dir vielleicht weiterhelfen. Z.B. mit ul's und floatenden li's...
Gruß
Antipitch-
Hi Antipitch!
Es geht um ein selbst geschriebenes, modulbasiertes CMS. Ein solches Modul wäre z.B. "Gib ein hochgeladenes Bild mit Untertitel aus". Oder "Biete zur hochgeladenen PDF-Datei einen Text-Link mit Größenangabe in KB an". Das Ganze lässt sich theoretisch weiter verkomplizieren. So kann ein Modul ein Tupel aus verschiedensten Dateiausgaben und Texten sein. Oder anders gesagt: Ein Modul könnte sogar eine eigene Mini-Homepage sein.
Welche Module im CMS Verwendung finden bestimmt der Admin des CMS, der die benötigten Module einbindet. Die Module werden zuvor von Autoren verfasst und Erzeugen bei Aufruf HTML-Code aus verschiedenen Teilen der CMS-Datenbank.
Jedes dieser Module soll nun in ein <div> gekapselt werden, um ihm vom Admin des CMS Stylesheets zukommen zu lassen. Würde ich sie in ein <span> packen, dann würden einige Styles (z.B. border) bei mehrzeiligen Textausgaben dem Textfluss folgen statt einen Rahmen um den gesamten Block zu legen. Außerdem würden Block-Elemente innerhalb der Module die Inline-Wirkung des <span> wieder aufheben.
Mein Wunsch ist es nun, die <div>-Blöcke nebeneinander darzustellen. Breite und Höhe des <div> werden dabei vom Inhalt der Modul-Ausgabe gesteuert. Reicht der Platz bei mehreren <div>-Blöcken nicht aus, wird automatisch in die nächste Zeile umgebrochen. Durch die float-Angabe funktioniert das auch alles wunderbar. Ich kann innerhalb des Eltern-Elements <td> bestimmen, ob die Ausgabe links- oder rechtsbündig erfolgen soll. Nur auf die vertikale Ausrichtung habe ich keinen Einfluss.
<td> verwende ich übrigens nur deshalb, weil man darin mit vertical-align vertikal ausrichten kann. Sollte eine andere Lösung möglich sein, dann kann ich die Tabelle auch durch ein <div> oder etwas anderes ersetzen. Nur fehlen mir dazu leider die Ideen.
Viele Grüße,
Tobias-
Hi Tobias,
musste kurz essen u. buffen gucken...Hab dich jetzt so verstanden, das die Tabelle im alten Modell quasi das Grundgerüst für das Pagelayout deines/ deiner Templates sein soll. Die einzige Lösung, die mir da für dich einfällt:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
In den Beispielen dort siehst du immer nur ein zentriertes div mit Text drin. Geht aber auch mit mehreren nebeneinander und weiteren block-level Elementen in den zentrierten divs. Bedingung ist allerdings auch hier, die Höhe des einen gesamtumgebenden divs zu kennen. Müsstest du dann wohl die tatsächliche Höhe deines höchsten "Zentrierungsdivs" (also deiner höchsten td aus dem alten Ansatz) per Javascript auslesen und das Attribut nachträglich setzen. Außerdem ist ein div realiter immer zwei ineinander (IE Hack). Aber vielleicht hilft dir das ja weiter. Sonst halt doch verschachtelte Tabellen?
Frage hätte ich noch: Nehmen wir mal an ein Redakteur ballert in eine Spalte Module oder Content ohne Ende (2000px oder so), in eine n'bißchen und in die dritte fast gar nichts. Und alle drei vertikal zenriert. Sieht das dann nicht etwas schräg aus?
Gruß
Antipitch-
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Danke für den Link! Allerdings rätsle ich noch wie diese Lösung für mehrere DIVs funktionieren soll. Ein DIV bleibt ein DIV, sprich, es bricht die aktuelle Zeile um. Und das kann auch in dieser Lösung nur mit float realisiert werden, wodurch wir wieder bei unserem anfänglichen Problem wären.
Ich habe mich daher nach langem Ringen für eine andere Lösung entschieden: Sobald mindestens zwei DIVs nebeneinander dargestellt werden sollen, wird jedes DIV in eine Tabellenzelle gepackt. Alle DIVs innerhalb einer Zeile befinden sich dann innerhalb der gleichen Tabelle. Soll nach einem bestimmten DIV umgebrochen werden, so wird für die folgenden DIVs eine neue Tabelle angelegt. der Vorteil an der Sache: Innerhalb von Tabellenzellen lassen sich die DIVs in der Vertikalen ausrichten. Außerdem können die einzelnen Tabellen problemlos horizontal ausgerichtet werden. Einziger Nachteil: Das automatische Umbrechen zwischen zwei benachbarten DIVs muss entfallen. Diese "Macht" hat fortan der User des CMS (wobei es ohnehin selten zu dieser Situation kommen wird).
Frage hätte ich noch: Nehmen wir mal an ein Redakteur ballert in eine Spalte Module oder Content ohne Ende (2000px oder so), in eine n'bißchen und in die dritte fast gar nichts. Und alle drei vertikal zenriert. Sieht das dann nicht etwas schräg aus?
Ja, das würde ein wenig doof aussehen ;-)
Sinn und Zweck des CMS soll es sein, einem absoluten Webdesign- und -programmier-Noob die Möglichkeit zu geben, sich eine auf seine Bedürfnisse angepasste HP zu basteln. Was er dazu braucht ist das CMS und eine Person (ein Dienstleister wie z.B. ich), die ihm das System mit einem Layout und den für seine Bedürfnisse notwendigen Modulen konfiguriert bzw. initialisiert. So möchte fast jeder auf seiner HP Bilder online stellen. Doch nur wenige wollen Flash-Filme oder PDF-Dateien hochladen. Und natürlich soll die Präsentation automatisch zum Gesamtlayout passen. Die Anforderung lautet also, dass das CMS für einen Autor möglichst einfach bedienbar sein muss, während ein Admin alle Facetten der Flexibilität wünscht.Um also auf deine Frage zurückzukommen: Module sollten vom Admin so vorkonfiguriert werden, dass der Autor - und sei er noch so unerfahren - eine solche Situation erst gar nicht verursachen kann. Und auch falls er es "könnte", so wäre es sicher nicht in seinem Sinne. Denn schließlich handelt es sich bei dem CMS ja um "seine" HP.
Viele Grüße,
Tobias
-
-
-