Oberen/unteren "Abstand" bei einer Bildergalerie verändern

26.08.2018 12:54
#1
Do

Liebe Expert(inn)en,

habe ein wahrscheinlich recht einfach zu lösendes Problem:
Auf der Testseite meiner Webseite
https://www.frassek.org/testseite-1/
befinden sich beispielhaft einige Bildergalerien.
Ich würde gern bei den Galerien den Abstand nach oben/unten verändern (also den Bereich bis zur Textzeile).

Zwar habe ich schon - insbesondere auch durch Tipps aus dem Forum - einige Dinge am JIMDO-Design per CSS verändern können, habe aber immer wieder das Problem, die entsprechende Stelle/Namen des zu verändernden Elements zu finden - so auch hier ... Ich benutze dazu immer die Funktion "Element untersuchen" von Firefox, habe dann aber meist ein Problem mit der Zordnung :-(

Über einen Tipp wäre ich sehr dankbar.
Viele Grüße DocBernie


 Antworten

 Beitrag melden
27.08.2018 11:18
#2
Do

... wolltes es noch etwas klarer machen ...

Im Edit-Mode:

Normalansicht:


Der gelbe Pfeil zeigt den Abstand, den ich meine ...

Meine Frage: kann ich diesen verkleinern?


 Antworten

 Beitrag melden
27.08.2018 13:43 (zuletzt bearbeitet: 27.08.2018 14:09)
#3
bu

Hi DocBernie

Wenn du einen Extra-Abstand oben oder unten haben willst, kannst du unterhalb deiner Titelzeile, also oberhalb deiner Galerie, einen sogenannten "Abstand" einfügen, genau so, wie du auch alles andere einfügst (Text, Bilder, Galerien, Widget etc). Dort kannst du dann selber eingeben, wieviel Pixel der Abstand sein soll.

Siehe zum Beispiel dieses Video-Tutorial, was ich gefunden habe. Wie du einen Abstand einfügst, kommt ab ca. 10:51 min...

https://www.youtube.com/watch?v=zlrxzGnSquI

EDIT:

Zu deinem zweiten Beitrag, also den bestehenden Abstand verkleinern: Kann es sein, dass du unterhalb der Zeile "Galerietitel 1" eine Leerzeile hast? Den müsstest du löschen.

Ansonsten kannst du versuchen den Zeilenabstand auf der Seite zu verkleinern. Das machst du im "Design", dann "Style", dann "Detail-Styling an" und dann entsprechendes Element anklicken und oben Zeilenabstand eingeben. (Du hast glaub' 1,5. Kannst versuchen auf 1 zu setzen.)

Hier ein Tutorial:

https://help.jimdo.com/hc/de/articles/115005534663-Wie-formatiere-ich-meine-Texte-

Wenn das nix bringt, kannst du versuchen das ganze per CSS-Code anzupassen. Hier musst du dir auch überlegen, welche DIVs möchtest du mit dem selben Code ansprechen. Hier ein Beispiel:

1
2
3
4
5
6
7
8
9
10
11
 
<style type="text/css">
/*<![CDATA[*/
 

 
div#cc-m-13916571578.j-module.n.j-hgrid
 
{ line-height: 1 !important; }
 
/*]]>*/
</style>
 



Gruss
Butterman


 Antworten

 Beitrag melden
27.08.2018 14:18 (zuletzt bearbeitet: 27.08.2018 14:18)
#4
bu

EDIT:

Zitat
Ich benutze dazu immer die Funktion "Element untersuchen" von Firefox, habe dann aber meist ein Problem mit der Zordnung :-(


Du kannst wie folgt vorgehen:

1. Bei Firefox Extras anklicken
2. Web-Entwickler
3. Inspektor

Das Fenster wird in zwei Teile geteilt: oben Webansicht, unten Quelltext.

4. Du fährst mit dem Curser über das betreffende Element.
5. Das Element färbt sich dabei blau.
6. Du klickst drauf, dann erscheint unten die gesuchte Zeile im Quelltext.

Gruss
Butterman


 Antworten

 Beitrag melden
28.08.2018 13:35
#5
Do

Lieber "butterman007",
das Problem hat nichts mit der Textzeile zu tun. Gemeint ist der Abstand eines Bildes in der Galerie zum vorherigen Element (hier: Textzeile), wie man es besonders bei meiner ersten Grafik (Edit-Mode) meiner Anfrage erkennen kann.

Ich habe mittlerweile folgendes in der Header eingebaut:

1
2
3
4
5
6
7
8
9
 

.cc-m-hgrid-column .n {
padding: 0px!important;
}
.ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3 {
padding: 0px!important;
margin: 0 0 0 0!important;
}
 
 


Dadurch wurde der Abstand ein paar Millimeter kleiner - mehr schaffe ich nicht ...

Danke für den Tipp mit den "Entwicklertools" von Firefox. Geht echt besser als mit "Element untersuchen".
Viele Grüße und danke für Deine Zeit
Bernd


 Antworten

 Beitrag melden
28.08.2018 16:04 (zuletzt bearbeitet: 28.08.2018 16:07)
#6
bu

Hi DocBernie

Alles klar. Hier noch etwas, was du versuchen kannst, um den Abstand noch kleiner zu machen.

1
2
3
4
5
 

.ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3 {
padding: 0px!important;
margin: -20px 0 0 0 !important;
}
 



oder

1
2
3
4
 
.ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3 {
padding: 0px!important;
margin-top: -20px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
 
 


Mit anderen Worten, du kannst bei Margin auch Negativwerte eingeben, und zwar jeden beliebigen Wert. Dein Layout muss es halt verkraften...

Gruss
Butterman


 Antworten

 Beitrag melden
28.08.2018 20:35
#7
Do

... Daumen hoch und Danke!
Hat geklappt (mit -15) ... s. https://www.frassek.org/testseite-1/
Wusste nicht, dass auch negative Werte erlaubt sind.
Falls ich diesen Weg gehe, bedarf es natürlich auf der richtigen Seite noch etwas Abstand-Tuning ...

Darf ich Dich noch etwas fragen - geht mehr in die Richtung "besseres Design - insbesondere mobile Ansicht"?

Dazu bitte mal per PC und per Handy gucken:
Auf der Testseite siehst Du 3 Ansichten in grün und 3 in blau der "Boy'schen Fläche".
Unter https://www.frassek.org/3d-mathe/3d-fl%C...erfl%C3%A4chen/
findest Du das Gleiche, allerdings per Slider realisiert.

Welche Variante findest Du besser - ich kann mich nicht entscheiden :-(
Vielleicht ist das aber eher etwas für die Rubrik "ich stelle meine Seite vor" ...

Viele Grüße Bernd


 Antworten

 Beitrag melden
29.08.2018 11:59 (zuletzt bearbeitet: 29.08.2018 12:01)
#8
bu

Hi Bernd

Ich weiss jetzt nicht, bezieht sich deine Frage auf die Farbwahl: Grün oder Blau, oder auf die Frage: Galerie oder Slider?

Falls sich deine Frage auf die Farbe bezieht: Ich finde die Farbe Grün irgendwie schöner.

Falls sich deine Frage auf die Entscheidung Galerie mit kleinen Vorschaubildern oder Slider bezieht: Ich finde mehrere Slider nebeneinander eher störend. Ich finde, wenn Slider, dann nur ein Stück pro Zeile. Generell finde ich Galerien mit Vorschaubildern aber persönlich sowieso angenehmer. Aber das ist ja Geschmacksache.

Etwas anderes ist mir allerdings noch aufgefallen. Bei der Variante mit den mehreren Galerien mit Vorschaubildern hast du in der Mobilansicht unterschiedliche Abstände unterhalb der Galerien. Das kommt wahrscheinlich daher, dass du unterhalb der Zeilen mit jeweils zwei Galerien (z.B. "Blob" und "Clebsch Surface" ein extra Element "Abstand" eingefügt hast. Das ist in Ordnung, wenn du in einer Zeile nur eine Galerie hast. Sobald du allerdings auf einer Zeile mehrere Galerien hast, verschiebt sich ja die zweite Galerie der Zeile nach unten, sobald sie nicht genug Platz hat (Mobilansicht). Nun hat aber die zweite Galerie einen anderen Abstand zur nächsten Zeile... (ich hoffe, du kannst mir noch folgen. :-D)

Du kannst daher versuchen, den Abstand unterhalb der Zeile mit den mehreren Galerien zu löschen und stattdessen gleich Pro Spalte, unterhalb der jeweiligen Galerie (also in der gleichen Spalte) einen extra Abstand einzufügen. Pro Zeile sind das dann jeweils zwei Abstände (z.B. unterhalb "Blob" und unterhalb "Clebsch Surface").




Gruss
Butterman


 Antworten

 Beitrag melden
30.08.2018 16:34
#9
Do

Hallo Butterman,
danke für den Hinweis mit den unterschiedlichen Abständen von Galerien in der mobilen Ansicht - war mir auch schon aufgefallen - trotzdem vielen Dank für Deinen ausführlichen Hinweis!

Was das Design Slider vs. "komplette Galerie" angeht, bin ich mir immer noch nicht im Klaren, was besser ankommt. Du meinst, es sei letztendlich Geschmackssache ...
Ich habe die Testseite deaktiviert und stattdessen jetzt unter
https://www.frassek.org/3d-mathe/3d-fl%C...erfl%C3%A4chen/
zwei verschiedene Versionen hinterlegt, damit man nicht dauern umschalten muss, um die Versionen miteinander vergleichen zu können.

Ich überlege, die Frage nach dem besseren Layout mal hier im Forum unter DESIGN zu posten - mal sehen, ob ich weiteren Input bekomme ...
Ich muss mich dann endlich entscheiden, da bei Parameterflächen, Implizite Flächen, Flächen mit Singularitäten und Spherical Harmonics jeweils ca. 30 Flächen - zum Teil mit mehreren Ansichten pro Fläche - eingefügt werden sollen. Da wäre es schon hilfreich, das Layout vorher festzulegen, bevor ich die ganzen Galerien erzeuge ...

Dir vorerst nochmals herzlichen Dank für Deine Mühe ...
Bernd


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!