---

Hej igen.

I mine utallige forsøg på at få nogle ting til at virke er jeg stødt på et
problem, som jeg ikke kan finde ud af.

For at kunne rode med noget clipping, har jeg åbenbart behov for at have en
position:absolute.

Det har jeg så gjort ved at lægge en ekstra div uden om min image div.
Minimalt eksempel her:
<http://w-o-p-r.dk/gallery/test.html>

Uanset hvad jeg har prøvet, så lægger billederne sig oven i hinanden i
venstre side når jeg sætter position:absolute.

I eksemplet her har jeg udkommenteret position:absolute, så de står ikke
samlet umuddelbart.

Det er lavet med absolutte URL'er, så man kan gemme den direkte på disk.
Eller i FF med Webdeveloper, gå ind og editere i CSS'en.

Da jeg synes jeg har prøvet alle mulige kombinationer, bliver jeg nødt til
at spørge:
Kan det overhovedet lade sig gøre at have en 'stribe' samtidig med absolut
positionering?

Hvis ja - hvad er så det hemmelige voodoo-trick, der skal til?

Jeg har stort set opgivet, men det kunne være der var en, der kender
'tricket'.

Gennem tiderne har jeg stort set kun lavet table layout, så CSS er noget af
en jungle for mig, så det må godt skæres nogenlunde ud i pap

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:

> Uanset hvad jeg har prøvet, så lægger billederne sig oven i hinanden i
> venstre side når jeg sætter position:absolute.

Det er klart. Det har du bedt om.

position:absolute ;
top:0px;
left:0px;

Der står at de alle sammen skal starte på præcis samme position.

Ved absolut positionering skal man angive placeringen, og det
betyder at du enten må style hvert billede separat eller opgive
absolut positionering.

En detalje uden betydning:¨
Hvis en værdi er 0, behøver man ikke angive enhed. 0px = 0.


--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

On 23 Okt., 08:06, Bertel Lund Hansen <unosp...@lundhansen.dk> wrote:
> Stig Johansen skrev:
>
> > Uanset hvad jeg har prøvet, så lægger billederne sig oven i hinanden i
> > venstre side når jeg sætter position:absolute.
>
> Det er klart. Det har du bedt om.
>
>       position:absolute ;
>       top:0px;
>       left:0px;
>
> Der står at de alle sammen skal starte på præcis samme position.
>
> Ved absolut positionering skal man angive placeringen,

Jeg har brugt position: absolute mange gange (bl.a. for at please
IE6), og uden at angive placeringen.

Well, det har dat virket.


MVH
Rune Jensen

---

Rune Jensen wrote:

> Jeg har brugt position: absolute mange gange (bl.a. for at please
> IE6), og uden at angive placeringen.
>
> Well, det har dat virket.

Har du et _brugbart_ eksempel, fremfor bare at postulere:
"Well, det har dat virket."?
(Det er ikke min opgave at lave korrektur

--
Med venlig hilsen
Stig Johansen

---

Bertel Lund Hansen wrote:

> Stig Johansen skrev:
>
>> Uanset hvad jeg har prøvet, så lægger billederne sig oven i hinanden i
>> venstre side når jeg sætter position:absolute.
>
> Det er klart. Det har du bedt om.
>
> position:absolute ;
> top:0px;
> left:0px;

Ja, det er netop det jeg har brug for, ellers virker clipping tilsyneladende
ikke.

Jeg har også prøvet position:absolute uden angivelse af top og left.

> Der står at de alle sammen skal starte på præcis samme position.

Ja, men i forhold til specs, så burde de vel starte samme sted i forhold til
parent, og ikke i forhold til vinduet(?)

> Ved absolut positionering skal man angive placeringen, og det
> betyder at du enten må style hvert billede separat eller opgive
> absolut positionering.

Det har jeg stort set også opgivet, da det tilsyneladende ikke kan lade sig
gøre jfr. dit svar.

Hvis det er nødvendigt at give de enkelte placeringer i forhold til vinduet,
så dropper jeg det, men det kan da ikke være rigtigt at browsere er så
primitive - eller er de?

> En detalje uden betydning:¨
> Hvis en værdi er 0, behøver man ikke angive enhed. 0px = 0.

I know - og på samme måde med trailing ';' - men det er noget nemmere at
copy/cut'n paste hvis man har det med.

--
Med venlig hilsen
Stig Johansen

---

On 23 Okt., 10:14, Stig Johansen <wopr...@gmaill.com> wrote:
> Rune Jensen wrote:
> > Jeg har brugt position: absolute mange gange (bl.a. for at please
> > IE6), og uden at angive placeringen.
>
> > Well, det har dat virket.
>
> Har du et _brugbart_ eksempel, fremfor bare at postulere:
> "Well, det har dat virket."?
> (Det er ikke min opgave at lave korrektur

Ikke her, hvor jeg er på arbejde.

Postulatet går på, om man kan få samme virkning som position:absolute
både med og uden placering. Korrekt?

Når jeg kommer hjem.


MVH
Rune Jensen

---

On 23 Okt., 08:06, Bertel Lund Hansen <unosp...@lundhansen.dk> wrote:

> Ved absolut positionering skal man angive placeringen,

Hvordan er du nået til den konklusion? Har du f.eks. eksempler... som
så ikke virker, fiordi placering ikke er angivet?

Følgende:

position: absolute;
z-index: 100;
display: block;
width: 200px;


og

position: absolute;
z-index: 100;
display: block;
width: 200px;
left: 100px;
top: 100px;


Bør helt klart give samme resultat, bortset fra, at positionen er ikke
ens (selvfølgelig ikke). Men i begge tilfælde, vil det kunne stackes.


MVH
Rune Jensen


MVH
Rune Jensen

---

Stig Johansen skrev:

> Gennem tiderne har jeg stort set kun lavet table layout, så CSS er noget af
> en jungle for mig, så det må godt skæres nogenlunde ud i pap

Meget af det har jeg jo ikke rørt længe, så jeg kører en del på
hukoommelse efter "hvad der virker". Men er det noget, jeg er inde i,
vil jeg gerne forklare.

Jeg antager, du vil have position:absolute pga. mulighederne for stacking.

Du skal vel så have position: absolute på img...? ikke den omsluttende DIV?

Har du forsøgt display: table-cell? Lige denne er jeg ikke inde i, men
rent logisk, så er det jo celler, man smækker ved siden af hinanden.

Virker ikke i IE6, men det er der som regel råd for.


Jeg har din kode inde, og sidder pt. og kigger på den.

Det ser foreløbig sådan her ud:
http://webdesigngruppen.dk/test/galleri.html

Det virker i Opera, men ikke i FF (de to kan altså bare ikke li hinanden).



NB: Jeg kiggede på W3C igår igen-igen, og hvis man nu lægger billederne
i en ordnet liste, så kan man få automatisk nummerering på vha. start
eller value attribute. Måske en idé - ved bare ikke, om de er forældede.


MVH
Rune Jensen

---

Stig Johansen skrev:
> Hej igen.
>
> I mine utallige forsøg på at få nogle ting til at virke er jeg stødt på et
> problem, som jeg ikke kan finde ud af.
>
> For at kunne rode med noget clipping, har jeg åbenbart behov for at have en
> position:absolute.
>

Jeg tror jeg sidder og roder lidt med det samme.
Mit roderi er fremkaldt af en tidligere diskussion
om betimeligheden af de JavaScript modulbiblioteker
der skal for at frembringe Ligtbox-effekten.

Min ambition er at lave en slags Lightbox med
med med clipping-effekt i stedet for fadein, fadeout.
clip-egenskaben er en fuldt ud understøttet CSS2.1
egenskab i modsætning til CSS3 egenskaben opacity.


> Jeg har stort set opgivet, men det kunne være der var en, der kender
> 'tricket'.
>
> Gennem tiderne har jeg stort set kun lavet table layout, så CSS er noget af
> en jungle for mig, så det må godt skæres nogenlunde ud i pap
>

Det kan godt være, at jeg ikke helt har forstået
spørgsmålet, men her er i hvert fald lidt neon-bukning:

Et antal elementer med en given bredde vil stille sig ved
siden af hinanden, hvis de forsynes med float-egenskaben.
Hvis der er flere af den slags elementer, end der er plads
til på den givne linje, vil det første element for meget
flyde ned i næste linjes margin.
Case in point:
http://webdesign101.dk/galleri/eksempler/galleri_4.php

Hvis du har en således float'et div.float og denne
yderligere har egenskaben position:relative, vil
et element float.div img kunne positioneres absolut
i forhold div.float. Et sådant billede er direkte
tilgængeligt for clip-egenskaben. Der er ikke nogen
særlig grund til at bruge en ekstra div.

Som Rune antyder kan du også bruge
table-cell egensskaben:

..pixdiv {table-cell; width:whatever; height: whatever;}

Ulempen ved det er det sædvanlige, at du ikke kan
have et varierende antal biller alt efter browser-
vinduets bredde; Og i praksis ubrugeligt fordi
IE<8 ikke forstår en dyt af CSS table egenskaberne.
Så derfor skal du alligevel lave et float-baseret
system til den browser.

Mere om CSS table egenskaberne her:
http://webdesign101.dk/www/layout/
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen wrote:

> Jeg tror jeg sidder og roder lidt med det samme.
> Mit roderi er fremkaldt af en tidligere diskussion
> om betimeligheden af de JavaScript modulbiblioteker
> der skal for at frembringe Ligtbox-effekten.

Det er sådan set også årsagen til mit roderi.

Jeg har ikke til hensigt at lave et 'flot' galleri, blot at lave nogle
forskellige javascript 'ting', der ikke fylder så meget.

> Min ambition er at lave en slags Lightbox med
> med med clipping-effekt i stedet for fadein, fadeout.
> clip-egenskaben er en fuldt ud understøttet CSS2.1
> egenskab i modsætning til CSS3 egenskaben opacity.

Min ambition er at lave et konfigurerbart galleri, hvor man kan vælge mellem
'splash', dvs. direkte udskiftning eller fade-in/fade-out, hvor det bliver
styret af opacity.
Disse to ting virker både i FF og IE6.

> Det kan godt være, at jeg ikke helt har forstået
> spørgsmålet, men her er i hvert fald lidt neon-bukning:

Tak for forklaringen.
Jeg havde fået løsningen af Rune inden jeg læste her, så jeg har ikke
nærstuderet forklaringen (endnu).

Problemstillingen overordnet er, jeg havde 2 visningsformer til thumbnails.
1) Alle thumbnails er lige brede, hvilket medfører varierende højder.
2) Alle thumbnails har en max højde, hvilket medfører varierende bredder.

clip kommer så ind, hvor jeg gerne vil have en 3 form:
3) Alle thumbnails er lige brede, men bliver clip'et til en max højde, som
medføre at visningen af thumbnails er lige store, dog ser man kun den
øverste del hvis den er for høj.
Ved mouseover fjernes clip, og der zoomes.

Jeg ved ikke om det er et krav, men jeg kunne kun få clip til at virke hvis
elementet var absolut positioneret.

Deraf mit problem - altså at få lavet en 'stribe', som aliggevel er absolut
positioneret.

Det er nu løst, så jeg kan komme videre med noget JS.

Nu du nævner det, så havde jeg egenligt også en plan om en 3. metode til
skift, som netop baserer sig på clip.

Men jeg kom i tanke om, at det kun vil se ordentlig ud hvis alle billeder
har samme størrelse.

Det kan godt være jeg laver det alligevel, så må man bare sørge for de
uploadede billeder altid har samme størrelse.

Nu må vi se ad.

Men tak for hjælpen.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen har bragt dette til os:
8X
> Jeg ved ikke om det er et krav, men jeg kunne kun få clip til at virke hvis
> elementet var absolut positioneret.
8X

clip virker kun på absolut positionerede element. jfr
http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> clip virker kun på absolut positionerede element. jfr
> http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Tak, så er det åbenbart sådan.
Den beskrivelse jeg havde af clip nævnte godt nok noget om IE4 men ikke
noget om andre.

Jeg er glad for det er sådan, for ind imellem frygtede jeg, at jeg bare ikke
forstod clip, og alt det roderi med absolute var forgæves ;)

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen:
> Birger Sørensen wrote:
>
>> clip virker kun på absolut positionerede element. jfr
>> http://www.w3.org/TR/CSS21/visufx.html#propdef-clip
>
> Tak, så er det åbenbart sådan.
> Den beskrivelse jeg havde af clip nævnte godt nok noget om IE4 men ikke
> noget om andre.
>
> Jeg er glad for det er sådan, for ind imellem frygtede jeg, at jeg bare ikke
> forstod clip, og alt det roderi med absolute var forgæves ;)

Nej clip skal være på absolut positionerede.
Lidt underligt, syntes jeg, og jeg mener heller ikke det altid har
været sådan - men det kan være det er længe siden...

Og jeg er helt enig - somme tider sidder man og er ved at tro man har
mistet jordforbindelsen, og ingenting gør som forventet og/eller
beskrevet. Så er det rart med en forklaring - eller i det mindste at
vide at tingene *skal* opføre sig "besværligt"...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Jørgen Farum Jensen wrote:

> Det kan godt være, at jeg ikke helt har forstået
> spørgsmålet,

Det var nok heller ikke så godt formuleret, for jeg havde prøve med alle
mulige kombinationer (synes jeg).

Nu har jeg fået teknikken til at virke, og hvis du kigger her, er det
nemmere at forklare:
<http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryName=wdg2009&GalleryOwner=Stig%20Johansen>
og ser billede nr. 2 og det sidste, så er de clip'et, så de ikke rager ud
over bunden.

Det var for at kunne bruge .clip jeg havde brug for absolut position.

Men uanset hvad jeg prøvede, så blev de lagt oven i hinanden, og dermed vist
som et billede.

Så principielt var problemstillingen:
Hvordan kunne jeg bruge .clip på 'floatede' elementer.

Jeg kopiererede noget af CSS'et fra Runes løsning, og så virkede det, men
jeg har ikke styr på hvad der er centralt, og hvad der evt. er i overskud.

Jeg har lidt forskellige varianter
<http://w-o-p-r.dk/gallery/>
som jeg ligger og tester på.

Målsætningen er, at så meget som muligt er angivet som parametere i
databasen.

Hvis der er nogen der kigger, så er det testdata, og der kan forekomme
forvrængede billeder undervejs.

Det skyldes manglende oprydning.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:

> Jeg har lidt forskellige varianter
> <http://w-o-p-r.dk/gallery/>
> som jeg ligger og tester på.

Det ser lovende ud. Stadig visse problemer i Opera, men der er et par
billeder, som ser ud tl at klare den uden flicker ved hover på
thumbnail, både hvis man hover dem fra venstre og fra højre side.

De to sidste billeder her yderst til højre:
http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryName=wdg2009&GalleryOwner=Stig%20Johansen

klarer den fint, hvilken man så vælger først.


MVH
Rune Jensen

---

Rune Jensen skrev:

> De to sidste billeder her yderst til højre:
> http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryName=wdg2009&GalleryOwner=Stig%20Johansen
>
>
> klarer den fint, hvilken man så vælger først.

OK, det har åbenbart noget at sige, hvor hurtigt, man fører pilen forbi
det sted, hvor de overlapper. Går det for langsomt, så hopper det lidt.
Men stadig bedre end før.


MVH
Rune Jensen

---

Rune Jensen wrote:

> Stadig visse problemer i Opera,

Fint nok, Rune, men kan vi ikke lige glemme Opera i første omgang?

Det er ikke ris+ros - gruppen, men mere nogle operationelle spørgsmål jeg
stiller, og ikke browserspecifikt.

Opera har tydeligvis nogle særheder (jfr input), men det er vel ikke det/den
man skal tænke på i første omgang - eller ?

Hvis jeg (i min optik) kan få skidtet til at virke i FF og IE, så er man
langt hen ad vejen - Opera eller ej.

Ikke at jeg vil diskriminere nogle browsere, men hvis det virker i
mainstream, så er det vel ok...

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Stadig visse problemer i Opera,
>
> Fint nok, Rune, men kan vi ikke lige glemme Opera i første omgang?
>
> Det er ikke ris+ros - gruppen, men mere nogle operationelle spørgsmål jeg
> stiller, og ikke browserspecifikt.
>
> Opera har tydeligvis nogle særheder (jfr input), men det er vel ikke det/den
> man skal tænke på i første omgang - eller ?
>
> Hvis jeg (i min optik) kan få skidtet til at virke i FF og IE, så er man
> langt hen ad vejen - Opera eller ej.
>
> Ikke at jeg vil diskriminere nogle browsere, men hvis det virker i
> mainstream, så er det vel ok...

Nej, det er helt OK... Jeg venter bare ;)


MVH
Rune Jensen

---

Stig Johansen skrev:

> Så principielt var problemstillingen:
> Hvordan kunne jeg bruge .clip på 'floatede' elementer.
>
> Jeg kopiererede noget af CSS'et fra Runes løsning, og så virkede det, men
> jeg har ikke styr på hvad der er centralt, og hvad der evt. er i overskud.
>
> Jeg har lidt forskellige varianter
> <http://w-o-p-r.dk/gallery/>
> som jeg ligger og tester på.

Det er smart nok, når det nu er ensartede
småbilledstørrelser, du vil præsentere.

Du får måske et problem med, hvor repræsentativt
småbilledet er, så om metoden er bedre end småbilleder
med forskellige (måske kun 2 forskellige) højde/bredde-
forhold er jeg noget i tvivl om.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen wrote:

> Du får måske et problem med, hvor repræsentativt
> småbilledet er, så om metoden er bedre end småbilleder
> med forskellige (måske kun 2 forskellige) højde/bredde-
> forhold er jeg noget i tvivl om.

Nu skal du tage disse eksempler med et vist gran salt.

Mit hobbyprojekt går kun ud på at lave et database - og parameterstyret -
system, hvor man selv kan vælge hvilken 'præsentationstype' man vil have,
samt nogle timing/zoom/fading parametre m.m.

I bund og grund afhænger outputtet af inputtet (GIGO), så hvis alle billeder
har samme aspect ratio, så vil alle 'miniaturer' se ens ud.

Men for at udforske nogle muligheder, så har jeg uploadet vildt forskellige
størrelser og aspect ratios.

--
Med venlig hilsen
Stig Johansen

---

Jørgen Farum Jensen wrote:

> .pixdiv {table-cell; width:whatever; height: whatever;}

Der mangler du da vist noget:

..pixdiv {display:table-cell; width:whatever; height: whatever;}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk

---

Erik Ginnerskov skrev:
> Jørgen Farum Jensen wrote:
>
>> .pixdiv {table-cell; width:whatever; height: whatever;}
>
> Der mangler du da vist noget:
>
> .pixdiv {display:table-cell; width:whatever; height: whatever;}
>
Absolut. Dit rettelse er helt korrekt.

En lille tilføjelse: Så vidt jeg lige kan huske, skal
..pixdiv være
indeholdt i en
div.container {display:table;}
samt, hvis der er tale om flere rækker,
div.row {display:table-row;}

Men suk, så længe vi skal trækkes med
IE<8 skal vi alligevel lave en float-
løsning i det mindste for disse browsere.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen skrev:

> En lille tilføjelse: Så vidt jeg lige kan huske, skal
> .pixdiv være
> indeholdt i en
> div.container {display:table;}
> samt, hvis der er tale om flere rækker,
> div.row {display:table-row;}

Jeg sad og legede med display:table-cell for nylig, og her havde jeg
ikke nogen omsluttende <div> med display: table;
Kun en <div> med display: table-row; (netop fordi der kom noget under
"tabellen").

Det fungerede fint i både IE8, FF 3.5 (jeg har ingen ældre FF ved
hånden), Opera og Safari.

> Men suk, så længe vi skal trækkes med
> IE<8 skal vi alligevel lave en float-
> løsning i det mindste for disse browsere.

Og her måtte jeg så ud i at smide en CC for IE<=7, hvor der blev
floatet. Her hjalp den omsluttende display:table-row; mig dog, for den
kunne jeg bare i IE7-CSS'en sætte som clear: both;.

--
Philip - http://chartbase.dk | http://www.hitsurf.dk