Gallery: thumbs nicht untereinander

kledirob · 17. Juli 2014 13:25

Hallo zusammen,

wie schaffe ich es im Gallery-Modul, daß die thumbs einer (Sub)Gallery (mit vielen Bildern, sagen wir mal: hundert) nicht 1:1 untereinander kommen und die Seite damit unschön ellenlang wird?

Bastle gerade an einer neuen Seite (Hausgebrauch, grundsätzlich kapiert wie's geht aber sicher kein Profi, gerade zum erstem mal über smarty etc. gelesen). Ich verwende das Default-PrettyPhoto-Template, findeich ganz hübsch. Ich glaube zu vestehen was das Template macht, neben etwas 'Beiwerk' loopt es über alle Fotos der Galerie und gibt dieses array aus. Wie die Bilder dann im Browser dargestellt werden, dafür ist wohl das CSS verantwortlich...da steht im CSS:

.gallery .img {
height: 80px;
/* width: 80px; */
float: right;
margin: 10px;
text-align: left;

Ich hätte jetzt erwartet, daß man hier einstellen kann wie die ganzen thumbs auf der Seite angeordnet werden. Habe mal ein bißchen mit dem float-Parameter rumgespielt aber hat sich nie was geändert in der Darstellung. Auch andere Parameter laut CSS-Doku mal gesucht 'was das steuern könnte' aber irgendwie nix gefunden. Kommt immer pro Zeile ein thumb und davon dann z.B. hundert untereinander, immer eines unter dem anderen, eines pro Zeile. Ich will eigentlich nur daß eine 'Zeile immer vollgeschrieben wird', also z.B. 10 pro Zeile. Kriegt man das irgendwie hin? Bin ich da überhaupt an der richtigen Stelle 'des Eingriffs'? Denke das muß irgendwie lösbar sein...aber komme gerade nicht weiter als newbie...;-)

Danke & Gruß

Robert

NaN · 17. Juli 2014 13:50

Hallo und willkommen im Forum.

Sorry, das sind zu wenig Infos. Der CSS-Schnipsel hilft da nicht viel. Laut den Styles wendest Du float etc. direkt auf die Bilder an. Ich kann jetzt nur vermuten, dass da im Template noch irgendein HTML-Element im Spiel ist, welches ein sog. Block-Element ist (also eine ganze Zeile beansprucht wie z.B. ein <div> oder ein Absatz <p>) in dem sich dann das Bild befindet. Oder irgendein Element hat die CSS-Eigenschaft clear:both ...

Außerdem kenne ich Dein Seiten-Template nicht.

Daher muss man das Ganze in Aktion sehen.
Sonst kann man da echt nur raten.

kledirob · 17. Juli 2014 14:36

Danke...sorry, hatte den code nicht geposted weil es der unveränderte default-code des Gallery-Modul (prettyphoto) ist, aber hier ist er:

[...]

Gerne auch die Seite ankucken: zur Seite

[...]

Danke & Gruß

Robert

[Gallery-Template und Gallery-Stylesheet entfernt, weil irrelevant]

Beitrag geändert von NaN (17. Juli 2014 15:47)

NaN · 17. Juli 2014 15:11

Du musst da grundsätzlich mal etwas an Deinem Seiten-Stylesheet ändern.
Solche sachen z.B.:

#body div div div {
float: right;
margin: 0;
padding: 0 5px 0 0;
width: 715px;
}
#body div div {
margin: 0 0 80px 20px;
padding: 0;
width: 915px;
}
#body div {
margin: 0 auto;
padding: 85px 0 0;
position: relative;
width: 960px;
}

Nur mal zum bessern Verständnis: #body div gilt für alle <div>, die sich innerhalb von #body befinden. Ich glaube nicht, dass das so gewollt war. Denn es gilt auch für #body div div und #body div div div. Es sei denn Du überschreibst die Anweisungen wieder. Was Du ja im Prinzip auch tust - allerdings nicht für die Gallery. Denn die Gallery befindet sich innerhalb von #body div div div (wäre also #body div div div div). D.h. alle <div> der Gallery haben ebenfalls die Breite 715px. Da kann floaten was will.

Stattdessen würde ich den einzelnen Bereichen IDs (oder, wenn sie mehrfach vorkommen, Klassen) geben und im CSS nicht mit diesen "Parent Child_1 ... Child_n" Selektoren arbeiten (ist zu allgemein und auf Dauer nämlich arg performancelastig) sondern mit den IDs.
D.h. Deine Seite hat z.B. folgenden Aufbau:

<body>
<div id="header">
...
</div>
<div id="body">
<div id="content_outer">
<div id="content">
<h2>Der Käfer</h2>
<div id="content_inner">
<div class="gallery">
<h3>Bayern</h3><p>20 Bilder</p>
<div class="pagenavigation">
<div class="parentlink">
<a href="...">
Zurück zur übergeordneten Galerie
</a>
</div>
</div>
<div class="img">
<a rel="prettyPhoto[2]" ... >
<img alt="..." src="...">
</a>
</div>

...
<div class="galleryclear"> </div>
</div>

</div>
</div>
</div>
</div>
</body>

Das Seiten-Stylesheet dazu müsste dann nur ein wenig geändert werden (also nur die Selektoren ändern):

#content_inner {
float: right;
margin: 0;
padding: 0 5px 0 0;
width: 715px;
}
#content {
margin: 0 0 80px 20px;
padding: 0;
width: 915px;
}
#content_outer {
margin: 0 auto;
padding: 85px 0 0;
position: relative;
width: 960px;
}

Das Gallery-Stylesheet müsstest Du dann Du eigentlich so lassen können wie es ist.

kledirob · 17. Juli 2014 17:00

Vielen Dank! Definitiv 'pädagogisch wertvoll'...habe was gelernt!

Ich habe das Design (samt Templates und CSS) aus dem www runtergeladen, von einer Seite die so was for free anbietet und bei CMSMS verlinkt ist. Du hast vermutlich recht, das das ganze etwas unübersichtlich strukturiert wurde vom 'dem der's gemacht hat'...habe gerade mal eine quick & dirty-Lösung probiert und

#body div div div div div {
float: left;
width: 100px;
}

...in das Seiten-CSS dazugefügt. Also 5 div (!). Die ganzen img aus dem Gallery-Modul scheinen letztendlich auf dieser Ebene der Seite zu landen...hatte erst 4 div probiert, aber da hat sich nichts geändert. Vermutlich nicht best practice aber geht...liefert das was ich wollte!

Deine Struktur erscheint mir viel 'aufgeräumter' da ich von der ganzen Materie aktuell nur wenig Ahnung habe, traue ich mich gerade nicht ran um das strukturell zu ändern. Never touch a running system. Bin gerade erst mal froh daß ich mit meinem Basiswissen schon so weit gekommen bin wie ich bin und es halbwegs nach was aussieht...und vielleicht versuche ich dann noch mal Deine schönere Struktur...da kann ich sicher in Praxis noch was lernen...

Danke soweit

Robert

PS: wo siehst Du eigentlich das Seiten-stylesheet, z.B. width: 715px. Ist das nicht nur am backend sichtbar? Wenn ich die Seite aufrufe und 'Quelltext anzeigen' sage, dann kommt ja nur das HTML...sehe da kein CSS?! Was gibt es da für einen Profi-Kniff? ;-)

Dito <"Parent Child_1 ... Child_n" Selektoren arbeiten>...habe das weder in einem Template noch in einem stylesheet gefunden?

NaN · 17. Juli 2014 20:17

Der Trick heißt "Browsertools" wink
Jeder halbwegs vernünftige Browser hat inzwischen entsprechende Werkzeuge für Webdesigner, um eine Webseite genau zu untersuchen.

Im Internet Explorer oder Firefox einfach mal die Seite aufrufen und [F12] drücken. Da kann man unter anderem jedes einzelne Element einer Seite auswählen und sich alle möglichen Infos dazu geben lassen. Unter anderem auch die Stylesheets, die für dieses Element gelten. Und dann kann man im Browser die Styles oder sogar die Elemente bzw. den kompletten Code der Seite ändern und sieht sozusagen eine Live-Preview wie es am Ende aussehen würde.

Daher weiß ich, was Du an Deiner Seite ändern musst, damit es passt wink
(Deshalb ist es oftmals wichtig, nicht nur Auszüge aus den Stylesheets oder Templates sondern die gesamte Seite zu sehen, um auf die Ursache des Problems schließen zu können.)

"Parent Child" .... damit meinte ich folgendes: HTML ist doch im grunde aus verschachtelten Elementen aufgebaut. Da gibt es Elemente, die weitere Elemente enthalten. Dadurch entsteht eine gewisse Hierarchie. Übergeordnete Elemente, untergeordnete Elemente. Eltern und Kind eben.

Hier klicken, um den Code zum Kopieren zu markieren

<div>          <- Parent
    <div>      <- Child
        ...
    </div>
</div>

Und genau so wie diese Verschachtelung im HTML Code ist, genauso kann man sie auch im CSS aufrufen:

Hier klicken, um den Code zum Kopieren zu markieren

div {
    "parent-zeugs"
}

div div {
    "child"
}

Im CSS heißt das aber, ersteres gilt allgemein für alle <div> egal ob sie allein stehen oder irgendwo untergeordnet sind. Das zweite gilt nur für <div> die irgendwo innerhalb eines anderen <div> stehen. Ob sie direkt danach kommen, oder erst später, ist egal.

Ich würde Dir echt empfehlen, das mit IDs zu machen. Ist ja nicht viel Arbeit. Musst nur im Template den drei <div> die ID hinzufügen und im CSS bei den drei Anweisungen diese IDs verwenden.

Denn die Konstellation, dass ein <div> ein weiteres <div> enthält, wird häufiger vorkommen. Und dann musst Du jedesmal, wenn das einen unerwünschten Effekt ergibt, herausfinden das wievielte <div> in der Hierarchie das ist und im CSS entsprechende Regeln hinzufügen. Wenn es aber mehrere <div> in der selben Hierarchie gibt - wie bei der Gallery - wirst Du damit irgendwann an die Grenzen stoßen.

Der Designer des Templates hat es i.d.R. für einen ganz bestimmten Zweck geschrieben. Und da war möglicherweise garnicht vorgesehen, dass nach den drei verschachtelten <div> noch weitere <div> kommen. Deshalb steht das im CSS so drin wie es da nun steht. Heißt aber nicht, dass man es nicht ändern darf.

Forum für CMS/made simple

#1 17. Juli 2014 13:25

Gallery: thumbs nicht untereinander

#2 17. Juli 2014 13:50

Re: Gallery: thumbs nicht untereinander

#3 17. Juli 2014 14:36

Re: Gallery: thumbs nicht untereinander

#4 17. Juli 2014 15:11

Re: Gallery: thumbs nicht untereinander

#5 17. Juli 2014 17:00

Re: Gallery: thumbs nicht untereinander

#6 17. Juli 2014 20:17

Re: Gallery: thumbs nicht untereinander

Fußzeile des Forums