[gelöst] Felder / Gruppen -> CSS + Float

am 19.01.2010 - 14:14 Uhr in
Hallo Freunde,
ich sitze jetzt schon wieder seit Stunden an diesem Problem und komme nicht weiter!
Ich habe 4 Bilder (Felder) und 3 Fieldsets (mehrere Felder gruppiert) ... diese Elemente sollen so - wie auf folgender Darstellung gezeigt - angeordnet werden!
Ich habe alles mögliche ausprobiert aber ich schaffe es nicht, dass die Fieldsets rechts (top) neben dem "Bild 2" angezeigt werden!
Was ich geschafft habe ist folgendes ...
Ich habe jetzt seit Stunden alle möglichen Kombinationen ausprobiert (float: left, right, clear:left,right, both usw.) aber es ist nichts zu machen - ich weiß nicht wie man dieses Problem lösen kann!
Daher bräuchte ich mal Hilfe!
Der verwendete Code lautet bisher!
.field-field-foto1 img { float:left; }
.field-field-foto3 img { float:left; }
fieldset.group-fakten { width:160px; }
fieldset.group-raten { width:160px; }
fieldset.group-kontaktdaten { width:160px; }
<div class="field field-type-emimage field-field-foto1">
<div class="field-items">
<div class="field-item odd">
<img src="http://www.domain.de/bild1.jpg" alt="" title="" width="200" class="custom_url" /> </div>
</div>
</div>
<div class="field field-type-emimage field-field-foto2">
<div class="field-items">
<div class="field-item odd">
<img src="http://www.domain.de/bild2.jpg" alt="" title="" width="200" class="custom_url" /> </div>
</div>
</div>
<div class="field field-type-emimage field-field-foto3">
<div class="field-items">
<div class="field-item odd">
<img src="http://www.domain.de/bild3.jpg" alt="" title="" width="200" class="custom_url" /> </div>
</div>
</div>
<div class="field field-type-emimage field-field-foto4">
<div class="field-items">
<div class="field-item odd">
<img src="http://www.domain.de/bild4.jpg" alt="" title="" width="200" class="custom_url" /></div>
</div>
</div>
<fieldset class="fieldgroup group-fakten"><legend>Fakten</legend><div class="field field-type-text field-field-alter">
<div class="field-label">Alter: </div>
<div class="field-items">
<div class="field-item odd">
24 </div>
</div>
</div>
<div class="field field-type-text field-field-groesse">
<div class="field-label">Größe: </div>
<div class="field-items">
<div class="field-item odd">
170 cm </div>
</div>
</div>
<div class="field field-type-text field-field-haarfarbe">
<div class="field-label">Haarfarbe: </div>
<div class="field-items">
<div class="field-item odd">
blond </div>
</div>
</div>
<div class="field field-type-text field-field-augenfarbe">
<div class="field-label">Augenfarbe: </div>
<div class="field-items">
<div class="field-item odd">
grün </div>
</div>
</div>
</div>
<div class="field field-type-text field-field-nationalitaet">
<div class="field-label">Nationalität: </div>
<div class="field-items">
<div class="field-item odd">
Europäisch </div>
</div>
</div>
<div class="field field-type-text field-field-standort">
<div class="field-label">Standort: </div>
<div class="field-items">
<div class="field-item odd">
London </div>
</div>
</div>
<div class="field field-type-text field-field-sprache">
<div class="field-label">Sprache: </div>
<div class="field-items">
<div class="field-item odd">
Englisch </div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldgroup group-raten"><legend>Fielset2</legend><div class="field field-type-text field-field-hobby">
<div class="field-label">Punkt1 </div>
<div class="field-items">
<div class="field-item odd">
200 </div>
</div>
</div>
<div class="field field-type-text field-field-zwei-stunden">
<div class="field-label">Punkt2 </div>
<div class="field-items">
<div class="field-item odd">
350 </div>
</div>
</div>
<div class="field field-type-text field-field-dinner-date">
<div class="field-label">Punkt3 </div>
<div class="field-items">
<div class="field-item odd">
500 </div>
</div>
</div>
<div class="field field-type-text field-field-uebernachtung">
<div class="field-label">Punkt4 </div>
<div class="field-items">
<div class="field-item odd">
800 </div>
</div>
</div>
<div class="field field-type-text field-field-laenger">
<div class="field-label">Punkt5 </div>
<div class="field-items">
<div class="field-item odd">
auf Anfrage </div>
</div>
</div>
</fieldset>
<fieldset class="fieldgroup group-kontaktdaten"><legend>Kontaktdaten</legend><div class="field field-type-text field-field-telefon">
<div class="field-label">Telefon: </div>
<div class="field-items">
<div class="field-item odd">
0049 1234 5678 90 </div>
</div>
</div>
<div class="field field-type-link field-field-webseite">
<div class="field-label">Webseite: </div>
<div class="field-items">
<div class="field-item odd">
<a href="http://www.domain.de" target="_blank">zur Page</a> </div>
</div>
</div>
Das Fieldset habe ich versucht "rechts zu floaten" aber das beste was dabei rausgekommen ist, war, dass das Fieldset rechts neben dem "Bild 4" dargestellt wird - nach ganz oben (rechts neben Bild 2) rutscht es aber nicht!
Auch wenn ich .field-field-foto4 img { float:left; }
dazu schreibe, rutscht das Fieldset nur auf die rechte Seite von "BIld 4" - aber nicht nach ganz oben. Ich bin mit meinem Latein am Ende - ehrlich!
Kann mir bitte jemand sagen wie man das - so wie auf Bild 1 dargestellt - per CSS umsetzen kann?
Über Hilfe würde ich mich freuen!
Viele Grüße Matthias
- Anmelden oder Registrieren um Kommentare zu schreiben
Nur ein Gedanke...
am 19.01.2010 - 14:34 Uhr
Bin noch nicht so bewandert in CSS, aber wie wärs, wenn Du die 4 Bilder in ein zusätzliches DIV-Tag einklammerst und auch die 3 Fieldsets mit Text. Das wären dann 2 Haupt-DIVs die Du bestimmt richtig bositionieren kannst.
Gruss Roger
Gelöste Forenbeiträge mit [gelöst] im Titel ergänzen (1. Posting vom Thema) <==> das erleichtert das finden von Lösungen
Hallo Roger, danke für die
am 19.01.2010 - 14:44 Uhr
Hallo Roger,
danke für die Antwort ...
Die Frage ist jetzt aber "Wie macht man das? (Bilder in ein zusätzliches DIV einklammern?)"
Da muss man doch sicherlich ganz tief im Drupal-Code rumhacken oder? Alle Divs etc. werden ja auomtatisch angelegt!
Bin leider völlig planlos im Moment!
Gruß Matthias
Ne glaube ich nicht...
am 19.01.2010 - 14:55 Uhr
Wie gesagt, ich bin da auch noch nicht ein richtiger Könner.
Ich denke das müsste über eine *.tpl.php-Datei erledigt werden.
Den Code den Du oben gelistet hast, hat dir Views zusammengeschustert, nehme ch an.
Ach ja, und die ganzen Felder sind alle im selben Node drin, oder?
Mal sehen vielleicht kannst sich da nochjemand etwas besser aus.
Gruss Roger
Gelöste Forenbeiträge mit [gelöst] im Titel ergänzen (1. Posting vom Thema) <==> das erleichtert das finden von Lösungen
Hallo zusammen,ich würde
am 19.01.2010 - 15:04 Uhr
Hallo zusammen,
ich würde das etwa so machen:
<div id="images">
<img ... style="float: left" />
<img ... style="float: left" />
<img ... style="float: left" />
<img ... style="float: left" />
</div>
<div id="text">
<div id="text1">
</div>
<div id="text1">
</div>
<div id="text1">
</div>
</div>
// ev. irgendwo hier clearen (clear: left)
CSS:
#images {
width: //2x Bildbreite
float: left;
}
#text {
float: left;
width: //1x Textbreite
}
ist nicht geprüft und ev. auch noch besser zu machen.
Gruss
Fredi
EDIT: Sorry, ich habe das mit dem View überlesen. Aber mit absoluter Positionierung für die Texte sollte das auch gehen, wenn die Bilder immer gleich gross sind.
Hallo - vielen Dank für die
am 19.01.2010 - 15:18 Uhr
Hallo - vielen Dank für die Rückmeldungen!
Also - mit "Views" ist das noch nicht bearbeitet worden! Nur über CCK die Felder angelegt - teilweise gruppiert - dann "Inhalt erstellen"!
Mehr noch nicht!
Es ist zum Verzweifeln - ich sitze jetzt seit 2 Wochen an diesem CSS-Mist und bekomme es nicht hin! Das eigentliche Projekt konnte ich noch überhaupt nicht in Angriff nehmen da ich das Design nicht hinbekomme!
Traurig und frustrierend! ich weiß auch nicht mehr!
Laß die in Views unter dem
am 19.01.2010 - 15:21 Uhr
Laß die in Views unter dem Punkt Theming mal zeigen, welche Template-Files für das Themen Deines Views zuständig sind. Such Dir einen passenden aus. Den legst Du im Verzeichnis Deines Themes an und baust da die Ausgabe selber zusammen, wie mein Vorredner gezeigt hat. Du mußt allerding die Feldname von Views nehmen, damit die Bilder und die Texte richtig angesprochen werden. Dabei kannst Du zusätzliche div-Tags mit entsprechenden IDs oder Klassen einbauen, die Du anschließend im CSS Deines Themes richtig positionierts (Float, Breite, Abstände etc...).
Beste Grüße
Werner
<div id="images"> <img ...
am 19.01.2010 - 15:24 Uhr
@fh
<div id="images">
<img ... style="float: left" />
<img ... style="float: left" />
<img ... style="float: left" />
<img ... style="float: left" />
</div>
<div id="text">
<div id="text1">
</div>
<div id="text1">
</div>
<div id="text1">
</div>
</div>
// ev. irgendwo hier clearen (clear: left)
Da besteht elider das Problem, dass Drupal die Bilder (Felder) nicht in einem Container zusammen fast!
Die Bilder und die "Text-Gruppen" befinden sich alle im selben Container "Content" - der wiederum befindet sich im Container "Meta" und der wiederum im Container "node-inner" der wiederum im Container "
<div id="node-47" class="node node-mine node-type-international">
Das macht Drupal/CCK ja automatisch - ich weiß also nicht wo ich da ansetzen kann bzw. wie ich CCK/Drupal zwingen kann die Bilder in einem "alleinstehenden Container" zu setzen!
Hallo Werner, wie ob schon
am 19.01.2010 - 15:35 Uhr
Hallo Werner,
wie ob schon angesprochen - mit "Views" arbeite ich bei diesen Nodes nicht! Alles nur CCK!
Ich hab in CCK die Felder angelegt und erstelle danach eine neue Seite/Node!
Die sollte als "Vorlage" gelten - damit ich das Design anpasse und anschließend fülle ich die Nodes mit Daten - aber soweit komme ich garnicht!
Nachtrag:
Die 4 Bilder sind über das CCK-Feld "Embedded Image" angelegt worden - die Ausgabe/Darstllung erfolgt also nicht über Views!
Ich habe im Endeffekt
7 Felder untereinandern
4 Bilder + 3 "Fieldsets" (gruppierte Felder)
Diese 7 "Bereiche" wollte ich einfach per CSS formatieren! Leider scheitere ich daran da die 4 Bilder nicht in einem eigenen Container vorliegen!
Also ich kann mir ehrlich
am 19.01.2010 - 15:58 Uhr
Also ich kann mir ehrlich gesagt nicht vorstellen, dass noch nie jemand mit Drupal versucht hat "4 Bilder (jeweils 2 untereinandern)" und rechts daneben "Textfelder" - anzeigen zu lassen!
Ich kann doch nicht der einzige sein der soetwas bewerkstelligen will?
Da ich aber die 4 Bilder (Embedded Image Field) nicht mit einem "einzigartigen" Container versehen kann - bin ich aufgeschmissen!
Das kann ich nicht glauben!
Ansatz
am 19.01.2010 - 16:56 Uhr
Hallo,
ich versuche jetzt doch noch mal zu helfen, weil das kann ja wirkich nicht sein.
Du hast doch deinen Inhaltstypen irgendwie benannt. Beginne doch einfach mal damit, dass du dir im aktiven Theme eine Datei erstellst. Kopiere einfach erstmal die node.tpl.php nach
"node-DEININHALSTYP.tpl.php" (klein geschrieben), wie gesagt im aktiven Theme Ordner (z.B. garland node-deintyp.tpl.php.
Du kannst nämlich auch die erstellten Felder ausgeben, und nimmst dazu einfach mal den ganzen Node
<?php print_r($node); ?>
Darin müssten Felder mit dem selben Namen auftauchen, wie von dir erstellt. Je nachdem ob dies dann Arrays oder Variablen sind, müssen diese unterschiedlich ausgegeben werden.
Hast du Arrays dann so:
<?php
foreach($field_deinfeld[0] as $c); // du solltest diese Felder in der Ausgabe $node gelistet finden
?>
Ansonsten einfach so:
<?php
print $field_deinname; // auch das sollte in print_r($node) zu sehen sein.
?>
Und wenn du das jetzt erweiterst:
// Du stellst das da ein, wo normalerweise das print $content gemacht wird.
<div class="content">
<div id="images">
<?php print $field_deinbild1; ?> // anpassen gemäss deinem Feld für Bild 1
<?php print $field_deinbild2; ?>
<?php print $field_deinbild3; ?>
<?php print $field_deinbild4; ?>
</div> // schliessen von #images
<div id="text>
<p id="textone"> // z.B. kannst ja auch Divs oder sonstwas nehmen
<?php print $field_meinTextfeldname1; ?>
<?php print $field_meinTextfeldname1; ?>
<?php print $field_meinTextfeldname1; ?>
</p>
</div> // Textdiv schliessen
</div> // content schliessen
Dies machst du wie gesagt in der node.deintinhaltstyp.tpl.php und kannst das print $content danach dann entfernen. Das ist jetzt natürlich nur ein vereinfachstes Beispiel, sieh doch einfach mal nach, was der $node dir ausgibt, so kannst du dies aber einfach bearbeiten und auch formatieren.
Zum formatieren würde ich in die themename.info des aktiven Themes gemäss Muster (es werden noch mehr Dateien eingebunden) eine eigene, weitere CSS Datei angeben. Da drin kannst du dann alle Formatierungen ablegen.
Das mit der eigenen CSS Datei würde ich wegen den Updaten/Upgrades machen, so wird deine CSS nämlich nicht überschrieben.
Ich hoffe das hilft dir als grundsätzlichen Ansatz, das ist gar nicht so schwierig, wenn man es mal herausgefunden hat.
Gruss
Fredi
P.S. hier könnte das Modul "content Template"(Modulname ev. contemplate?!) gute Dienste tun. Aber die Ausgabe mit $node müsste hier eigentlich genügen.
Hallo Fredi, es ist super
am 19.01.2010 - 17:11 Uhr
Hallo Fredi,
es ist super nett, dass Du das so umfangreich erklärst!
An die Änderung in der tpl.Datei habe ich überhaupt nicht mehr gedacht! Ich stecke seit knapp 2 Wochen bis zu den Ohren "im CSS-Sumpf fest" und brauche schon nen Schnorchel um atmen zu können! ich glaube ich habe schon in CSS geträumt!
Das umswitchen zwischen "Designen per CSS" und Änderungen in den tpl-Dateien bereiten mir immer noch Schwierigkeiten!
Ich mache mich gleich mal an die tpl-Datei - der heutige Tag ist zwar im Arsch aber wenn das jetzt doch noch klappt, könnte ich morgen früh endlich mit dem Projekt beginnen!
Ich dank Dir für die umfangreiche Aufklärung und Unterstützung ;-) Ohne den Tip hätte ich jetzt aufgegeben!
Beste Grüße Matthias
ok ...
am 19.01.2010 - 17:12 Uhr
Hallo Matthias,
Gern geschehen, wünsche dir viel Erfolg :-)
Gruss
Fredi
clear-block
am 19.01.2010 - 17:18 Uhr
Weiter oben steht irgendwas von floaten. Das bezieht sich wohl auf den Inhalt des
<div id="images">
Ich empfehle Dir zur Problemvermeidung eine Ergaenzung dieses div.
<div id="images" class="clear-block">
------------------------
Quiptime Group
Hallo Fredi, nach einer
am 19.01.2010 - 19:57 Uhr
Hallo Fredi,
nach einer kurzen Kaffeepause habe ich mich an die tpl-Datei gesetzt und Deine Vorschläge ausprobiert!
Mit
<div class="neuer_container">
<?php print_r($node->field_foto1[0]['view']); ?>
<?php print_r($node->field_foto2[0]['view']); ?>
<?php print_r($node->field_foto3[0]['view']); ?>
<?php print_r($node->field_foto4[0]['view']); ?>
</div>
kann ich die einzelnen Bilder ausgeben und zusätzlich einen neuen DIV anlegen um die Bilder später "formatieren" zu können!
Das funktioniert super ;-)
Besten Dank - mir fällt ein Stein vom Herzen ;-)
Ich hätte noch abschließend eine kleine Frage (verständnishalber)!
Was ist der Unterschied zwischen
<?php print_r ?> und <?php
<?php print ?>
Hat das bzgl. der tpl einen besondere Bedeutung?
@quiptime
Danke für den Hinweis bzgl. clear-block - ich habs mir notiert und werde daran denken!
Viele Grüße Matthias
Versuchs einfach mal...
am 19.01.2010 - 20:18 Uhr
Einfach mal versuchen
<?php
print_r($node)
?>
<?php
print($node)
?>
du wirst schon sehen, wenn du natürlich gleich das Element von $node ansprichst wie in deinem Beispiel, dann wird wohl der unterschied nicht wirklich grossartig sein.
Gruss Roger
Gelöste Forenbeiträge mit [gelöst] im Titel ergänzen (1. Posting vom Thema) <==> das erleichtert das finden von Lösungen
print, print_r
am 20.01.2010 - 09:04 Uhr
Hallo Matthias,
Die beiden Funktionen, (print ist glaub ich keine "echte" Funktion) bewirken folgendes:
print: kann man mit echo vergleichen und gibt einfach den Wert von einer Variablen aus.
Wenn du es schon versucht hast dann siehst du ja, dass print (ungetestet) nur "Array()" ausgeben wird.
print_r: durchläuft das $node rekursiv, egal wie tief dieses Array ist. Du wirst also wie bei einer Schleife alle Inhalte von Snode angezeigt bekommen. Es gibt noch eine verwandte Funktion, das ist var_dump(), diese gibt auch alle Inhalte rekursiv aus.
Frag mich jetzt aber nicht (müsste es auch nachlesen) was genau der Unterschied zwischen print_r und var_dump ist :-). Eine der beiden Funktionen kann nicht für alles verwendet werden (Arrays, Objekte)
Der Tip von quiptime ist wirklich Gold wert, das ist auch für mich eine wertvolle Information. Ich persönlich hätte jetzt einfach noch ein Element gesetzt, welches das clearen an der richtigen Stelle übernimmt. Der Tip ist natürlich viel sauberer und vor allem Drupalkonorm. Ein span, br oder sonstwas mit clear zu setzen ist da ungleich hässlicher und "unsauber"...
Ich bin froh dass es geklappt hat, hat mein ewiges Lernen doch noch einen Sinn :-))
Gruss
Fredi
EDIT: sehe erst jetzt, dass du print_r für einen einzelnen Wert einsetzt, oder sind da mehrere Werte drin?
Wenn nicht, so würde ich da nur ein print hinschreiben.
Hallo, nochmals Danke für
am 20.01.2010 - 09:35 Uhr
Hallo,
nochmals Danke für die Hilfestellungen und Erklärungen!
Ich habe das selbe nun mit "print" gemacht! Ich sehe aber keinen Unterschied bei der Ausgabe! Das Ergebniss ist das Selbe!
Ich muss aber sagen, dass ich von PHP überhaupt keine Ahnung habe - ich habe Eure Hilfestellungen einfach "nachgemacht"! Ich muss sogar gestehen, dass ich nicht einmal weiß was ein "Array" ist!
Naja - es funktioniert ja soweit alles - ich kann die einzelnen "Felder" aufrufen und darstellen - ich kann diesen Feldern ein DIV zuweisen usw. - Ich kann das Node jetzt perfekt designen und darstellen! Genau so wollte ich das haben! ;-)
Ich werde mir mit der Zeit sicherlich auch das ein oder andere PHP-Wissen aneignen - damit das Verständnis wächst!
Nochmals vielen Dank, dass ihr mir da geholfen habt - alleine wäre ich da nicht drauf gekommen!
Ich setze mir erstmal einen frischen Kaffee auf und dann gehts mit dem Projekt los! ;-)
Besten Dank nochmals! ;-)
Schönen Tag und Gruß von Matthias
Hallo Matthias, ich möchte
am 20.01.2010 - 09:52 Uhr
Hallo Matthias,
ich möchte dich ja nicht nerven, aber mach doch die Ausgabe mal einfach mit
print($node);
und
print_r($node);
Dann siehst du sofort was ich meine. print_r ist wie schon gesagt etwas wie eine Ausgabeschleife...
So jetzt bin ich still :-)
Gruss
Fredi
Hallo
am 20.01.2010 - 10:17 Uhr
Hallo Fredi,
"print_r($node);" gibt mir den gesamten Inhalt des Nodes aus mit sämtlichen (für mich krytischen) "PHP-Anweisungen" (sehr lange Liste)! Dor kann man dnn aber die einzelnen "Felder" auffinden bzw. raussuchen!
"print($node);" dagegen gibt mir eine Fehlermeldung aus"
recoverable fatal error: Object of class stdClass could not be converted to string in C:\xampp\htdocs\drupa\themes\zen\node-ansicht_international.tpl.php on line 99.
Hallo Matthias, das liegt
am 20.01.2010 - 10:46 Uhr
Hallo Matthias,
das liegt jetzt daran, dass du keine einzelne Variable ansprichst und $node selber keinen Wert hat, nur "Unterobjekte". Aber den Unterschied solltest du erkannt haben. Wenn du print_r verwendest wird das Objekt/Array mit allen darunter liegenden Werten ausgegeben.
Das war jetzt etwas unglücklich, du könntest aber wahrscheinlich ohne Probleme $node->nid; mit print ausgeben, da $node->nid nur ein einzelner Wert ist.
Diese Meldung sagt einfach aus, dass in $node selber kein Wert liegt und dass du auf ein Objekt zugreifst.
Bei print_r ist das eben kein Problem, es wird einfach die nächst-tiefere Ebene durchlaufen.
Darum auch meine Aussage, dass du nicht print_r verwenden solltest wenn du nur einen Wert ausgeben möchtest. Es ist nicht gerade sauber und zudem unnötig, eine solche Funktion zu durchlaufen, wenn es "nur" eine Ausgabe gibt.
Ich hoffe, dass ich dies einigermassen verständlich ausdrücken konnte. print_r(ansonsten siehe for(), foreach()) ist sowieso eher für die Entwicklung geeignet in Drupal - mehr nicht. Wie du aber auch hier siehst, kommt es immer noch auf den Inhalt der auszugebenden Werte an.
Diese Diskussion würde jetzt zu weit führen. Wenn es dich näher interessiert, gibt es in selfphp.de oder php.net(finde ich besser) sehr gute Referenzen, wo all diese Funktionen erklärt werden. Mit PHP sind dir heute kaum noch Grenzen gesetzt, ob du Bilder manipulieren möchtest, Texte, DOM, Cookies, Sessions und und...
Gruss
Fredi