Bilder in Galerie Übersicht mit Rahmen und Abstand

illuminator · 16. Dezember 2020

Hi Leute,

ich bin mit der Vorschau in der Galerie Übersicht nicht ganz zufrieden und würde gerne folgendes umsetzen:

Einen schwarzen Rahmen von 1px um die Vorschaubilder
1 px Abstand zwischen den Bildern

Da ich nicht so der CSS Pro bin, habe ich mit etwas probieren einen Teilerfolg erzielt:

Code

.galleryAlbumList ul.galleryAlbumCoverImages>li img {margin: 1px;}
.galleryAlbumList ul.galleryAlbumCoverImages>li img {border: 1px solid black;}

Das Problem ist, daß das große Vorschaubild jetzt nur links und rechts einen Rahmen hat und daß die Vorschaubilder rechts immer noch zusammenkleben und unten keinen Rahmen haben.

Kann mir jemand helfen diesbezüglich? Ich kriege das nicht gebacken, daß das gescheit aussieht.

Cheers

Nico

Tom · 17. Dezember 2020

CSS

@include screen-md-up {
    .galleryAlbumList ul.galleryAlbumCoverImages {
        max-height: 285px;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages > li {
        border: 1px solid #000000;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages {
        height: 285px;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:nth-child(1) {
        margin-right: 5px;
        overflow: hidden;
        height: 285px;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:nth-child(2) {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:nth-child(3) {
        margin-bottom: 5px;
    }

    .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:nth-child(4) {
        margin-right: 5px;
    }
}

Alles anzeigen

illuminator · 17. Dezember 2020

Ha, wie geil!

Der Tom hats gerockt. Works auf Anhieb.

Danke Tom.

Bilder in Galerie Übersicht mit Rahmen und Abstand

cls-design

Informationen

Demoinstallationen

Hilfe