Är detta möjligt i css, och vilka möjligheter ser ni?
 

Hej alla CSS-masters.

Jag känner inte att jag vet hur jag skall tackla den här kodningen!!

http://maleryd.se/wp-content/themes/.../img/intro.jpg

Denna skall vara 'responsiv', men inte helt.. eftersom kund-sidan inte är mobil-anpassad.

Men jag vill ändå ha en flexibel bredd på detta mellan 1300 och 968.

Det lättaste vore att förstås bara ha 'en' bild förstås. Men nu vill vi gärna ha mouseover och klick på de olika rutorna.

Jag provade Masonry/jQuery. Men den ordning som blir på de utsparade bilderna blir inte rätt i ordningen.. provade ändå.. för att se om jag var 'so lucky'.

Utmanande att göra denna. Vet inte hur mycket javascript som måste blandas in eller ej.

Någon som ser hur man kan lösa detta? Är inte så haj på 'smart' css.

/ Martin

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/

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

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. ;(

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

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.

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

Så tar den bort 10px av 100%.

Enkelt fixat med typ Bootstrap.