[css][Masonry] Custom Tooltip positioneren

[IMarks]

Ik ben bezig met een foto-pagina die gebruikt maakt van de masonry library.
Deze library is een jQuery script die objecten naast elkaar positioneert en herindeelt zodat
bijvoorbeeld twee 50% hoogte en 50% breede afbeelding naast een 100% hoog en 50% breed item komen.
Source & beter uitleg/voorbeelden zijn hier te vinden: http://masonry.desandro.com/.

Mijn bedoeling is om een custom tooltip uiterlijk te geven op het moment dat er over een afbeelding gegaan wordt.
het probleem echter is dat de parent element (de list-item) geen vaste hoogte en vaste breedte heeft, hierdoor is wordt het element door de browser gezien als 0px X 0px.

Ik heb alle verschillende dingen geprobeerd zoals position relative en child position absolute;
floats, overflow: hidden (maakt bij geen hoogte het element zo hoog als de content (+padding)).
maar het wil niet werken.

Gezien de code nog al lang is maar wel nodig heb ik het even in een jsFiddle geplaats.
deze is hier te vinden: http://jsfiddle.net/mvkleef/MC2zn/2/;
^{Aan de admins: indien het in een code tag moet (omwille van welke reden dan ook), graag even laten weten, ik pas het met plezier aan
gezien de privacy van de foto's zijn de foto's door een paar andere vervangen, hierdoor kan de pagina nog al vreemd overkomen.}

Ik hoop dat iemand mij kan aanwijzen wat ik verkeerd doet of kan zeggen in welke richting ik moet denken.
bij voorbeeld dank alvast.

[Nedra]

Niet om vervelend te doen, maar je jsfiddle is nogal slordig wat het lastig maakt om de fout te herstellen. Haal Masonry binnen via 'add resource' aan de linkerkant, zorg dat je javascript ook daadwerkelijk in het javascript veld staat en mix je html niet met je css. Ook al die svg dingen zijn niet nodig voor deze testcase en de afbeeldingen zijn initieel ook niet te zien in FF (wel in Chrome).

Waar jouw fout zit kan ik dan ook niet precies zien, maar je parent-item hoeft geen vaste hoogte of breedte te hebben. Zorg gewoon dat je afbeeldign en tooltip hetzelfde parent item hebben, positioneer die relative en je tooltip absolute:

http://jsfiddle.net/MC2zn/10/

[ Voor 4% gewijzigd door Nedra op 29-01-2013 20:33 ]

[IMarks]

ziet er duidelijk uit ik zal morgen proberen dit te verwerken in mijn code, hopen dat ik niet tegen dezelfde problemen aan loop als vandaag.

bedankt voor je antwoord (en ook je opbouwende kritiek, ondanks dat sommige hier een hekel aan hebben waardoor ik ook dat zeer).

[IMarks]

Heb het gevonden, jouw jsFiddle wijzigingen hebben geholpen.
De fout zat uiteindelijk in dat de position absolute en top / left op de foto's zaten ipv de container daarvan, waardoor alles op de de position van de li (die zelf 912px x 0) was ging zitten.

Na een directe kopie van de code heeft dit tot het juiste effect geleidt.
enorm bedankt.

[Nedra]

Super, goed om te lezen dat ik van dienst kon zijn . Ik vind Masonry een erg leuk script met veel mogelijkheden. Ik ben sinds kort ook aan het spelen met Isotope, wat erg veel lijkt op Masonry maar nog wat leuke extra functionaliteiten heeft: http://isotope.metafizzy.co/

[IMarks]

Oke bedankt, ziet er goed uit. Heb hem toegevoegd aan mijn bladwijzers, kan hem vast nog wel eens gebruiken.