Gallery positioning query

[KiwiBrian]

I have a small showpic gallery for use within a page.
There are 10 or so thumbnails allowing for any one to be selected to display
a larger version below the thumbnail area on the page.
The displayed larger image can be either portrait or landscape format.
I want it to be centered horizontally within a defined width.
Meaning that the center of either type of image will be located in the same
horizontal position.
I think that I have been forced to use absolute positioning to locate the
image vertically and this seems to be my problem in defining the horizontal
position as being "centered". Meaning that the centre of the image is
centered horizontally, not that it's left edge is centered horizontally.
The page is at:-
http://kiwibrian.freehostia.com/1.html

Help welcomed.

 

[mbstevens]

I have a small showpic gallery for use within a page.
There are 10 or so thumbnails allowing for any one to be selected to display
a larger version below the thumbnail area on the page.
The displayed larger image can be either portrait or landscape format.
I want it to be centered horizontally within a defined width.
Meaning that the center of either type of image will be located in the same
horizontal position.
I think that I have been forced to use absolute positioning to locate the
image vertically and this seems to be my problem in defining the horizontal
position as being "centered". Meaning that the centre of the image is
centered horizontally, not that it's left edge is centered horizontally.
The page is at:-
http://kiwibrian.freehostia.com/1.html

Help welcomed.

That's not all of its problems. When I keep clicking on the
thumbnails in Firefox, the page eventually gets confused and
starts displaying images over each other and displaying the
wrong image for the one clicked.

I would go to a non-javascript way of displaying the full sized
images. Playing with text-align:center in your CSS
will probably help with the problem you have noted.

 

[KiwiBrian]

"mbstevens" wrote in message

That's not all of its problems. When I keep clicking on the
thumbnails in Firefox, the page eventually gets confused and
starts displaying images over each other and displaying the
wrong image for the one clicked.

I would go to a non-javascript way of displaying the full sized
images. Playing with text-align:center in your CSS
will probably help with the problem you have noted.

Thanks for your comment.
I have rechecked viewing the page on the site in Firefox and it behaves
perfectly for me.
I am using version 2.0.0.12 on a Windows XP SP2 system.
Hmmmmmmm.
Lets hope that we get some more comments from others. Hint Hint......

 

[Neredbojias]

Thanks for your comment.
I have rechecked viewing the page on the site in Firefox and it
behaves perfectly for me.
I am using version 2.0.0.12 on a Windows XP SP2 system.
Hmmmmmmm.
Lets hope that we get some more comments from others. Hint Hint......

Er, no offense, but you probably have twice as much coding/markup there
as you need. Using a canned script? -It looks like it.

Anyway, what do you mean by the line "I think that I have been forced to
use absolute positioning to locate the image vertically"? Doesn't the
image (en-dived) follow the thumbs with static positioning? Basically,
you need only one "catch" container for all the link images with simple
centering styling. The "goal" of the page should be a cinch with
javascript.

 

[Ben C]

I have a small showpic gallery for use within a page.
There are 10 or so thumbnails allowing for any one to be selected to display
a larger version below the thumbnail area on the page.
The displayed larger image can be either portrait or landscape format.
I want it to be centered horizontally within a defined width.
Meaning that the center of either type of image will be located in the same
horizontal position.
I think that I have been forced to use absolute positioning to locate the
image vertically and this seems to be my problem in defining the horizontal
position as being "centered". Meaning that the centre of the image is
centered horizontally, not that it's left edge is centered horizontally.
The page is at:-
http://kiwibrian.freehostia.com/1.html

You've set the images to be always 200px from the left.

In your selector for .div1, lose left: 200px and replace it with:

left: 0;
right: 0;
margin: 0 auto;

That will centre .div1 in its container by solving for the auto left and
right margins under the constraint that they get equal values.

I don't know who forced you to use absolute positioning, but I can't see
that you need it. If you get rid of position: absolute and top: 240px
then the div will be in the right vertical position automatically. Then
lose "left: 0; right: 0;" but keep "margin: 0 auto" and it will still be
centered.

This also works better if the user sets a big font-size. If they do,
then suddenly 240px isn't enough, and you'll find the image on the
bottom overlapping the thumbnails.

I also don't think it's necessary to set z-index: 1 on .div1-- you don't
need to change its stacking level from the default, even if you don't
absolute position it.

 

[Neredbojias]

Er, no offense, but you probably have twice as much coding/markup there
as you need. Using a canned script? -It looks like it.

Okay, that canned crap j/s incited me, so I "contrived" my own. See how
you like this adjustment, and note the relative size of the j/s to the
original...

http://www.neredbojias.com/ktest/kiwi.html

You don't really need width/height for the linked images, but if you really
want them you can include additional parameters in the function.

Btw (tsk, tsk,) use a strict doctype.

 

[KiwiBrian]

Okay, that canned crap j/s incited me, so I "contrived" my own. See how
you like this adjustment, and note the relative size of the j/s to the
original...

http://www.neredbojias.com/ktest/kiwi.html

You don't really need width/height for the linked images, but if you
really
want them you can include additional parameters in the function.

Btw (tsk, tsk,) use a strict doctype.

Thanks heaps N. for this incredibly interesting reply.
Re Doctype, I was under the impression that while you are of course correct
in theory, in practice there were some minor browser inconsistancies that
meant that the one that I used was a way of avoiding these. I may be wrong.
Re the gallery. I am having trouble understanding/believing/accepting that
it can really be as simple as you propose.
I have little doubt that you are right, and on a casual look it seems too
good to be true, but I will check it out in depth overnight and let you know
tomorrow whether you are "THE KING OF CODE."
Well, for the day anyway.....
Thanks again for your trouble.

 

[mbstevens]

"mbstevens" wrote in message


Thanks for your comment.
I have rechecked viewing the page on the site in Firefox and it behaves
perfectly for me.
I am using version 2.0.0.12 on a Windows XP SP2 system.
Hmmmmmmm.
Lets hope that we get some more comments from others. Hint Hint......

You might try clicking on several before the last ones have had
time to completely load.

 

[Neredbojias]

Re Doctype, I was under the impression that while you are of course
correct in theory, in practice there were some minor browser
inconsistancies that meant that the one that I used was a way of
avoiding these. I may be wrong.

Well, you're basically right but the idea is to catch those
"inconsistencies" and correct them to better-formulated markup I think.
Anyway, contrary to normal developments, most people here agree with me on

Re the gallery. I am having trouble
understanding/believing/accepting that it can really be as simple as
you propose.
but I will check it out in depth

Good. That's what you should do.

 

[KiwiBrian]

Good. That's what you should do.

It is superb .... Superb......SUPERB!!!!
Again many thanks.