Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  10 685
Hei Folkens.


Skal sette opp et lite "galleri" om man kan kalle det det.
Det skal være 3 bilder øverst, så 2 nederst. Disse skal ha forskjellig bredde for å matche totalbredden på siden og forskjellig høyde.

Dette blir jo som masonry effect med JavaScript.

Er det noen mulighet for å gjøre dette med css / scss eller må jeg ty til JavaScript?

Hvis jeg må ty til JavaScript, har dere noen tips til hvordan dette kan gjøres?


Takker for all hjelp.
Limited edition
Moff's Avatar
Sitat av Nikon01 Vis innlegg
Det skal være 3 bilder øverst, så 2 nederst. Disse skal ha forskjellig bredde for å matche totalbredden på siden og forskjellig høyde.
Vis hele sitatet...
Det er aldri en god idé å si "det skal være x antall i bredden". Det ser kanskje flott ut å ha 3+2 i bredden på den skjermen du bruker akkurat nå, men jeg har en mobiltelefon med kjempesmal skjerm, så jeg vil ikke ha 3 i bredden.

Du kan ordne et slikt system med flexboxer. Selv ville jeg brukt Bootstrap, fordi det gjør prosessen mye enklere når du skal ha ulike breakpoints (og det skal du ha. Ikke kjør 3 i bredden uansett skjermstørrelse.)

Her er et kjapt eksempel:

Kode

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

		<style>
			body {
				background-color: rgba(0, 0, 0, 1);
			}
			img {
				max-width: 100%;
				max-height: 400px;
			}
		</style>
	</head>
	
	<body>
		<div class="container-fluid">
			<div class="row justify-content-center text-center">
				<div class="col-md-4 col-sm-6 pt-2">
					<img src="https://i.imgur.com/BF3ty6o.jpg">
				</div>
				
				<div class="col-md-4 col-sm-6 pt-2">
					<img src="https://i.imgur.com/x9PKSpj.png">
				</div>
				
				<div class="col-md-4 col-sm-6 pt-2">
					<img src="https://i.imgur.com/FwnpMqO.jpg">
				</div>
				
				<div class="col-md-4 col-sm-6 pt-2">
					<img src="https://i.imgur.com/8tcxHWh.jpg">
				</div>
				
				<div class="col-md-4 col-sm-6 pt-2">
					<img src="https://i.imgur.com/tCUq2GJ.jpg">
				</div>
			</div>
		</div>
	</body>
</html>
Dette er en side som importerer Bootstrap, og definerer en enkel grid. På store skjermer ser vi 3+2. På SM (små tablets) ser vi 2+2+1 og på mobil har vi 1+1+1+1+1. Bootstraps flexboxer sørger for at hver kolonne fyller ut plassen på skjermen jevnt, og justify-content-center sørger for at kolonnene som er mindre enn skjermen blir sentrerte. text-center sørger for at bildene blir sentrerte inni hver flexbox. Jeg har også satt regler for at img-elementer ikke skal oppta mer enn 100% av tilgjengelig bredde, som gjør at bildene, hvis de er store nok, vil fylle flexboxen de står i. De har også en max-height for å unngå at de opptar urimelig mye høyde.
Kan lett gjøre det bare med div'er og rote litt med widths og heights, men en greiere måte er vel egentlig et layout.

Som f.eks CSS Grid Layout:
https://www.w3schools.com/css/css_grid.asp

Eller CSS Flexbox:
https://www.w3schools.com/css/css3_flexbox.asp
Trådstarter
Hei og takk for svar.

Akkurat nå bruker jeg column-count og column-gap.
Her setter jeg 1 for telefon, 2 for tablet p og opp og 3 for 1200px og oppover.

Ut ifra forskjellige guider skal dette fungere, men det gjør det ikke for min del i hvert fall.


Fant en guide som gjorde det sånn som det her:

Kode

.gallery-section {

	.images {
		line-height: 0;
		-webkit-column-count: 1;
		-webkit-column-gap:   0px;
		-moz-column-count:    1;
		-moz-column-gap:      0px;
		column-count:         1;
		column-gap:           0px;
		vertical-align: baseline;

		@include tablet-p-up {
			line-height: 0;
			-webkit-column-count: 2;
			-webkit-column-gap:   0px;
			-moz-column-count:    2;
			-moz-column-gap:      0px;
			column-count:         2;
			column-gap:           0px;
		}

		@include desktop-up {
			line-height: 0;
			-webkit-column-count: 3;
			-webkit-column-gap:   0px;
			-moz-column-count:    3;
			-moz-column-gap:      0px;
			column-count:         3;
			column-gap:           0px;
			column-fill: initial;
		}


		.brick {
			display: inline-block;
			margin: 0;
			width: 100%;
			vertical-align: top;


			img {
				max-width: 100%;
				vertical-align: middle;
			}
		}
	}
}
Ut ifra guiden så skulle bildene da se sånn her ut:
https://w3bits.com/labs/css-masonry/3/
Vi må nesten se koden din for å feilsøke hva som kan være galt, bruk f.eks. CodePen eller lignende.

Jeg syns column-count burde være reservert for tekstblokker (uten at jeg egentlig vet hva de som har utviklet det har tenkt), og derfor syns jeg dette høres ut som en jobb for CSS Grid som brennesle har lenket til. Flexbox funker selvsagt også, men mitt syn er at Grid er den seneste og mest tilpassede måten å løse problemet ditt på (og at column-count kanskje var en metode man brukte før både FlexBox og Grid?).
Trådstarter
Hei.

Nå er ikke koden her så veldig avansert da jeg heller fokuserte på API på siden før jeg begynte med dette.

Koden for visning av bilde er kun dette:

Kode

<div class="images">

  <img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
  <img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
  <img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
  <img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
  <img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
  
</div>

Jeg har en container som viser 5 bilder.
Disse vil jeg ha i visning som dette bildet viser:

https://ibb.co/2NMRTm3


Er dette mulig med kun css / scss eller må man ty til JavaScript her? Noen som har lenker de kan linke til som kanskje forklarer dette ?

Tusen takk for all hjelp så langt.
Her har du et eksempel med grid: https://codepen.io/andeersg/pen/oNvqJoL?editors=1100

Dette ble veldig kjapt satt sammen, men jeg tror det kan vise hvordan du kan bruke grid til kreative oppsett.
(Prøvde kjapt med eksempelbilder men skjulte de og brukte farger for å enklere vise layouten)
Trådstarter
Takk skal du ha Yochi.

Etter litt justeringer så ser dette greit ut. Skal se litt med ordentlige bilder for å se om bilder blir strekt eller ikke. Hvis de blir det så legger jeg bare div og bilder som bakgrunn istedenfor.

Men tusen takk for dette. Da ser jeg hva grid kan brukes for.
Limited edition
Moff's Avatar
Grunnen til at det første eksempelet du postet ikke virket er rett og slett at CSS-koden og HTML-koden ikke hører sammen. CSS-koden er i tillegg skrevet feil. Siden dette er en såpass lett feil å se, så mistenker jeg kanskje også at du ikke vet hva SCSS / SASS er for noe. (Den som skrev CSS-koden du postet ovenfor vet i alle fall ikke hva det er.)

SCSS (samt SASS og LESS) er en måte å introdusere programmering i CSS på. CSS tillater veldig lite logikk, og det kan for eksempel være nyttig å lagre variabler med farger og marginer som kan gjenbrukes mange steder - men kontrolleres fra ett sted. SCSS, SASS og LESS tillater dette, men siden denne typen ting ikke er støttet i CSS ennå, og følgelig ikke støttet i noen nettlesere, så må SCSS-kode kompileres før den kan brukes. Det finnes mange programmer som kan gjøre dette for deg. Som jeg også nevnte, så er det en skrivefeil i selve koden også; man kan ikke bruke @include på den måten de gjør her. @include er for å hente inn en såkalt "mixin", men det krever at en mixin med samme navn er definert. Det er det ikke her. Syntaksen er rett og slett feil.

I CSS så er alt som starter med .punktum et klassenavn som skal eksistere ett eller annet sted i HTML-koden din. Koden definerer klassene gallery-section, images og brick. Kun én av disse klassene eksisterer i HTML-koden din, men så lenge denne klassen ikke er en child av gallery-section, så vil den uansett ikke bli stylet (hvis CSS-koden hadde fungert som den skulle, i alle fall).

Her er koden uten syntaksfeil:

Kode

<!doctype html>
<html>
	<head>
		<style>
			.gallery-section .images {
				line-height: 0;
				-webkit-column-count: 1;
				-webkit-column-gap: 0px;
				-moz-column-count: 1;
				-moz-column-gap: 0px;
				column-count: 1;
				column-gap: 0px;
				vertical-align: baseline;
			}
			
			@media (min-width: 768px) {
				.gallery-section .images {
					line-height: 0;
					-webkit-column-count: 2;
					-webkit-column-gap: 0px;
					-moz-column-count: 2;
					-moz-column-gap: 0px;
					column-count: 2;
					column-gap: 0px;
				}
			}
			
			@media (min-width: 992px) {
				.gallery-section .images {
					line-height: 0;
					-webkit-column-count: 3;
					-webkit-column-gap: 0px;
					-moz-column-count: 3;
					-moz-column-gap: 0px;
					column-count: 3;
					column-gap: 0px;
					column-fill: initial;
				}
			}
			
			.gallery-section .images .brick {
				display: inline-block;
				margin: 0;
				width: 100%;
				vertical-align: top;
			}
			
			.gallery-section .images .brick img {
				max-width: 100%;
				vertical-align: middle;
			}
		</style>
	</head>
	
	<body class="gallery-section">
		<div class="images">
			<div class="brick">
				<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
			</div>
			<div class="brick">
				<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
			</div>
			<div class="brick">
				<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
			</div>
			<div class="brick">
				<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
			</div>
			<div class="brick">
				<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
			</div>
		</div>
	</body>
</html>
Dette er en fungerende grid, men det er ikke i nærheten av den samme effekten som du linker til.
Trådstarter
Hei Moff.

@include her er nok skrevet rett.
Denne mixin er laget i en egen scss fil jeg har som definerer skjermstørrelsen med f.eks:

Kode

@mixin tablet-up {
    @media only screen and (min-width: 600px) {
        @content;
    }
}
Her bruker jeg da

Kode

@include tablet-up  {}
for å hente denne. Denne fungerer helt utmerket og har gjort det det siste året siden jeg laget denne.




Grunnen til at scss koden her ikke stemmer med html koden vist er pga at jeg endret html'en etter at jeg postet stylingen og endret så stylingen deretter.

.gallery-section ligger her på forsiden med en call til template-parts som igjen kjører koden fra .images.
Sitat av Nikon01 Vis innlegg
Etter litt justeringer så ser dette greit ut. Skal se litt med ordentlige bilder for å se om bilder blir strekt eller ikke. Hvis de blir det så legger jeg bare div og bilder som bakgrunn istedenfor.
Vis hele sitatet...
Angående strekking av bilder o.l. fikk jeg nylig en åpenbaring som sikkert har vært åpenbar for andre som har fulgt bedre med, men CSS kan styre img-/picture-innhold med object-fit, slik at man gjør som man ville gjort med et CSS-bakgrunnsbilde, bare at for img/picture.

Rent semantisk er det egentlig feil å sette opp bildeinnhold som bakgrunnsbilder vha. CSS, da den originale intensjonen var å bruke dette hvis man faktisk brukte det til et bakgrunnsbilde, slik som hvis man har en tekstur e.l. (litt som her på freak.no). Man får heller ikke spesifisert alt-innhold.

Pga. tidligere begrensinger har man selvsagt benyttet seg av bakgrunnsbilder mange steder, men nå skal i teorien det ikke være nødvendig lenger, da man får tilstrekkelig styring med object-fit.

Står litt mer om det her.