[GELÖST] Teamseite - Foto und Name

mörml · 29. August 2012 14:45

Hallo liebe Forengemeinde,

ich möchte unsere Vereinsteamseite überarbeiten. Linkerhand soll das Foto des jeweiligen Mitglieds erscheinen, rechterhand eine kurze Beschreibung.

Seinerzeit hatte ich über die Bildpositionierung was zusammengeknorzt, aber das ist Schrott.

Es handelt sich um 5 - 10 Personen, die auf der Teamseite erscheinen sollen.

Welche Lösung könnt ihr mir hierfür empfehlen?

Besten Dank im Voraus!

mörml

otter24 · 29. August 2012 15:11

Moin Kommt ja drauf an wie Du das anordnen willst.

Wenn das eine Listen untereinander sein soll schau dir mal Listit2 an. Damit hab ich ein Teamliste realisiert.
Du musst Dir "nur" nen Listit2 Template schreiben und gut ist.
Du kannst den dort Bilder einfügen und rechts da neben die dazu gehörigen Informationen.
Für 5-10 Mitglieder sind das allerdings die berühmten Kanonen und die Spatzen und so.

Um Positionierung im CSS kommst Du aber so oder so nicht herum, es sein den Du machst quick n Dirty ne Tabelle.
Ist zwar nicht schön würde aber auch gehen.

mörml · 29. August 2012 15:17

Hallo otter24!

Ja, so dachte ich mir das auch mit den Kanonen und den Spatzen... und ich gebe zu, geistig um eine Tabelle herumzuschleichen.

Kennst du ein Anwendungsbeispiel von Listit2, damit ich mir die Optik vorstellen kann?

VG!

otter24 · 29. August 2012 15:46

Hier findest DU ein Beispiel.

Das sind jetzt zwar Messetermine, aber ist ja egal.

Die Flagge wäre denn ein Bild von dem Teammitglied. Hier sind das nur 2. Aber Du kannst beliebig viele einbauen.

Gruß André

antibart · 29. August 2012 15:47

Wie hieß es denn gleich?

ImageCaption oder so. Vielleicht geht es damit. Dabei wird der Alt- oder title-Text genommen und kann - soweit ich weiß - neben, unter und oder über dem Bild angezeigt werden.

EDIT: in der Modulbeschreibung steht "Image Captions generates captions underneath images". Ich gehe aber mal davon aus, dass sich das "underneath" über css auch in "rechts" oder "links" ändern lässt. SONst hätte das Modul nicht allzu viel Sinn.

Beitrag geändert von antibart (29. August 2012 16:15)

mörml · 29. August 2012 17:10

@otter24: Das sieht super aus!

@antibart: Herzlichen Dank für den Tipp!

faglork · 29. August 2012 17:18

otter24 schrieb:

es sein den Du machst quick n Dirty ne Tabelle.
Ist zwar nicht schön würde aber auch gehen.

Warum sollte eine Tabelle an dieser Stelle "quick n Dirty" bzw. "nicht schön" sein? Es sind doch tabellarische Daten. Und genau dafür sind Tabellen da. Und in diesem Fall ist das auch noch die einfachste und beste Lösung.

Servus,
Alex

faglork · 29. August 2012 17:22

antibart schrieb:

Wie hieß es denn gleich?
ImageCaption oder so. Vielleicht geht es damit. Dabei wird der Alt- oder title-Text genommen und kann - soweit ich weiß - neben, unter und oder über dem Bild angezeigt werden.
EDIT: in der Modulbeschreibung steht "Image Captions generates captions underneath images". Ich gehe aber mal davon aus, dass sich das "underneath" über css auch in "rechts" oder "links" ändern lässt. SONst hätte das Modul nicht allzu viel Sinn.

Es ist ein Plugin, und es macht nicht viel Sinn. Da es den ALT bzw. Title Text verwendet, sieht man den Text im Editor nicht. Das ist extrem nervig. Ich habe vor einiger Zeit mal ne Lösung gepostet die ohne Javascript auskommt und dasselbe macht UND der Text ist im Editor sichtbar.

Allerdings ist ne strunzeinfache Tabelle in diesem Fall wirklich besser.

Servus,
Alex

Beitrag geändert von faglork (29. August 2012 17:23)

mörml · 29. August 2012 18:08

Hallo faglork, das ist sehr nett von dir, dass du dich ebenfalls zu meinem ja eigentlich popeligem Problem äußerst.

Bei den paar Leutchen, die es vorzustellen gibt, dachte ich auch als Erstes an eine Tabelle. Bloß finde ich die Tiny-Option so unkomfortabel (wobei es sein kann, dass ich zu doof bin, es ordentlich zu bedienen).

owr_web · 29. August 2012 18:40

Wenns zweispaltig sein kann, gehts auch mit div's recht einfach.
Du hast ja in einigen Standardtemplates schon solche css für die divs drinnen
linkes div, rechtes div - und im Zweifelsfall ein clear hinterher (die sind auch in vielen Standardtemplates drinnen) Oder anstatt clear die beiden divs (links/rechts/) in ein div display:table einfügen. So hast du auch zwei Spalten - und brauchst kein Modul dazu, sondern einfach eine Seite erstellen.

EDIT: Solltest aber dann über die html-Funktion bei der Seiteneditierung arbeiten, oder dies eventuell, falls du es dann öfters brauchst als Vorgabewert beim tiny einfügen, das geht bei tiny-einstellungen über weitere optionen -> benutzerdefiniertes Listenfeld

Beispiel für css (mit clear):

Hier klicken, um den Code zum Kopieren zu markieren

div.left49 {
float: left;
width: 49%;
}
div.right49 {
float: right;
width: 49%;
}
div.clear {
width: 100%;
height: 6px;
font-size: 6px;
overflow: hidden;
}

Hier kannst du die verschiedenen Abstände (entweder % oder pixel) anstatt mittig auch anders einteilen usw. usf.

Beispiel für html (mit display:table anstatt clear):

Hier klicken, um den Code zum Kopieren zu markieren

<div style="width:100%; display:table">';
<div class="left49">';
<img ...... />
</div>';
<div class="right49">
<p>TEXTTEXTTEXT</p>
</div>
</div>

Beitrag geändert von owr_web (29. August 2012 18:57)

mike-r · 29. August 2012 20:38

Gegen eine Tabelle ist vom Prinzip her nichts zu sagen (ausser dass hier layout-probleme erschlagen werden sollen), richtiger wäre imho aber eine Definitionsliste.
ein Beispiel mit Listit2:
http://www.teppich-kistler.ch/company/das-team

Was gegen Listit2 sprechen soll verstehe ich allerdings auch nicht ganz, genau dazu ist es doch da? Ich find's auch (für Ottonormal-Daus) viel einfacher in einer übersichtlichen Eingabemaske _einzelne_ Sachen zu ändern, als im Tiny in irgendeiner hingefrickelten Tabelle (oder noch schlimmer in einer Div-Suppe) rumzustochern.
Gegen Tabellen spricht hier auch zusätzlich noch das Entfernen oder Hinzufügen eines Mitglieds.

mörml · 30. August 2012 22:31

Allerherzlichsten Dank für die vielen Anregungen!

Ich versuche mich nun an ListIt2. Dafür sollte es allerdings für Blindgänger wie mich eine Anleitung geben. Na ja, ich wurschtel mich weiter durch und berichte.

VG!

mike-r · 30. August 2012 01:25

Wenn ich morgen Zeit finde mach ich mal ne kleine Doku, wie ich das umgesetzt hab.

Dickie · 30. August 2012 06:21

Ich habe so was ähnliches mit CompanyDirectory umgesetzt:

Es geht um eine Liste einer Fussballmannschaft und wenn man einen Spieler anklickt, erscheint ein Spielerpass:

http://www.svgosenbach.de/companies/13/140/Heckelt/

Gruss Dickie

antibart · 30. August 2012 07:21

faglork schrieb:

]
Es ist ein Plugin, und es macht nicht viel Sinn.

Ich gestehe, dass ich es selbst noch nicht benutzt habe, da ich in solchen Fällen auch eher eine Tabelle oder das News-System (bevor es ListIt gab) vorgezogen habe.

Es wurde (früher) bei ähnlichen Fragen häufiger als "Sekretärinnen-taugliche" Lösung empfohlen. Da dacht ich, vielleicht wäre das ne Alternative.

Beitrag geändert von antibart (30. August 2012 07:22)

faglork · 30. August 2012 12:07

mike-r schrieb:

Gegen eine Tabelle ist vom Prinzip her nichts zu sagen (ausser dass hier layout-probleme erschlagen werden sollen),

Na, das ist jetzt aber weit dahergeholt. Sowohl die Spalten als auch die Zeilen haben einen Bezug. Klassischer Fall für Tabelle. Dass die Anordnung dabei auch gleich mit erledigt wird - umso besser.

mike-r schrieb:

richtiger wäre imho aber eine Definitionsliste.
ein Beispiel mit Listit2:
http://www.teppich-kistler.ch/company/das-team

Definition Lists funktionieren nicht wirklich im Tiny. Altbekanntes Problem. Hab ich mich schon oft drüber geärgert.

mike-r schrieb:

Was gegen Listit2 sprechen soll verstehe ich allerdings auch nicht ganz, genau dazu ist es doch da? Ich find's auch (für Ottonormal-Daus) viel einfacher in einer übersichtlichen Eingabemaske _einzelne_ Sachen zu ändern, als im Tiny in irgendeiner hingefrickelten Tabelle (oder noch schlimmer in einer Div-Suppe) rumzustochern.
Gegen Tabellen spricht hier auch zusätzlich noch das Entfernen oder Hinzufügen eines Mitglieds.

Der TinyMCE bietet sehr komfortable Editiermöglichkeiten für Tabellen. Speziell einfügen von Zeilen ist extrem einfach. Ich vermute mal du hast die Tabellenfunktionen nicht aktiviert.

Was gegen Listit spricht? Warum ein Modul installieren wenn die Bordmittel dafür locker ausreichen? Es geht um ca. 10 Zeilen. Das mach ich in wenigen Minuten ...

Servus,
Alex

Beitrag geändert von faglork (30. August 2012 12:41)

mike-r · 30. August 2012 14:28

faglork schrieb:

mike-r schrieb:
Gegen eine Tabelle ist vom Prinzip her nichts zu sagen (ausser dass hier layout-probleme erschlagen werden sollen),
Na, das ist jetzt aber weit dahergeholt. Sowohl die Spalten als auch die Zeilen haben einen Bezug. Klassischer Fall für Tabelle. Dass die Anordnung dabei auch gleich mit erledigt wird - umso besser.

Da kann man schöne Grundsatzdiskussionen führen. Bei den hier gebrachten Beispielseiten (mit meiner Ausnahme wink ) fehlen selbstverständlich jegliche Bezüge. Wenn man schon Tabellen hernimmt, dann sollte man die auch bestimmungsgemäss nutzen und nicht bspw. für jedes Mitglied eine eigene Tabelle hernehmen. Wo ist da denn der Bezug? Und wo die rechtfertigung für eine Tabelle ausser zu Layoutzwecken? glasses

Der TinyMCE bietet sehr komfortable Editiermöglichkeiten für Tabellen. Speziell einfügen von Zeilen ist extrem einfach.

Für Dich? Für mich? Für eine Sekretärin?

Hinzu kommt ja noch, wie die "Kunden" dann in der Tabelle rumklicken und rumschieben. Da sind nach 2 Klicks die Bezüge kaputt und nach 3 die Tabelle. Das kann mit Listid (oder ähnlichen Modulen) nicht passieren.
Hast Du schon mal nem DAU zugeschaut, wie der in Word-dokumenten rumschiebt? Ich ja, und im Web wird's noch grusliger.

Beitrag geändert von mike-r (30. August 2012 14:29)

otter24 · 30. August 2012 16:16

mike-r schrieb:

Für Dich? Für mich? Für eine Sekretärin?
Hinzu kommt ja noch, wie die "Kunden" dann in der Tabelle rumklicken und rumschieben. Da sind nach 2 Klicks die Bezüge kaputt und nach 3 die Tabelle. Das kann mit Listid (oder ähnlichen Modulen) nicht passieren.
Hast Du schon mal nem DAU zugeschaut, wie der in Word-dokumenten rumschiebt? Ich ja, und im Web wird's noch grusliger.

Das ist ja genau immer die Frage die es abzuwägen gilt, wer pflegt die Seite, wie oft ergeben sich Änderungen und überhaupt. Das muss aber jeder selber für sich entscheiden. Ich und damit meine ich nur mich. Würde diese Aufgabenstellung für Mich mit einer Tabelle lösen. Würde ich die Pflege für diese Aufgabe jemanden überlassen der andere Fertigkeiten als ich hat, wäre Listit2 die wahrscheinlich robustere Lösung, weil einfacher zu handhaben und weniger kaputt zumachen.

Also was lernen wir daraus... genau die Antwort lautet 42!

Beitrag geändert von otter24 (30. August 2012 16:16)

mörml · 31. August 2012 20:09

Heieiei, ich wollte keine dogmatische Debatte anregen.

Habe auch Dank dieses Threads hier eine Übersicht mit ListIt herstellen können.

Ob wohl einer mal so nett wäre drüberzuschauen? Hier geht es zur Testseite.

1. floatet es dann doch ein bisschen zu viel, des Rätsels Lösung ist mit Sicherheit ganz einfach, nur will sie mir nicht einfallen.

2. frage ich mich, ob ich das richtig verstanden habe, dass, wenn ich das Detail-Template direkt ausgeben möchte, ich dann x Einträge a la {ListIt2 action='detail' detailtemplate='KH' item='(=jeweiliges Teammitglied)'} in meine Seite einfügen muss, entsprechend der Anzahl der Mitglieder?

3. ist mein XHTML jetzt nicht mehr valide.

-----------------------------------------------------------------------------------------------------------------------------------
Hier der Code:

Hier klicken, um den Code zum Kopieren zu markieren

<dl class="gallery" style="font: 1.2em Verdana,Georgia,Times,serif; color: #171717">
 <dt><img src="/uploads/images/verein/{$item->fielddefs.foto.value}" alt="*" style="float:left; margin-right:25px; border: 1px solid #000"></dt>
 <dd class="item-title" style="font-weight: bold">{$item->title|cms_escape} </dd>
 <dd>{$item->fielddefs.info.value}</dd>
</dl>

Herzliche Grüße
mörml

mike-r · 31. August 2012 21:25

mörml schrieb:

Heieiei, ich wollte keine dogmatische Debatte anregen.

Also ich hab hier keine dogmatische Debatte gesehen, sondern einen konstruktiven Austausch smile

1. floatet es dann doch ein bisschen zu viel, des Rätsels Lösung ist mit Sicherheit ganz einfach, nur will sie mir nicht einfallen.

Ja du hast vergessen zu clearen: http://www.css-technik.de/css-examples/219_9/
Theoretisch musst Du nach dem letzten DD jeweils ein clear setzen. (oder clear:right AUF das letzte DD) (ungetestet)

Das ist aber eigentlich Quatsch*, weil die Liste falsch angewendet wird, Du solltest eine einzelne Liste verwenden.
Etwa:
dl
dt=Bild
dd=text
dd=text
dt=Bild
dd=text
dd=text
usw.

das Floaten selbst solltest Du günstigenfalls auf das dt setzen, und - wie alle anderen Styles auch - auf das jeweilige Element in einem externen CSS setzen und nicht jedes mal inline.

* Zu allem Überfluss habe ich es in meinem Beispiel oben (und nicmare im verlinkten Thread auch) genauso falsch vorgegeben ... muss ich mal selber noch korrigieren, danke für den Hinweis wink

Edit: haha, das is nich ganz trivial, da man keine ganzen Container hat...

Beitrag geändert von mike-r (31. August 2012 21:35)

mörml · 31. August 2012 21:29

Danke mike-r. Nur, dann bin ich wieder mit meinem Latein am Ende, was die Anwendung von ListIt angeht.

mike-r · 31. August 2012 21:46

Das hat ja mit der Anwendung von Listit reichlich wenig zu tun (es funktioniert ja), der Code, der am Ende rauskommt wäre "nur" zu stylen.
Du kannst das (html) ja erstmal so lassen, wie es ist und im CSS das clear auf das DL setzen.
Ich setz mich da mal zeitnah dran und kuck mal, wie man das "ganz" richtig macht.

mörml · 31. August 2012 21:52

I heart you! ;o)

mike-r · 01. September 2012 22:18

Die Lösung für Dein Problem lautet:

Hier klicken, um den Code zum Kopieren zu markieren

dt {
	clear:both;
	}
	dt img {
	float:left;
	margin:0 10px 5px  0 /* ggf. anpassen*/
}

Vorausgesetzt, Du hast nur ein DL für alle Mitglieder (wie von mir oben beschrieben)
An meinem Problem sitz ich nun ne Weile und hab noch keine rechte Idee. (wenn die Mitglieder zusätzlich nebeneinander floaten sollen.)

Janl · 01. September 2012 23:02

Mit Listit ist folgendes gemacht, soll es so etwas sein?
http://www.zlatemoravce.org/index.php?p … ittelt2012

mfg
Jan

Forum für CMS/made simple

#1 29. August 2012 14:45

[GELÖST] Teamseite - Foto und Name

#2 29. August 2012 15:11

Re: [GELÖST] Teamseite - Foto und Name

#3 29. August 2012 15:17

Re: [GELÖST] Teamseite - Foto und Name

#4 29. August 2012 15:46

Re: [GELÖST] Teamseite - Foto und Name

#5 29. August 2012 15:47

Re: [GELÖST] Teamseite - Foto und Name

#6 29. August 2012 17:10

Re: [GELÖST] Teamseite - Foto und Name

#7 29. August 2012 17:18

Re: [GELÖST] Teamseite - Foto und Name

#8 29. August 2012 17:22

Re: [GELÖST] Teamseite - Foto und Name

#9 29. August 2012 18:08

Re: [GELÖST] Teamseite - Foto und Name

#10 29. August 2012 18:40

Re: [GELÖST] Teamseite - Foto und Name

#11 29. August 2012 20:38

Re: [GELÖST] Teamseite - Foto und Name

#12 30. August 2012 22:31

Re: [GELÖST] Teamseite - Foto und Name

#13 30. August 2012 01:25

Re: [GELÖST] Teamseite - Foto und Name

#14 30. August 2012 06:21

Re: [GELÖST] Teamseite - Foto und Name

#15 30. August 2012 07:21

Re: [GELÖST] Teamseite - Foto und Name

#16 30. August 2012 12:07

Re: [GELÖST] Teamseite - Foto und Name

#17 30. August 2012 14:28

Re: [GELÖST] Teamseite - Foto und Name

#18 30. August 2012 16:16

Re: [GELÖST] Teamseite - Foto und Name

#19 31. August 2012 20:09

Re: [GELÖST] Teamseite - Foto und Name

#20 31. August 2012 21:25

Re: [GELÖST] Teamseite - Foto und Name

#21 31. August 2012 21:29

Re: [GELÖST] Teamseite - Foto und Name

#22 31. August 2012 21:46

Re: [GELÖST] Teamseite - Foto und Name

#23 31. August 2012 21:52

Re: [GELÖST] Teamseite - Foto und Name

#24 01. September 2012 22:18

Re: [GELÖST] Teamseite - Foto und Name

#25 01. September 2012 23:02

Re: [GELÖST] Teamseite - Foto und Name

Fußzeile des Forums