[x264]

Ursprungligen postat av x264

Inga som helst problem, du kan använda t.ex. bootstrap eller liknande lösningar

http://jsfiddle.net/et1gz52a/2/

Slängde ihop en snabb jsfiddle åt dig.

Sedan för att anpassa höjden så att de stämmer överens med bilden rekommenderar jag att du använder dig av flexbox:

Läs mer här:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

eller om du vill ha fasta höjder använda dig av det i stället.


Hoppas det var till någorlunda hjälp.

Du kan självklart ändar bootstrap klasserna efter eget behov vid olika skärmstorlekar

Är det denna effekten du är ute efter?

http://jsfiddle.net/et1gz52a/4/

[jayzee]

Ursprungligen postat av x264

Är det denna effekten du är ute efter?

http://jsfiddle.net/et1gz52a/4/

Det verkar som du försöker återuppfinna image maps.

[HejaMartin]

Bah!

Det har inte gått bra alls idag. Tackar för er hjälp, men har inte kommit närmare målet.

Designen är satt, med sina bredder & höjder på dessa rutor. Så Bootstrap verkar mer om jag i så fall måste säga att designern måste göra om sina rutor.

Har provat själv.. men det är så bekymmersamt med % och med att vilja ha 10px i fasta mått som marginaler.

Så här ser det ut nu:
http://maleryd.se/intro/

Men ni ser i koden - det är fasta bredder..
Att få till procenten är klurigt. Speciellt då marginalen skall vara 10px, även om det kommer in folk med stående t ex iPad.


Jag kan gå med på att ha 2 breakpoints annars. Än för 1300px bredd, och en för 768pc som sajten är anpassad för.

Image-map är ju det självklara om jag vill behandla alla bildrutor som en enda jpeg, men max-width: 100%, height: auto..

Men ville gärna ha en bra lösning så varje ruta blir interaktiv och kan t ex tända en text etc i en förlängning.

Bah! Ja.. jag får det att funka för.. en vy i alla fall. ;(

[Elactos]

Ursprungligen postat av HejaMartin

Att få till procenten är klurigt. Speciellt då marginalen skall vara 10px, även om det kommer in folk med stående t ex iPad.

Använd calc() om du vill ha % och margin.

width:calc(100% - 10px);

Så tar den bort 10px av 100%.

[BrainLab]

Enkelt fixat med typ Bootstrap.

[x264]

Ursprungligen postat av jayzee

Det verkar som du försöker återuppfinna image maps.

Nejdå Är väl inte alls samma sak?

Hade bara inte så mycket tid att lägga ner då jag skulle till stan och göra några ärenden.

Vet inte riktigt vad jag gjorde, tänkte det var en liknande effekt som han ville ha som är responsivt.