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

[gelöst] Views Accordion - Header Elemente nebeneinander

Eingetragen von inst (290)
am 09.02.2012 - 12: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 (9214)
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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Jep, so hab ich eine View

Eingetragen von inst (290)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Und warum schreibst Du die

Eingetragen von wla (9214)
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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

screenshots

Eingetragen von inst (290)
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]

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 (290)
am 11.02.2012 - 08: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 (9214)
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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Genau so denke ich auch

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

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

  • Anmelden oder Registrieren um Kommentare zu schreiben

ausprobiert

Eingetragen von inst (290)
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:

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 (9214)
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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

danke nochmal

Eingetragen von inst (290)
am 13.02.2012 - 11: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 (9214)
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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • MariaDB 10.6
  • Wie kann man die Ansicht der Benutzer erweitern?
  • (Gelöst) SIMPLE XML SITEMAP liefert die Sitemap für das Menü nicht aus
  • Entity Reference - Title Felder werden als Link angezeigt
  • PHP 8.1 - Deprecated function: rtrim()
  • Preloader / Spnner entfernen Menu Link Modal-Modul
  • Schriftgröße standard einstellen
  • Drupal Website gestalten
  • Tokens werden in Viev als Link angezeigt
  • [bug entdeckt & workaround gefunden] benutzerdefinierte Felder vom Userprofil tauchen ungefragt auch in den Forumtopics auf...
  • [gelöst] Mass contact Empfängerliste nach Taxonomy Term statt Rolle
  • Update V. 9.3.12 auf V. 9.4 mit Fehler: Modul mySQL fehlt. Bitte Hilfe.
Weiter

Neue Kommentare

  • Ergebnis des upgrade
    vor 14 Stunden 50 Minuten
  • Danke, funktioniert einwandfrei!
    vor 15 Stunden 59 Minuten
  • Bei Drupal 7 war diese Seite
    vor 16 Stunden 58 Minuten
  • Es ist ein Paragraph
    vor 1 Tag 18 Stunden
  • Danke fürs Feedback. Gut dass
    vor 4 Tagen 11 Stunden
  • Patch angewandt
    vor 4 Tagen 14 Stunden
  • core_version_requirement: ^8
    vor 6 Tagen 15 Stunden
  • core_version_requirement: ^8
    vor 6 Tagen 15 Stunden
  • ok. Wenn ich das mache
    vor 6 Tagen 15 Stunden
  • Bei gleichem Namen hat das
    vor 6 Tagen 16 Stunden

Statistik

Beiträge im Forum: 247872
Registrierte User: 19592

Neue User:

  • Davidsnins
  • kudes
  • Tkakah

» Alle User anzeigen

User nach Punkten sortiert:
wla9214
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 1 Benutzer und 7 Gäste online.

Benutzer online

  • alanjones25

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