Float problem i en grid med forskjellige diver

[AnaXyd]

Heisann!

 

Driver å koder opp en nettbutikk nå, og støter på et lite fiffig problem ang selve oversikten eller gridden med produkter.

 

Det ser altså sånn ut:

 

 

 

 

Det som er problemet her, er at det må være mulig å ha forskjellig høyde på hver produkt-div. Bildet har fast høyde, men tekst og lignende forandrer seg jo gjerne. Dette viser seg å være vrient.

 

Derfor uten noe særlig fiksing i dette bildet, så hopper den fjerde produkt-div boksen ned og litt mot høyre. Dere ser ikke hele, men dere ser at den ikke er på sin rette plass.

 

 

Jeg har prøvd følgende:

 

- Gi hele produkt-diven en fast høyde. Dette funker jo egentlig meget bra, men da blir utseendet litt rart på de som ikke har fullt så mye innhold.

 

- Jeg har prøvd med en clear:both fix, uten nytte. Da listet alle produktene seg nedover istedet for bortover

 

 

 

Så jeg vet ikke om noen av dere har forslag? Er det mulig å få til? Eller MÅ man ha en fast høyde på produkt-diven?

[funkyboy]

Nå kommer det litt an på hva du ønsker å få til. Det mest opplagte alternativet er kanskje å ha clear: both på hvert tredje objekt. Dette kan ofte være gunstig, og gi en ryddig effekt (Alle bildene vil på hver rekke komme på linje). Det samme oppnår du forsåvidt med å sette inn hver linje i en egen divider med clearfix- klasse (eller tilsvarende) på. Eller så kan du benytte f.eks. jQuery Masonry, noe som gir deg en annen effekt, hvor blant annet mellomrommene blir benyttet mer effektivt.

 

Edit: skrivefeil.

Endret 23. september 2010 av bardoien

[AnaXyd]

Masonry så ut som det perfekte for meg! Da skal jeg prøve meg på å implementere dette! Takk!

[AnaXyd]

Må bare si det, WOW! For et utrolig konsept! Det funket jaggu meg 100%, og var lett å implementere. Takk for tipset om Masonry!

[Thomas.]

Må bare si det, WOW! For et utrolig konsept! Det funket jaggu meg 100%, og var lett å implementere. Takk for tipset om Masonry!

Dårlig løsning. Lesere må ha aktivert javascript for å se siden korrekt..

 

 

 

[AnaXyd]

Ja, det er jo sant... Har du noe bedre forslag til hvordan jeg kan løse dette?

[Bjonski]

Sikkert litt tungvindt, men det er mulig å lage tre wrappere ved siden av hverandre, da vil innholdet i hver kolonne kunne bevege seg uavhengig av den andre kolonnen.

[funkyboy]

Må bare si det, WOW! For et utrolig konsept! Det funket jaggu meg 100%, og var lett å implementere. Takk for tipset om Masonry!

Dårlig løsning. Lesere må ha aktivert javascript for å se siden korrekt..

 

Hvis ikke brukere har javascript, vil jo strukturen likevel fungere, men boksene vil ikke bli plassoptimalisert. Brukere vil derfor ikke miste noe som helst informasjon, men få en noe annerledes presentasjon. I mine øyne er dette en fullgod erstatning for css, da det pr. dags dato ikke går an å lage tilsvarende uten å benytte tilsvarende teknikk. Ta også i betrakting prosentandel som browser uten javascript, uten at dette er en ren tekstbasert nettleser (som heller ikke støtter css).