Vraag

Uitlijnen 3 afbeeldingen homepagina

  • 13 februari 2021
  • 10 reacties
  • 73 Bekeken

De breedte van mijn home pagina staat ingesteld op 1100 pixels. Om te beginnen heb ik een afbeelding aan de bovenzijde van de pagina met een breedte van 1100 pixels. Hieronder wil ik 3 losse afbeeldingen plaatsen over de gehele breedte (dus een breedte per afbeelding van 350 pixels). Echter als de drie afbeeldingen naast elkaar invoeg dan springt de laatste afbeelding naar beneden. 

Heeft iemand hier ervaring mee of tips om dit op te lossen?


10 reacties

Reputatie 2
Badge +2

het volledige artikel kan je hier vinden, maar ik heb er alvast uitgehaald wat je nodig hebt:
https://www.mijnwebwinkel.nl/blog/diy-afbeeldingen-naast-elkaar-plaatsen-op-een-pagina

“De standaard (en aanbevolen) breedte voor je webwinkel is 1100 pixels. Wanneer je webwinkel hierop ingesteld staat en je zijkolommen uit staan, is de ruimte die je beschikbaar hebt om afbeeldingen te plaatsen 1050 pixels breed. Dit heeft te maken met de vastgestelde marges rondom het contentvlak. Stel je webwinkel staat ingesteld op 1100 pixels en je wil 3 afbeeldingen naast elkaar plaatsen met aan alle kanten 4 pixels marge, dan ziet je berekening er als volgt uit:

Breedte:
1050 pixels : 3 (afbeeldingen) = 350 pixels per afbeelding (inclusief marge)
350 pixels – 4 pixels marge links – 4 pixels marge rechts = 342 pixels (exclusief marge)”

Dankjewel voor je snelle reactie! 

Ik houd al rekening met de marges.. het lijkt alleen alsof er geen 1100 pixels breed zijn waardoor de afbeeldingen gaan verspringen. Terwijl dat bij de afbeelding daarboven wel is. 

Ik heb voor de vorm even twee prinsscreens gemaakt van wat er gebeurd.

Op onderstaande prinsscreen zijn alle 3 de foto’s inclusief marge 342 pixels (en toch verspringt de onderste afbeelding)

 

Nog een voorbeeld ter verduidelijking. Als ik dan de foto met halsbanden wil centreren dan spring de complete afbeelding naar beneden..

 

Reputatie 2
Badge +2

Sowieso niet centreren met de tekstknop. Maar links uitlijnen in de instellingen van de afbeelding zelf, dus het venster waar je de marges etc instelt. 

Maar ik vraag me af … is het enkel hier dat je het ziet verspringen ? In de omgeving waar je je pagina schrijft ? Want dat is normaal. Hoe ziet het er uit als je de pagina opent in testmodus ? 
En in testmodus op je mobiel zouden ze mooi onder elkaar moeten komen ?

Als het in testmodus de afbeelding nog steeds verspringt, dan kan je eens proberen met de afbeeldingen op 340 pixel, 339 pixel. Zo doe ik het zelf toch ook meestal. 

Maar nogmaals, in de beheer omgeving krijg je ze nooit naast elkaar, belangrijkste is om te kijken hoe het op de site zelf staat. 


 

Het is inmiddels gelukt! Dank daarvoor.
Echter loop ik nu tegen het volgende probleem aan. Ik heb nu 3 afbeeldingen netjes naast elkaar, maar als ik de website via mobiel open dan komen ze onder elkaar te staan; terwijl de afbeelding boven deze 3 afbeeldingen ook 1100 pixels breed is en deze wel geschaald wordt..

Reputatie 2
Badge +2

Ja correct, dat had ik eerder al geschreven. 

Op mobiel worden de afbeeldingen geschaald op breedte. Dus die komen onder elkaar. Die kan je niet op mobiel naast elkaar krijgen. 

Reputatie 6
Badge +7

Daar komt hopelijk snel in de toekomst iets beters voor. We hebben mooie dingen gezien op de mww klanrdagen in 2019.

Reputatie 2
Badge +3

Heb ook een aantal afbeeldingen op een rij geplaatst, dat er eentje eronder komt dat is wel normaal. Het ziet er wel goed uit als je de website opent. 

Ben nu zelf overgestapt om in photoshop drie afbeeldingen als één afbeeldingen te maken met dezelfde marges. Het lijken dus drie losse, is gelijk iets rustiger dan de drie afbeeldingen onder elkaar en daarnaast werden de afbeeldingen via de mob. weergave ook niet in het midden getoond maar iets li.

Reputatie 5
Badge +6

Heb ook een aantal afbeeldingen op een rij geplaatst, dat er eentje eronder komt dat is wel normaal. Het ziet er wel goed uit als je de website opent. 

Ben nu zelf overgestapt om in photoshop drie afbeeldingen als één afbeeldingen te maken met dezelfde marges. Het lijken dus drie losse, is gelijk iets rustiger dan de drie afbeeldingen onder elkaar en daarnaast werden de afbeeldingen via de mob. weergave ook niet in het midden getoond maar iets li.

Dit kun je alleen toepassen als ze bijvoorbeeld naar hetzelfde linken. Wanneer je er ook nog drie losse links van wil maken, werkt dat niet. :wink:  Maar voor gewone sfeerbeelden werkt dit inderdaad prima.

Reputatie 1
Badge +2

Daar komt hopelijk snel in de toekomst iets beters voor. We hebben mooie dingen gezien op de mww klanrdagen in 2019.

 Nou inderdaad als dat toch eens snel uitgerold zou worden. Dat zou de opmaak van de homepagina een stuk makkelijker en mooier maken!

Reputatie 2
Badge +3

@Nanaas Dat is zo, in dit geval was het zo, voor een sfeerplaatje op subpagina.. :wink:

 

Reageer