CSS 2 Problem, Kolumnenartige Darstellung?

[Picard]

Jo moinsen,

Problem ist das folgende:
ich bekomme ein unbestimmte anzahl an Paragrafen geliefert, welche unbenannt sind (keine klasse, keine ids) und je nach auflösung kolumnenartig in einem containertemplate (welches auch mein css enthält) dargestellt werden sollen.

Leider klappt das nicht ohne weiteres so wie ich mir das vorstellte.. atm sieht der output so aus:

realisiert über folgenden code:

#content p {
float:left;
width:25%;
margin-left:40px;
}

Als reihenfolge hätte ich das nun aber gerne so:

Sprich: wie bringe ich es ihm bei, ohne änderungen am php code (z.b. lösbar durch abzählen der absätze + klassenzuweisung) nach dem dritten (vierten, fünften, ..., n-ten) element nen clear:both zu machen? - oder - einfach die elemente je nach größe des fenster nebeneinander zu schreiben, und danach nen umbruch zu machen?
also:

p[1] 	- p[2] 		- p[3] - p[4] - ... - p[n-3]  <umbruch>
p[n-2] 	- p[n-1] 	- p[n]

spezifikationen von css2 hab ich mir schon angeschaut, counter sieht dabei gut aus, aber hab dazu auch noch keine lösung gefunden. also: jemand hier ideen? ^^

 

[BiBaButzemann]

um ehrlich zu sein:
ich würds stumpf über die template engine lösen (halt irgendn iterator reinhauen, der bei modulo 3 oder ähnlich breaked) -.-
irgendwo muss ja auch aufwand / nutzen stimmen

wenn du keine engine benutzt / ans php nicht ranwillst halt über javascript (und mal auf die 0.1% nicht-js'er geschissen)

 

[Picard]

das wär wie gesagt kein problem, da ich templatesystem & co ja selbst geschrieben hab.

allerdings müsste ich dem user vorher neben der normalen templateauswahl auch noch eine extra auswahl geben, die ja nur für denn fall zutrifft, wenn er tatsächlich diesen kolumnenstyle haben will, was wieder mit änderungen am datenbanklayout verbunden wäre etc ppp. da wäre mir die lösung via css schon wesentlich lieber, da er somit am anfang ja nur das "n-spalten-kolumne"-template auswählen müsste

 

[BiBaButzemann]

ähm das ist doch genau das templateengines tun (smarty & co).
dass du im template selber zu layoutzwecken noch nen bisschen in der enginesprache rumproggen kannst.

z.B. cyclende hintergrundfarben, includes, schleifmanagement im allgemein, contentformatierungen (timestamp zu was lesbaren) usw.

raffe da jetzt nicht, was du meinst. du baust halt 2 templates.
oder verwaltest du jetzt deine templates über die db?

aber ich meine selbst dann kannst ja nen container template schreiben (welches in der db geführt wird) und welches je nach userwahl entweder nen untertemplate includet, welches kolumnenartig die inhalte darstellt oder eins includet , wo die darstellung anders ist. Ist jetzt zwar nen bissle hardcoding drin, aber musst dafür jetzt nicht auf css zeug zurückgreifen, bei dem du , wenn du pech hast, auch noch wild crossbrowsing betreiben musst.


edit: hm also ich raffs echt nicht, was du da treibst.
der user kann zwischen mehreren verschiedenen layouts wählen.
in jedem layout hätte er auf ner bestimmten seite nochmal die wahl zwischen kolumnenartig und standard? wo / wie wählt er das denn aus?

 

[Picard]

na das (eigene) templatesystem besitzt keine commands, da hab ich dich jetzt grade falsch verstanden ^^

vorgehen ist bisher so:

user kloppt seinen text rein, wählt aus was es ist (news, kolumne, whatever -> das nenn ich jetzt mal "containertemplate")
auf wunsch des kunden wird der text nun absatz für absatz zerlegt
(im oberen beispiel 5 absätze) - wofür er noch einmal darstellungstemplate auswählen kann, evtl nen bild und was weis ich.

sprich: alle absätze werden in nem eigenen template dargestellt, zusammengefasst und anschließend ins containertemplate gerendert


hier bietet sich ja nun auch die möglichkeit an, zu sagen

1. abs -> template "textblock links"
2. abs -> template " textblock mitte"
3. abs -> template "textblock rechts" + [clear:both]
4. abs -> template "textblock links"
5. abs -> template "textblock mitte"
6. abs ->template " textblock rechts" + [clear:both]

meine überlegung wegen dem css geht halt einfach in die richtung, dass der user so wenig wie möglich "arbeiten" muss (nämlich die auswahl der absatz-templates je nach position, und dies halt automatisch (via css) durch die wahl des container templates geschieht). die standardlösung wie "wenn mod 3 = 0 dann clear:both" über php realisiert oder das zur verfügung stellen von 3 .. n absatztemplates sind ja klar ^^

€:
db layout sieht einfach so aus

artikel
- id
- (container)template_id
...


absatz
- id
- artikel_id
- (absatz)template_id
...

 

[voelkerballtier]

also ich raffs grad auch nich ganz
entweder du machst die spaltenanzahl fest und schreibst das ins css oder halt einstellbar vom user dann kommts ins php - wo ist jetzt dein problem?

 

[Picard]

naja containertemplate sieht z.b. so aus

5 Spaltenkolumne-Template:

<style type="text/css">
#content p {
float:left;
width:25%;
margin-left:40px;
}
...
</style>
<div id="container">

	<div id="titlebar">
	<i>[#titel#]</i> <b>von [#autorvorname#] [#autornachname#]</b><br />
	[#zeitstempel#]
	</div>

	<div id="content">
	[#inhalt#]
	</div>

</div>

[#inhalt#] wird dann "intern" geparsed, in dem er sich jeden absatz der zu dem artikel gehört holt, in seinem eigenen absatz template parsed und dann in [#inhalt#] schreibt.

absatztemplate was ein user auswählt sieht z.b. so aus:

"Absatz für Kolumne"

<p>[#absatztext#]</p>

klar könnte ich wie gesagt nen neues template machen
"Absatz für Kolumne und neue Zeile danach beginnen"
wobei dann halt nen clear:both kommt.

das containertemplate ist halt auch statisch, es weis halt nicht wieviele absätze in #inhalt# gerendert werden - außer ich bringe es ihm bei, wobei ich mich da lieber eleganter via css durchmogeln würde - da wie gesagt mehr oder weniger aufwändige script- und/oder datenbankänderungen nötig wären.

ich hab mal zum besseren verständnis einfach die drei schritte des artikel-erstellens aufgezeichnet

http://img136.imageshack.us/img136/4654/step1ri2.jpg
http://img134.imageshack.us/img134/386/step2ve5.jpg
http://img529.imageshack.us/img529/8291/step3fd3.jpg

 

[voelkerballtier]

ahh ok jetz hab ichs gerafft - die spaltenanzahl ist abhängig von der auflölsung, das hatte ich überlesen.

hab ne lösung, die funktioniert aber nur im ie

 

[Picard]

hm wie hast es gelöst? ^^
da könnte ich vielleicht ansetzen und mir alternativen für den ff / opera raussuchen ^^

 

[voelkerballtier]

css:
<style type="text/css">
span.absatz {
width:200px;
margin:10px 0px 20px 30px;
vertical-align:top;
}

html:
<span class="absatz"> text... </span>
<span class="absatz"> text... </span>
<span class="absatz"> text... </span>
...

funktioniert in den anderen browsern nich, weil inline elemente keine breite haben (dürfen) 8[
ausnahmsweise find ich hier mal das ie-verhalten um einiges sinnvoller als ff/opera