Help with CSS based gallery

mark.it.here (AT) gmail (DOT) com wrote:

There's only that thing of the zoom button appearing in front of the
large images.

If I place the "a." before the popup styles, the buttons disappear. So
no solution there.

They don't disappear for me. But no matter.

The problem seems to be your .poptrigger, which also affects the zoom
buttons. Remember, the zoom.gifs are really just <img> elements which
are children of the a.popup. Giving a.popup:hover a z-index of 150
doesn't do anything special for the zoom gifs. But .poptrigger appears
to. (Note: I don't use z-index much, so these are partly results from my
experimenting with your code.)

So remove .poptrigger's z-index: 10; rule from your CSS. (You also have
top:0px and left:0px, which I take to mean for this relative-positioned
element, you want its top shifted 0px and its left edge shifted 0px from
where they would be positioned otherwise. Remove and test.)

You can also remove the z-index: 0; rule from .popup in the CSS. In
fact, I think you can remove the entire ruleset for .popup.

Fix this:
..popup:hover span {
top: 30; /* <== invalid without units; make it 30px */ }

Remove the <!-- and --> malarkey.

And add this to your CSS before the .popup span selector (or at least,
before the .popup span img selector. I'll leave as an exercise for you
(the student ;-) ) to determine what you can remove from the markup.

/* Zoom buttons */
a.popup img {
position: absolute; left: 5px; top: 5px; border:none; }

I also don't think you need the left: -4000px; rule in a.popup span, but
you'll have to test all of this anyway. Only tested in FF with the Web
Developer add-on.

HTH. GL.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

On 2007-08-06, mark.it.here (AT) gmail (DOT) com wrote:

Your popup images extend below the viewport in my browser, and when I
attempt to scroll down to see the whole image, it disappears.

I guess I'll have to make the large pictures a bit smaller, sorry.

No matter how small you make them, there will be someone for whom
they are still too big. If you try to accommodate everyone, you
will end up with pictures so small that there is little point to
having the pop-ups in the first place.


--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Thanks to the input by all of you, specially John Hosking, I've
finally got it to work.

This is what I had to do: Define the z-index inline for each
"poptrigger" giving a lower value for each definition made.

This is a small problem because I have to make some changes in order
to work like a dynamic gallery, but I guess it will work just fine.

I've tested on IE7, IE6, Opera, Firefox and Safari and it's working
fine. So if any of you want to use it for your own projects, feel
free.

Any way, if someone has any idea of improvement (like not using the
inline z-index) just let me know.

Thank you.

--
Rui

No matter how small you make them, there will be someone for whom
they are still too big. If you try to accommodate everyone, you
will end up with pictures so small that there is little point to
having the pop-ups in the first place.

You've got a point there. Some kind of equilibrium must be found.

--
Rui

P.S.

You can find the working solution here:

http://www.myfilestash.com/userfiles/myed/index.html


--
Rui