Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2012

Placera bilder i rutnät HTML

Hej!

Försöker för tillfället skapa en enklare e-shop genom tictail. Har valt ett tema och lyckats ändra allt som jag vill ha det, förutom en sak. Vid startsidan är tanken att alla produkter ska visas i ett rutnät där varje rad (horisontellt) innehåller fyra produkter. Har lyckats ändra HTML koden så att bilderna blir mindre, men inte så att rutnätet (inklusive länken till produkten) krymper.

Hur det ser ut och hur jag har tänkt att det ska bli

Förstår att jag ändrar bildstorleken genom att justera width och height i koden längst ner på bilen, men inte hur jag ändrar själva rutnätet så att det dras ihop.

Hoppas ni förstår vad jag menar, ursäkta mina paintskills

"Do or do not, there is no try" - Master Yoda

Fractal Design Define R4 || Windows 7 || i7 2600@ 3,4 Ghz || 16 GB RAM || ASUS GTX 770 DCII OC || 128 GB SSD

Trädvy Permalänk
Medlem
Plats
Vancouver, BC
Registrerad
Jul 2009

Om jag inte minns helt fel så är koden du ändrar beroende på vilket objekt bilderna har som parent.
Du måsta kolla width=50% av vad?

Dvs. ligger dom i en <div> som är 500px, så blir dom 250px. Men div:en är fortfarande 500px bred, vilket gör att inga andra bilder får platts på raden.

Typ så här:

H440 | Asus Z170-A | i5 6600K | EK XLC Predator 240 | 16GB 3000 | GTX 1080 | SSD 1.2TB | G2 750W | PG279Q | Vive

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2012
Skrivet av asphyxie:

Om jag inte minns helt fel så är koden du ändrar beroende på vilket objekt bilderna har som parent.
Du måsta kolla width=50% av vad?

Dvs. ligger dom i en <div> som är 500px, så blir dom 250px. Men div:en är fortfarande 500px bred, vilket gör att inga andra bilder får platts på raden.

Typ så här:
https://dl.dropboxusercontent.com/u/38747333/lalal.jpg

Förstår vad du menar, men förstår inte vad jag ska ändra i koden.

"Do or do not, there is no try" - Master Yoda

Fractal Design Define R4 || Windows 7 || i7 2600@ 3,4 Ghz || 16 GB RAM || ASUS GTX 770 DCII OC || 128 GB SSD

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2009

@cluban1:
Gör parent diven till varje bild 100/n % där n = antal kolumner?

<div> <div class ="someClass4"> <img>.... </img> </div> </div> .someClass4 { Width = 25%; }

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2012
Skrivet av NoToes:

@cluban1:
Gör parent diven till varje bild 100/n % där n = antal kolumner?

<div> <div class ="someClass4"> <img>.... </img> </div> </div> .someClass4 { Width = 25%; }

Kollade runt i koden och lyckades hitta samt ändra parent diven. Bilderna ligger nu som jag vill ha dom men länken till produkten hamnar utanför bilden, om ni förstår vad jag menar. Länken till bilden sträcker sig utanför själva bilden. Vilken kod ska man ändra då?

"Do or do not, there is no try" - Master Yoda

Fractal Design Define R4 || Windows 7 || i7 2600@ 3,4 Ghz || 16 GB RAM || ASUS GTX 770 DCII OC || 128 GB SSD