[gelöst] Views Accordion - Header Elemente nebeneinander
Eingetragen von inst (290)am 09.02.2012 - 12:07 Uhr in
Hallo,
ich hab eine View mit dem Style Views Accordion erstellt.
Im Header-Bereich des Accordion Elementes habe ich folgende Elemente:
Bild
Titel
Ort - Uhrzeit
Bei Klick auf den Header klappt der dazugehörige Text auf und dann schaut die Ansicht so aus:
Bild
Titel
Ort - Uhrzeit
-------------------------
Text
NUN möchte ich aber im Header das Bild links haben und den Rest rechts, also so:
Bild Titel
Ort - Uhrzeit
Ich habe versucht auf das Bild ein float:left anzuwenden aber das haut dann Layout des Accordion Elementes zusammen.
Weiss wer von euch wie ich zum Zile komme?
danke!
- Anmelden oder Registrieren um Kommentare zu schreiben
Hast Du Dir schon mal die
am 10.02.2012 - 18:26 Uhr
Hast Du Dir schon mal die Option "rewrite the output of this field" angesehen? Ich würde bei Bild und Titel (und Ort?) den Haken machen "von der Anzeige ausschließen" und dann beim letzten Feld die Ausgabe selbst vornehmen inklusive eines
<br />an der gewünschten Stelle. Views stellt Dir dazu "Ersetzungstokens" zur Verfügung, die bereits den fertigen Inhalt bereitstellen, sodaß Du selbst außer dem<br />nichts an HTML zufügen mußt.Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Jep, so hab ich eine View
am 10.02.2012 - 20:44 Uhr
Jep, so hab ich eine View erstellt.
Insgesamt hab ich diese Felder:
Inhalt: Projektorte -> Exclude from display
Inhalt: Projektpersonen -> Exclude from display
Inhalt: Projektzeitraum -> Exclude from display
Inhalt: Projektfoto -> Exclude from display
Inhalt: Titel ->Rewrite Results
Inhalt: Body
Inhalt: Verweise auf Werke
"Inhalt: Titel ->Rewrite Results" ist das was in dem Header aufscheint, der als Trigger funktioniert:
[field_projekte_foto]
[title]
[field_projekte_zeitraum] [field_projekte_orte]
[field_projekte_personen]
Ich krieg dann auch solgende Anzeige:
Bild
zeitraum, projekte
personen
Aber im Header möchte ich nun links nur das Bild und rechts den text, also so:
Bild zeitraum, projekte
personen
Kann ich ein float:left im View für das Bild einbauen ?
dank dir.-
vg,fr
Und warum schreibst Du die
am 10.02.2012 - 21:11 Uhr
Und warum schreibst Du die Felder dann nicht so nebeneinander, wie Du sie gern hättest? Also
[field_projekte_foto][field_projekte_zeitraum] [field_projekte_orte]
[field_projekte_personen]
Du kannst, wenn das Dein Problem ist, im View ja auch mehrere Displays definieren, die die Felder in unterschiedlicher Reihenfolge ausgeben.
So richtig verstehe ich Dein Problem nicht.
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
screenshots
am 11.02.2012 - 08:11 Uhr
OK ich hab dir 2 Screenshots gemacht, so schauts aus, wenn ich das so mache wie von dir beschrieben:
[field_projekte_foto][field_projekte_zeitraum] [field_projekte_orte]
[field_projekte_personen]
Und hier will ich hin (das hab ich jetzt in Photoshop montiert)
vg, frank
sorry, der 2te Link war
am 11.02.2012 - 08:13 Uhr
sorry, der 2te Link war falsch - hier will ich hin:
vg, frank
Dann mußt Du eben ein bißchen
am 11.02.2012 - 12:38 Uhr
Dann mußt Du eben ein bißchen mehr HTML-Code einfügen und dann mit CSS den Rest, wie die Fontsize nacharbeiten. Könnte etwa so gehen
<div><span class="xxx">[field_projekte_foto]</span><span class="xxx"><div><p class="zeile1">[field_projekte_zeitraum] [field_projekte_orte]</p><br /><p class="zeile2">[field_projekte_personen]</p></div></span></div>Und im CSS unter anderem
span.xxx {display: inline-block;
}
span.xxx div {
margin: auto;
}
p.zeile1 { font-size: ....}
p.zeile2 { font-size: ....}
Ich habe das jetzt nicht selbst ausprobiert, aber das ist in etwa die Richtung. Es läuft alles auf Basis-Kenntnisse in HTML und CSS hinaus. Daran mußt Du offensichtlich noch arbeiten.
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Genau so denke ich auch
am 11.02.2012 - 16:29 Uhr
Genau so ist die Lösungen wie Werner Sie erklärt
ausprobiert
am 13.02.2012 - 09:32 Uhr
Ja du hast vollkommen Recht.- Obwohl es in Drupal möglich so viel ohne wirklich umfangreiche HTML/CSS Kenntnisse, die über ein Verändern von Textgrößen, Farben usw. hinausgehen, braucht man es unbedingt falls man etwas so und nicht anders machen will. Da werd ich wohl noch eineiges nachholen müssen.
Danke nochmal für dein Beispiel, es hat auch hingehauen. Das einzige Problem ist, wenn ein Feld mehr als eine Zeile beansprucht.
* Hier mit einer Personnenzeile:
* Hier mit mehr mehreren Personen, dann rutschen die Personen und alles andere auch wieder unter das Bild anstatt rechts vom Bild:
---------------------------------------------------------------------
So hab ich das in Views gemacht:
<div><span class="acclayout">[field_projekte_foto]</span><span class="acclayout"><div><p class="zeile0">[title]</p>
<p class="zeile1">[field_projekte_zeitraum] [field_projekte_orte]</p>
<p class="zeile2">[field_projekte_personen]</p>
</div></span></div>
---------------------------------------------------------------------
Das ist meine CSS:
/* Views Accordion Header Layout */
span.acclayout {
display: inline-block;
line-height: 0.5em;
margin-right: 1em;
}
span.acclayout div {
margin: auto;
}
/*Titel*/
p.zeile0 { font-size: 1.2em;
font-weight: 800;
color: #E4100C;
}
/*Zeit/Ort*/
/*p.zeile1 { }*/
/*Personen*/
p.zeile2 { line-height: 1em;}
Dann mußt Du im CSS die
am 13.02.2012 - 10:51 Uhr
Dann mußt Du im CSS die Breite der p.zeilex begrenzen, damit das nicht passiert.
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
danke nochmal
am 13.02.2012 - 11:02 Uhr
Super, ja wenn ich mit width in CSS die Zeile begrenze passt es wunderbar.
Vielen Dank nochmal!
Tja, CSS-Kenntnisse
am 13.02.2012 - 11:42 Uhr
Tja, CSS-Kenntnisse .......
Wenn das Problem damit für Dich gelöst ist, dann markiere bitte noch den Thread als gelöst ([gelöst] vor der ersten Titel im Thread setzen).
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *