Kom ihåg mig?

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

Ämnesverktyg Visningsalternativ
Oläst 2015-02-04, 12:32 #1
HejaMartin HejaMartin är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2010
Inlägg: 19
HejaMartin HejaMartin är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2010
Inlägg: 19
Standard Ä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
HejaMartin är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 13:15 #2
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
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

Senast redigerad av x264 den 2015-02-04 klockan 13:21
x264 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 14:23 #3
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
Citat:
Ursprungligen postat av x264 Visa inlägg
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/
x264 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 15:01 #4
jayzee jayzee är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: Aug 2008
Inlägg: 1 089
jayzee jayzee är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: Aug 2008
Inlägg: 1 089
Citat:
Ursprungligen postat av x264 Visa inlägg
Är det denna effekten du är ute efter?

http://jsfiddle.net/et1gz52a/4/
Det verkar som du försöker återuppfinna image maps.
jayzee är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 17:32 #5
HejaMartin HejaMartin är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2010
Inlägg: 19
HejaMartin HejaMartin är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2010
Inlägg: 19
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. ;(
HejaMartin är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 20:15 #6
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
x264 x264 är inte uppkopplad
Flitig postare
 
Reg.datum: Dec 2013
Inlägg: 342
Citat:
Ursprungligen postat av jayzee Visa inlägg
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.
x264 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-02-04, 21:49 #7
Elactos Elactos är inte uppkopplad
Nykomling
 
Reg.datum: Sep 2007
Inlägg: 38
Elactos Elactos är inte uppkopplad
Nykomling
 
Reg.datum: Sep 2007
Inlägg: 38
Citat:
Ursprungligen postat av HejaMartin Visa inlägg
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.

Kod:
width:calc(100% - 10px);
Så tar den bort 10px av 100%.
Elactos är inte uppkopplad   Svara med citatSvara med citat
Oläst 2015-03-05, 21:30 #8
BrainLab BrainLab är inte uppkopplad
Hej, jag är ny här.
 
Reg.datum: Sep 2014
Inlägg: 1
BrainLab BrainLab är inte uppkopplad
Hej, jag är ny här.
 
Reg.datum: Sep 2014
Inlägg: 1
Enkelt fixat med typ Bootstrap.
BrainLab är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 
Ämnesverktyg
Visningsalternativ

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 13:28.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017