Felder mit flexibler Höhe in 3 Spalten anordnen

Status
Nicht offen für weitere Antworten.
V

vistree

Grünschnabel
Hallo,
ich finde einfach keine Lösung für das folgende Problem:
Wie muss ich in CSS vorgehen, um eine Liste von z.B. 12 Feldern in Spalten anzuordnen.
Jedes Feld hat eine eingene DIV class und ich kann KEINE neuen DIVS einfügen, da der Output von einem Modul produziert wird
Wie sieht das ganze aus?!

field1/1....field4........field7
field1/2....field5/1.....field8
field2.......field5/2.....field9
field3.......field6........field10/1
..............................field10/2
..............................field11
..............................field12


Wobei jedes Feld mehr als eine Zeile beihnalten kann. Wie würdet ihr das machen, dasss alle Felder in einer Zeile auch immer in der richtigen Spalte stehen und ohne Zwischenraum übereinander stehen?

Viele Grüße
 
Hallo Sven,
danke für die Nachfrage!
Also, wenn ich deine Frage richtig verstehe, möchtest du mehr über den "Quelltext" wissen, oder?
OK, ich verwende ein Modul, dass mir für eine definierte Liste von Feldern eine Teaseransicht erzeugt. Es gibt verschiedene Beiträge, die alle den gleichen Inhalttyp vewenden (in einem CMS). Die Eingaben werden dann in der Teaser-Ansicht mit den gewünschten Feldern dargestellt. Und genau diese Ansicht versuche ich 3-Spaltig anzuzeigen.
Hier mal eine Beispiel des HTML-Codes:
HTML: 
<div class="item-list">
<ul>
<li>
<div class="views-field-title">
</div>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-telefon-value">
</div>
<div class="views-field-field-arztnamen-value">
</div>
<div class="views-field-field-email-email">
</div>
<div class="views-field-view-node">
</div>
</li>
<li>
<div class="views-field-title">
</div>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-telefon-value">
</div>
<div class="views-field-field-arztnamen-value">
</div>
<div class="views-field-field-ort-value">
</div>
<div class="views-field-field-telefax-value">
</div>
<div class="views-field-field-email-email">
</div>
<div class="views-field-view-node">
</div>
</li>
<li>
<div class="views-field-title">
</div>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-telefon-value">
</div>
<div class="views-field-field-arztnamen-value">
</div>
<div class="views-field-field-ort-value">
</div>
<div class="views-field-field-telefax-value">
</div>
<div class="views-field-field-email-email">
</div>
<div class="views-field-view-node">
</div>
</li>
</ul>
</div>

Wichtig: hier wird nur ein Auszug der gewünschten Felder gezeigt. Insgesamt sind es 12.
Wie du siehst, gibt es eine umgebenden DIV item-list. Nun werden nacheinander 3 Listeneinträge mit dem gleichen Feldaufbau erzeugt. die verschiedenen DIVs "views-field-title, views-field-field-andresse-value, .... , views-field-view-node möchte ich nun in 3 Spalten organisieren. Dies kann ich nur über CSS erreichen, da ich in den o.g. HTML-Code keine zusätzlichen Elemente einfügen kann.
Jeder der DIVs kann nun Text mit einer variablen Anzahl von Zeilen beinhalten. Deswegen habe ich Probleme mit absoluter Positionierung und dem Setzen eine negativen margin-top um alle 3 Spalten auf gleicher Höhe beginnen zu lassen ;-(

Ist mein Problem somit verständlich?

Viele Grüße

Kai
 
Falls ich dich reht verstanden habe, sollte eigentlich das ausreichen:
Code: 
div.item-list li{float:left;width:33%;list-style-type:none;}
div.item-list li div{border:1px solid #000}

Problematisch ist aber das mit der Höhe...ich befürchte, wenn die Höhe aller div's dynamisch ist, lässt sich das mit CSS nicht machen, dass auch alles ordentlich in einer Reihe ist.
 
Hallo Sven,
und noch mal Danke!
Ich glaube, dass ich mit deinem Vorschlag nicht zum Ziel komme. Problem: hier werden nun die LIs gefloatet. Ich möchte aber die li's untereinader haben und die jeweils enthaltenen DIVs innerhalb des jeweiligen li's in 3 Spalten organisieren. Und ja, die enthalten DIVs können immer unterschiedlich hoch sein ...
Fällt dir dazu noch was ein?

Gruß und Danke

Kai
 
Hi,

vielleicht verstehe ich dich vollkommen falsch?! Aber du kannst doch mit Hilfe von float drei Container nebeneinander prositionieren, mit margin: 0px auch ohne Abstand. Damit die drei Boxen immer genau in einer Reihe sind würde ich min-height verwenden mit einer Angabe, die auf jeden Fall ausreicht...

Grüße
 
Hallo Leon,
vielleicht bin ich einfach zu blöd mich verständlich auszudrücken ;-)
Also noch mal das Problem: Viele Datensätze mit den gleichen Feldern. Jedes Feld kann eine variable Anzahl von Zeilen haben!
Jeder Datensatz ist in meinem oben geposteten Code in einem eigenen li-Abschnitt. Diese solle untereinander auf einer Seite folgend.
So, in jedem li gibt es nun die gewünschten 12 () Felder mit Ihalten. Diese sollen nun für jeden li-Abschnitt in drei nebeneinanderliegen Spalten organisiert werden. Leider kann ich nicht einfach einen DIV um zusammengehörenden Felder legen, da ich nicht an den erzeugenden Code rankomme.

Gruß

Kai
 
Hi!

ich kann KEINE neuen DIVS einfügen
Zum Vergrößern anklicken....
Sorry, hab ich wohl übersehen...

Ist es dir denn möglich, in der CSS die Liste zu erweitern und eine zweite interne Liste mit display: inline zu definieren? Dann könntest du immer die drei Spalten als "Unterliste" (mir fällt kein geeignetes Wort ein...) einfügen und hättest sie so in einer Zeile.
 
Hm, hier gibt es eine Inline-Option. Die macht aber aus den DIVs einfach SPAN-Anweisungen, ohne das benachbarte SPANs dann einen gemeinsamen DIV bekommen würden. Ich kann ohne weiteres ALLE Einträge entweder auf DIV oder auf SPAN setzen. Bringt das was?
HTML: 
<div class="view-content">
<div class="item-list">
<ul>
<li>
<span class="views-field-title">
</span>
<span class="views-field-field-arztnamen-value">
</span>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-ort-value">
</div>
<span class="views-field-field-telefon-value">
</span>
<span class="views-field-field-telefax-value">
</span>
<span class="views-field-field-email-email">
</span>
<div class="views-field-view-node">
</div>
</li>
<li>
<span class="views-field-title">
</span>
<span class="views-field-field-arztnamen-value">
</span>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-ort-value">
</div>
<span class="views-field-field-telefon-value">
</span>
<span class="views-field-field-telefax-value">
</span>
<span class="views-field-field-email-email">
</span>
<div class="views-field-view-node">
</div>
</li>
<li>
<span class="views-field-title">
</span>
<span class="views-field-field-arztnamen-value">
</span>
<div class="views-field-field-andresse-value">
</div>
<div class="views-field-field-ort-value">
</div>
<span class="views-field-field-telefon-value">
</span>
<span class="views-field-field-telefax-value">
</span>
<span class="views-field-field-email-email">
</span>
<div class="views-field-view-node">
</div>
</li>
</ul>
</div>
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück