[Gelöst] CCK Felder mit CSS Stylen. Float?!
Eingetragen von Gork (225)
am 25.05.2010 - 10:28 Uhr in
am 25.05.2010 - 10:28 Uhr in
Hallo,
ich möchte folgende Felder ein wenig aufhübschen, bin aber nicht so fit in CSS und es will nicht wirklich. Kann mir wer helfen?
<div class="fieldgroup group-specification">
<h2>Spezifikationen</h2>
<div class="content"><div class="field field-type-text field-field-max-amp">
<div class="field-items">
<div class="field-item odd">
<div class="field-label-inline-first">
Max. Verstärkerleistung: </div>
100W intern</div>
</div>
..... Dann kommen noch weitere Felddefinitonen und zu guterletzt der Rest der Seite (Kommentare etc).
</div>
Die Feldnamen sollen links ausgerichtet stehen und die Werte rechts ausgerichtet, aber irgendwas mache ich falsch.
Versucht habe ich es in der CSS Datei so:
div[class="fieldgroup group-specification"] div[class="field-item odd"] div[class="field-label-inline-first"] {float:left; color:blue}
div[class="fieldgroup group-specification"] div[class="field-item odd"] {float:right; color:red}
Da da nicht funktionierte weil der nachfolgende Text hochrutschte, habe ich es auch schon mit Text-Align probiert, aber auch erfolglos.
Kann mir wer sagen was ich falsch mache?
- Anmelden oder Registrieren um Kommentare zu schreiben
"100W intern" soll der Wert
am 25.05.2010 - 12:46 Uhr
Probiere mal das aus
So könnte man Feld + Wert nebeneinadern bekommen.
.group-specification .field-field-max-amp .field-label-inline-first { float:left }
mit Farbangabe!
.group-specification .field-field-max-amp .field-label-inline-first { float:left; color:blue }
.group-specification .field-field-max-amp .field-item { color: red }
Noch ein Nachtrag:
Feld + Wert nebeneinandern kannst Du auch angeben über "inhaltstyp -> Felder -> Felder anzeigen" dort "Bezeichnung" des Feldes auf "Inline" stellen!
Huhu,also das blau / rot
am 25.05.2010 - 12:54 Uhr
Huhu,
also das blau / rot hatte nur den Sinn, dass ich beim rumprobieren auf einen Blick meine Ergebnisse sehe.
Eigentlich werden die Felder von CCK schonrecht gut angezeigt. Sie sind ja auch schon auf Inline gestellt gewesen. Jedoch gefällt mir die Hintergundfarbe nicht, was ich schon hinbekommen habe, und ich hätte gern den Feldnamen links am Rand ausgereichtet und den Inhalt rechts ausgerichtet (da ich ja nicht weiss wie lang der Text später in jeder Zeile ist und mir ein Leerzeichen zu gequetscht aussieht).
Zzt. ist es so, dass der Feldname dort steht und direkt dahinter (mit Leerzeichen dazwischen) der Wert. Es geht also nicht darum es in eine Zeile zu kriegen sondern sozusagen "Luft" dazwischen zu bekomen (Ausrichtung links+rechts).
Der Code den ich gepostet habe ist der den CCK automatich macht wenn die Anzeige des Gruppennamen auf "Einfach" und Felder auf "Standard" steht (Einstellung Inline).
Nun wollte ich nicht groß im Template rumpfuschen sondern einfach mit CSS die vorhandenen Ausgaben entsprechend anpassen.
Das sind ja nun 2 Div Tags ineinander, daher dachte ich mir ich packe den äußeren mit Float nach links und den darin enthaltenen Tag mit Float nach rechts. Oder mache ich da einen Denkfehler?
Müsste das nicht gehen? Alle in einem Div enthaltenen Elemente kriegen ein gemeinsames Attribut zugewiesen und in einem unter-Div wird das Argument anders zugewiesen. So dacht ich mir das.....
Hallo Gork,
am 25.05.2010 - 13:02 Uhr
Zzt. ist es so, dass der Feldname dort steht und direkt dahinter (mit Leerzeichen dazwischen) der Wert. Es geht also nicht darum es in eine Zeile zu kriegen sondern sozusagen "Luft" dazwischen zu bekomen (Ausrichtung links+rechts).
Meiner Meinung nach, musst Du da an das tpl-File ran!
Oder versuche mal dem Div vom "Feld" eine feste Breite zu geben. z.B. 200px - dann "rutscht" der rechte Bereich um diesen Wert weiter nach rechts!
.group-specification .field-field-max-amp .field-label-inline-first { float:left; color:blue; width: 200px; } (habs nicht getestet)
Oh, das könnte gehen, das
am 25.05.2010 - 13:02 Uhr
Oh, das könnte gehen, das ganze hat eh ne feste Breite.
Wenn einer noch weiss wie man es noch machen kann, immer her mit den Infos ;=)
PS.: Im Template kann ich die Felder die im CONTENT Bereich ausgegeben werden ja garnicht beeinflussen oder? Wenn ich es richtig sehe, kann ich mir nur welche dazuschreiben richtig? Ich hatte in den Templates mal gesucht aber da wird nur immer CONTENT ausgegeben und darin werden die CCK Felder ausgegeben irgendwie. Oder hab ich falsch geguckt?
"Content" umfasst die gesamte
am 25.05.2010 - 13:14 Uhr
"Content" umfasst die gesamte Feldausgabe!
Du müsstest "Content" entfernen und dafür dann jedes einzelne Feld ausgeben ... Der Vorteil dabei ist, dass Du jedem Feld ein eigenes DIV verpassen kannst - bzw. die Container so anlegen kannst wie Du möchtest.
Das ist aber etwas umfangreicher als ich das hier erklären könnte ...
Lies das mal bitte ..
http://drupal.cocoate.com/de/d6/design-der-ausgabe-veraendern
Probier mal das Modul
am 25.05.2010 - 13:44 Uhr
Probier mal das Modul Contemplate!
Zum CSS: Beiden float:left geben und dem linken Teil zusätzlich clear:left (neue Zeile) und dann eine Breite (geht auch in em, also in Abhängigkeit von der Schriftgröße).
Also das mit Clear scheint zu
am 25.05.2010 - 14:45 Uhr
Also das mit Clear scheint zu klappen, muss ich aber noch ein wenig rumtesten.
Contemplate hatte ich mir schon angesehen, aber da steige ich nicht durch, was ich alles (und wie) anzeigen lassen muss um die selbe Ausgabe / Funktionalität wie vorher zu haben.
Gibts da sowas wie ne Vorlage (vom Inhalt des Bereichs CONTENT) die ich irgendwo im Template (oder sonstwo) finden kann um den Quelltext rüber zu kopieren und nur notwendige Änderungen machen? Alles erstellen raffe ich nicht wirklich. da gibt es ja Millionen Variablen die ich anzeigen kann oder es auch lassen kann. Das sieht dann mit Sicherheit nicht aus wie vorher (und auf den anderen Templates) oder ich vergesse was und dann geh was nicht.
So wen von euch darf ich
am 26.05.2010 - 09:00 Uhr
So wen von euch darf ich zuerst küssen? :D
Ich habs nun mit dem clear gemacht und die Zeilen wie auch oben erwähnt formatiert.
Ich habe nun zwar 2 Spalten die linksbündig ausgerichtet sind (statt einer links, einer rechts) aber das ist mir sogar noch lieber, ich dachte erst meine Idee der AUsrichtung sei einfacher.
Mit text-align: right kriegst
am 26.05.2010 - 09:13 Uhr
Mit text-align: right kriegst Du die auch rechts.
Vielen Dank!
am 27.05.2010 - 13:10 Uhr
Vielen Dank!