---

Jeg forsøger at lave et billedgalleri, som skal være fleksibelt mht.
browser-størrelsen. Altså, så hvis vinduet er 640x480 kan der være
fx 5 thumbnails på hver linje, men hvis det er 1024x768 kan der være
måske 8 på hver linje.

Umiddelbart kan jeg se to måder det kan laves på - enten som en
stor <p>, med billederne lige efter hinanden, hvorved de bliver
formateret på samme måde som tekst, eller som <div> med float: left.
Men...

Jeg ønsker at have tekst under nogle af billederne, hvilket for mig
at se medfører at hvert billede skal ind i en div, så teksten
står (centreret) under billedet. Og så bliver de ikke længere
formateret som tekst, men som separate blokke under hinanden.

Float: left virker fint sålænge billederne er lige høje. Men når
der er billeder der er taget i højformat (portræt), går der kludder
i den, fordi browseren ikke opfatter det som en linie, men propper
næste div ind hvor der er plads. Dvs. hvis der er et højformat-
billede midt på første linie, vil anden linie kun have billeder
i den ene halvdel (højre SVJH).

Så kunne man vælge at sætte en fast højde på div'erne, så de
alle sammen bliver lige så høje som et højformat billede + tekst.
Men hvis man så har et helt galleri uden hverken højformat-billeder
eller tekst, bliver der alt for meget luft imellem billederne lodret.
Højden af linien (og dermed afstanden fra top til top) skal altså
tilpasse sig højden af det højeste billede på linien - eller
endnu bedre, det højeste billede på siden, så top-top afstanden
bliver den samme på hele siden.

En tredje mulighed, der opfylder både kravet om tekst under
billederne, og højden der passer til det højeste billede, ville
være at bruge en tabel i stedet - den opfylder bare ikke det første
krav, at antallet af billeder på hver linie skal afhænge af
vindues-størrelsen.

Er det helt umuligt at opfylde (det er jo hele tre ting på en gang),
eller er der et trick jeg har overset?

(Der er tale om validerende XHTML 1.0 Strict).

Mvh
Kent
--
"So there I was surrounded by all these scary creatures
They were even scarier than what Microsoft call features"
- C64Mafia: Forbidden Forest (Don't Go Walking Slow).

---

Kent Friis wrote:


> Så kunne man vælge at sætte en fast højde på div'erne, så de
> alle sammen bliver lige så høje som et højformat billede + tekst.
> Men hvis man så har et helt galleri uden hverken højformat-billeder
> eller tekst, bliver der alt for meget luft imellem billederne lodret.
> Højden af linien (og dermed afstanden fra top til top) skal altså
> tilpasse sig højden af det højeste billede på linien - eller
> endnu bedre, det højeste billede på siden, så top-top afstanden
> bliver den samme på hele siden.

Så vidt jeg kan se er dette den bedste mulighed,
du har. Hvis der virkelig er tal eom småbilleder
i 2:3 eller 3:2 format er forskellen på højden
ikke så stor imellem højformat og tværformat.


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Kent Friis wrote:

> Jeg forsøger at lave et billedgalleri, som skal være fleksibelt mht.
> browser-størrelsen. Altså, så hvis vinduet er 640x480 kan der være
> fx 5 thumbnails på hver linje, men hvis det er 1024x768 kan der være
> måske 8 på hver linje.

Det er den måde jeg selv foretrækker gallerier.
Se http://ekot.dk/www/caption4/ for eksempel.

Jeg har tænkt en del over den problematik du fremstiller og er kommet
frem til to løsninger: Den rigtige og den der vil virke.

Den rigtige er at sætte "display: inline-block". Det virker så bare
ikke med IE: http://www.quirksmode.org/css/display.html#inlineblock
(ikke den store overraskelse der) og kræver -moz-inline-box i Mozilla.

Den der vil virke, men som jeg ikke har taget mig sammen til at prøve
at lave, er at lade et JavaScript løbe gennem siden og sætte højderne
på div med billeder og billedtekst til det samme som de andre divs på
samme linje. Der skal så laves noget genberegning ved ændring af
browserbredden, men det burde være til at håndtere. Det giver også et
brugbart, omen ikke helt så kønt, resultat i browsere uden JavaScript
slået til.
--
Toke Eskildsen - http://ekot.dk/

---

Den 26 Jun 2006 21:45:17 GMT skrev Toke Eskildsen:
> Kent Friis wrote:
>
>> Jeg forsøger at lave et billedgalleri, som skal være fleksibelt mht.
>> browser-størrelsen. Altså, så hvis vinduet er 640x480 kan der være
>> fx 5 thumbnails på hver linje, men hvis det er 1024x768 kan der være
>> måske 8 på hver linje.
>
> Det er den måde jeg selv foretrækker gallerier.
> Se http://ekot.dk/www/caption4/ for eksempel.
>
> Jeg har tænkt en del over den problematik du fremstiller og er kommet
> frem til to løsninger: Den rigtige og den der vil virke.
>
> Den rigtige er at sætte "display: inline-block". Det virker så bare
> ikke med IE: http://www.quirksmode.org/css/display.html#inlineblock
> (ikke den store overraskelse der) og kræver -moz-inline-box i Mozilla.

inline-block? Den havde jeg aldrig hørt om, mange tak.

> Den der vil virke, men som jeg ikke har taget mig sammen til at prøve
> at lave, er at lade et JavaScript løbe gennem siden og sætte højderne
> på div med billeder og billedtekst til det samme som de andre divs på
> samme linje. Der skal så laves noget genberegning ved ændring af
> browserbredden, men det burde være til at håndtere. Det giver også et
> brugbart, omen ikke helt så kønt, resultat i browsere uden JavaScript
> slået til.

Hellere dumpe IE, end begynde at genere folk med at kræve Javascript. Jeg
har i forvejen en ie.css med diverse workarounds, det skulle vel være
muligt at få siden til at se nogenlunde ud...

Mvh
Kent
--
"So there I was surrounded by all these scary creatures
They were even scarier than what Microsoft call features"
- C64Mafia: Forbidden Forest (Don't Go Walking Slow).

---

Kent Friis wrote:

> Hellere dumpe IE, end begynde at genere folk med at kræve
> Javascript.

Pointen er jo netop at det ikke er et krav. Det ser bare mindre godt
ud, hvis der ikke er JavaScript.

Jeg har lavet et hurtigt udkast på http://ekot.dk/www/float2/
--
Toke Eskildsen - http://ekot.dk/

---

Toke Eskildsen wrote:

> Jeg har lavet et hurtigt udkast på http://ekot.dk/www/float2/

Argh! IE har også en bug, der kaster rundt med floats:
http://agachi.name/tests/clearing-floats-into-rows.htm

Det betyder at clear: left ikke virker godt nok, når den bruges på et
floatet element. Jeg har fundet en løsning, men den er godt nok grim:
Når der sættes clear:left på et element, sættes float på forgående
element til none. Dette forhindrer IE i at sætte nogen floats højere
oppe end forgående floats (se Agachi siden).

Puha. Det er nu testet i IE6SP2, Opera 8.54 og Firefox 1.5.0.4 under
Windows XP Pro SP2 og ser ud til at virke, som det skal. Skulle nogen
være interesseret, er de velkomne til at bruge scriptet.
--
Toke Eskildsen - http://ekot.dk/

---

Den 26 Jun 2006 21:45:17 GMT skrev Toke Eskildsen:
>
> Den rigtige er at sætte "display: inline-block". Det virker så bare
> ikke med IE: http://www.quirksmode.org/css/display.html#inlineblock
> (ikke den store overraskelse der) og kræver -moz-inline-box i Mozilla.

Validator'en kender den heller ikke:

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

Til gengæld ser "display: inline" ud til at virke i IE, så den
opfører sig som Opera med "display: inline-block" og Firefox
med "-moz-inline-box".

Mvh
Kent
--
"So there I was surrounded by all these scary creatures
They were even scarier than what Microsoft call features"
- C64Mafia: Forbidden Forest (Don't Go Walking Slow).

---

Kent Friis wrote:

> Validator'en kender den heller ikke:
>
> http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

Det er med i 2.1, der dog stadig kun er draft:
http://www.w3.org/TR/CSS21/visuren.html#display-prop

> Til gengæld ser "display: inline" ud til at virke i IE, så den
> opfører sig som Opera med "display: inline-block" og Firefox
> med "-moz-inline-box".

Når jeg prøver i IE, kan jeg ikke længere angive højde og bredde på
boksene, hvilket jeg tolker som korrekt opførsel.
--
Toke Eskildsen - http://ekot.dk/

---

Kent Friis skrev:

> Jeg forsøger at lave et billedgalleri, som skal være fleksibelt mht.
> browser-størrelsen. Altså, så hvis vinduet er 640x480 kan der være
> fx 5 thumbnails på hver linje, men hvis det er 1024x768 kan der være
> måske 8 på hver linje.

Der er en side om billedgallerier på html-faq.dk:
http://html-faq.dk/2024.asp. Eksemplet kan udmærket bruges. Og jeg tror du
kan jævne linjerne med noget clear:both. Det kan du eksperimentere lidt
med.

--
David Trasbo.
Læs om Usenet: http://usenet.dk

---

David Trasbo wrote:

> Der er en side om billedgallerier på html-faq.dk:
> http://html-faq.dk/2024.asp. Eksemplet kan udmærket bruges.

Der er ikke billedtekst til billederne og i det tilfælde er det ikke
noget problem at få billederne til at stå pænt.

> Og jeg tror du kan jævne linjerne med noget clear:both.

Det kunne måske bruges sammen med JavaScript-ideen... Så ville
algoritmen se nogenlunde således ud:

for alle billedbokse:
- sæt clear: none på den næste billedboks
- hvis den næste billedboks' venstreside er længere til venstre end
den nuværende billedboks' højreside, så sæt clear: left på den
næste billedboks
--
Toke Eskildsen - http://ekot.dk/