Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

[gelöst] Views Accordion - Header Elemente nebeneinander

Eingetragen von inst (286)
am 09.02.2012 - 11:07 Uhr in
  • Module
  • Drupal 7.x

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!

‹ Webform Fortschritt zeigen z.B.: "Seite 3 von 5" [gelöst]Media Gallery- Keine Ansicht der Bilder ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Hast Du Dir schon mal die

Eingetragen von wla (9015)
am 10.02.2012 - 17: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-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Jep, so hab ich eine View

Eingetragen von inst (286)
am 10.02.2012 - 19: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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Und warum schreibst Du die

Eingetragen von wla (9015)
am 10.02.2012 - 20: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-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

screenshots

Eingetragen von inst (286)
am 11.02.2012 - 07: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]

views bsp screenshot 2

Und hier will ich hin (das hab ich jetzt in Photoshop montiert)

views bsp screenshot 3

vg, frank

  • Anmelden oder Registrieren um Kommentare zu schreiben

sorry, der 2te Link war

Eingetragen von inst (286)
am 11.02.2012 - 07:13 Uhr

sorry, der 2te Link war falsch - hier will ich hin:

views bsp screenshot 3

vg, frank

  • Anmelden oder Registrieren um Kommentare zu schreiben

Dann mußt Du eben ein bißchen

Eingetragen von wla (9015)
am 11.02.2012 - 11: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-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Genau so denke ich auch

Eingetragen von Patrick Schanen (515)
am 11.02.2012 - 15:29 Uhr

Genau so ist die Lösungen wie Werner Sie erklärt

  • Anmelden oder Registrieren um Kommentare zu schreiben

ausprobiert

Eingetragen von inst (286)
am 13.02.2012 - 08: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:

views accorion screenshot5

* Hier mit mehr mehreren Personen, dann rutschen die Personen und alles andere auch wieder unter das Bild anstatt rechts vom Bild:

views accorion screenshot4

---------------------------------------------------------------------

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;}

  • Anmelden oder Registrieren um Kommentare zu schreiben

Dann mußt Du im CSS die

Eingetragen von wla (9015)
am 13.02.2012 - 09:51 Uhr

Dann mußt Du im CSS die Breite der p.zeilex begrenzen, damit das nicht passiert.

Beste Grüße
Werner

.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

danke nochmal

Eingetragen von inst (286)
am 13.02.2012 - 10:02 Uhr

Super, ja wenn ich mit width in CSS die Zeile begrenze passt es wunderbar.

Vielen Dank nochmal!

  • Anmelden oder Registrieren um Kommentare zu schreiben

Tja, CSS-Kenntnisse

Eingetragen von wla (9015)
am 13.02.2012 - 10: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-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Hilfe zu Views und Filter?
  • Kartenansicht, Position des Users und Nodes anzeigen
  • Views für 2 Kategorien
  • [gelöst]Probleme nach löschen eines Menüpunktes im Adminmenü
  • [gelöst]Zufallsausgabe von Inhalt
  • Drupal 8/9 SEO-Beratung/Coaching
  • Variable aus dem inkludierten Partial Template auslesen
  • Probleme beim Versand von Mails via Drupal 9
  • Drupal 9: Wie kommt der Inhalt eines selbst erstellten Feldes in page-title.html.twig
  • Drupal DACH Meetup - Donnerstag 4. März 2021, 19 Uhr
  • Layout-Builder hängt
  • Sollte das Forum vielleicht lieber offline gehen?
Weiter

Neue Kommentare

  • Filter
    vor 2 Stunden 2 Minuten
  • Ich bin mir nicht sicher,
    vor 3 Stunden 51 Minuten
  • Noch eine Frage
    vor 5 Stunden 50 Minuten
  • Setze bitte noch ein [gelöst]
    vor 10 Stunden 37 Minuten
  • Ändere mal deinen Pfad
    vor 10 Stunden 43 Minuten
  • habs gelöst Drush updb hat
    vor 1 Tag 3 Stunden
  • ronald schrieb wenn du die
    vor 1 Tag 5 Stunden
  • Habs gefunden
    vor 2 Tagen 2 Stunden
  • eine View ist eine Datenbankabfrage
    vor 2 Tagen 2 Stunden
  • manarak schrieb Ich konnte
    vor 3 Tagen 6 Stunden

Statistik

Beiträge im Forum: 246085
Registrierte User: 18884

Neue User:

  • uniquename
  • xapizm
  • maklko

» Alle User anzeigen

User nach Punkten sortiert:
wla9015
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3917
ronald3832
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 6 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association