Randabstände bei Spalten anpassen

19.08.2019 15:38
#1
si

Hallo zusammen,

echt ein klasse Forum hier, hat mir schon an ein paar Stellen sehr gut weiter geholfen.
Jetzt habe ich aber ein Problem, bei dem ich nicht mehr weiter weiß. Meine Kenntnisse im Webdesign gehen leider auch eher gegen 0...

Ich baue gerade eine neue Website für unser Büro.
Die Referenzen sollen auf der Startseite als eine Art Galerie dargestellt werden. Den Mouseover Effekt habe ich auch schon so hinbekommen, wie ich ihn mir vorgestellt habe.
Aber da ich die einzelnen HTML Widgets in Spalten aufteilen muss, habe ich vertikal andere Abstände als horizontal, generell sind mir die Abstände aber leider zu groß.
Kann man das irgendwie anpassen, sodass es in etwa wie bei Instagram aussieht von der Aufteilung her, aber halt mit vier Spalten.

Oder gibt es eine elegantere Lösung für eine Galerie mit einem Mouseover Effekt?

Die Website ist noch nicht veröffentlicht, weswegen ich leider keinen Link teilen kann, deshalb mal ein Bild anbei.

Danke schonmal im Vorraus für eure Hilfe.
Gruß Max|addpics|qh0-1-1ee0.png|/addpics|


 Antworten

 Beitrag melden
22.08.2019 14:24 (zuletzt bearbeitet: 22.08.2019 14:31)
avatar  az_
#2
avatar
az_

Hallo Max,
...schau mal hier: https://redesign-stockholm.jimdofree.com...galerien/test5/

Ist das in etwa, was Du meinst?

Auf https://designtest-hamburg.jimdo.com/images/ haben wir den Elementen einen Overlay verpasst. Das geht auch mit verschiedenen Inhalten, ist aber etwas komplizierter. Auf https://designtest-hamburg.jimdo.com/ siehst Du es bei Einzelbildern. Für eine Galerie müsste man die einzelnen Thumbnails der Galerie per Skript durchlaufen und jedem automatisch einen eigenen Overlay-Inhalt zuweisen. Das geht, wenn man den einzelnen Inhalten immer die gleiche Klasse zuweist.

Ich habe gerade eine Kundin, die so etwas haben möchte. Ist noch ein wenig "Entwicklungsarbeit".

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
03.09.2019 13:57
#3
si

Super, danke fürs erste. Ich schau mir das mal an.
Aktuell hab ich ich mit meiner Lösung abgefunden und finde es vom Design her gar nicht schlecht.
Vllt lass ich es sogar so.

Anbei mal der Link zur Website, falls du mal vorbeischaun willst.
www.sai-aichach.jimdofree.com

LG Max


 Antworten

 Beitrag melden
04.09.2019 10:00
avatar  az_
#4
avatar
az_

Ich habe auf der Testseite alles ein bisschen umstrukturiert. Die Overlay Galerie ist jetzt hier:
https://redesign-stockholm.jimdofree.com...en/v-galerie-4/

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
08.06.2020 00:10
avatar  Maria12
#5
Ma

Hallo Max,
wie hast du denn diesen coolen Mouseovereffekt erstellt?
Würde mir auch sehr gut gefallen.
VG Maria


 Antworten

 Beitrag melden
08.06.2020 10:31
avatar  Charles
#6
avatar

Zitat von simpson91 im Beitrag #3
Anbei mal der Link zur Website, falls du mal vorbeischaun willst.www.sai-aichach.jimdofree.com

Eure Navigationsleiste könnte ein Update vertragen. Eine schwarze Schrift auf einem dunkel grauem Hintergrund ist eine schlechte Idee.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

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