Avatar billede jakobdo Ekspert
21. februar 2009 - 11:42 Der er 7 kommentarer og
1 løsning

Float left billede galleri

Hej Eksperter,
jeg sidder og leger med et lille hjemmegalleri af sønnike.
Og jeg har tidligere haft det sådan:

#content { width: 800px;}
Og så hvert div (med billede-thumb og tekst), fast bredde, float:left og ny linje (clear:both) efter hvert 3 billede.

Men nu er det jo ikke alle som har en skærm af en given opløsning.
Så jeg ville gerne bruge ren float og ikke styre noget med nye linjer.

Mit problem er dog følgende:

Linje et bliver ok, men er der et element i linje 1, som er højere end de andre, så starter elemeterne der på linje 2.
Det skal de ikke, det skal gå til ny linje.

Ala:

## ## ## ## ##
## ## ## ## ##
  ##
      ## ## ##
      ## ## ##

Jeg ønsker:

## ## ## ## ##
## ## ## ## ##
  ##

## ## ##
## ## ##

Håber det giver mening.
Galleriet er beskyttet med kodeord, så er ikke meget for at give jer adgang til det, men sig endelig frem, hvad i evt. skal bruge for at guide mig.

Jeg smider gerne kode eller lign herind.
Avatar billede jakobdo Ekspert
21. februar 2009 - 12:01 #1
Hej igen,
jeg har nu lavet en public side, hvor fejlen kan ses:

http://www.codebreaker.dk/leg/galleri.php

Hvis i skifter størrelsen på skærmbilledet, vil i se at nogle gange, så starter linje 2 efter DEN MEGET LANGE TEKST og alså ikke "korrekt" på ny linje helt til venstre.
Avatar billede jakobdo Ekspert
21. februar 2009 - 12:07 #2
Hej igen igen,
det er koden herfra, jeg har bygget lidt videre på: http://alistapart.com/stories/practicalcss/
Avatar billede mstorgaard Praktikant
21. februar 2009 - 12:56 #3
Jeg vil umiddelbart mene, at du kan løse problemet ved at definere en fast højde på hver af dine float-div'er.

Og hvis du vil have den til kun at vise 3 billeder per række, er du nok nødt til at gøre container-div'en smallere (måske 350px).
Avatar billede jakobdo Ekspert
21. februar 2009 - 12:59 #4
Jeg vil jo netop gerne have bredden variabel.
Og højden kan godt komme til at være højere end 350px, så fast højde er ikke godt. :o(
Avatar billede mstorgaard Praktikant
21. februar 2009 - 13:03 #5
Det er jo en enten eller. Enten så benytter du en clear eller også benytter du en fast højde. Ellers skal du ud i noget JavaScript, som udregner højden for dine float-div'er, men det bliver nok endnu mere besværligt.

Hvad med at sætte en begrænsning på længden af tekst, og så sætte den til kun at vise den fulde tekst, når man trykker på billedet?
Avatar billede jakobdo Ekspert
21. februar 2009 - 13:12 #6
Fiksede det med denne løsning: http://hoeben.net/files/aldo/floatgallery/prototype.html
Den havde jeg dog set inden dette spørgsmål, men håbede bare man kunne klare det med rene html/css.

mstorgaard, hvis du vil have point, så smid et svar.
Avatar billede mstorgaard Praktikant
21. februar 2009 - 13:14 #7
Altså at man laver en float-div med en fast størrelse, og så lægger den mindre billede-div ind i float-div'en.

Men behold bare dine point (:
Avatar billede jakobdo Ekspert
22. februar 2009 - 16:54 #8
mstorgaard: Da min tekst kan være forskellig højde, er fast højde ikke løsningen.
Men scriptet gjorde det, så jeg lukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester