positioning an image on a gallery page

[RoseW]

This is a collection of images with its own style sheet to create the hover
over the thumbnail and the larger image appears.
http://www4.webng.com/chesleyhs/imag.../Planting.html
Narrow images stay over to the right rather than being in the middle over
even in the same spacing as the wider images. The two images at the bottom
are the examples

Is there a way of having some information in the stylesheet to accomodate if
is a narrow image of the 400 x 640 pixel sizing?

This is the stylesheet (gal.css)

#logo {background:#9c9c7f;}
#showcase {background:#ffffff; width:100%}
#foot {background:#9c9c7f;}
#wrapper, #content, #far_right {border-bottom:1px solid #664;}
#gallery {position:relative; width:95%;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:100px;
height:80px; border:1px solid #000;}
#thumbs a img {width:100px; height:80px; border:0;}
#thumbs a:hover {border-color:#ddd;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; right:5px;
top:0; border:1px solid #333;}
..pageLink { font-family:Arial, sans-serif; font-weight:bold; font-size:95%;
color:#9F2D00; padding:10px; }
..prev {float:left;}

Rose

[Andy Dingley]

On 20 Jun, 15:06, "RoseW" <[e-mail]:

This is a collection of images with its own style sheet to create the hover
over the thumbnail and the larger image appears.
http://www4.webng.com/chesleyhs/imag.../Planting.html

Is there a way of having some information in the stylesheet to accomodate if
is a narrow image of the 400 x 640 pixel sizing?

Looks promising!

I'd change bits of your HTML to something like this:

<ul class="thumbs">
<li><a href="#"><img src="9606Elliotpark1_thumb.jpg" title="..."
alt="..." ><span><img src="9606Elliotpark1_fullsize.jpg" title="..."
alt="..." ></span></a></li>

[...]

</ul>

and CSS that looks like this

..thumbs span {
display: none;
}
..thumbs a:hover span {
display: block;
width: 680px;
text-align: center;
}

This has the following differences:

* There's a separate thumbnail and full-size image. Client-side
resizing of "dumbnails" is poor quality, can't crop and dooes nothing
to improve download speeds

* Flip the display of a container element (<span>) around the <img>,
rather than moving and re-sizing the <imgitself. This means you can
set the container size once and for all, then place the varying images
and any captioning inside it.

* Set display:block on the <spanrather than using a <div>. This
keeps the HTML valid (can't nest <divinside <a>)

* Use class not id on "large scale" features of a page. It makes the
CSS selectors simpler.

* You'll still need to position the <span Either use position
absolute (which I hate), or position it relative to the <liparent
and fiddle with the <li>s themselves so that they all start from the
same place.
You can probably work out the rest of the CSS for yourself, otherwise
ask.

[Andy Dingley]

On 20 Jun, 15:06, "RoseW" <[e-mail]:

This is a collection of images

Incidentally, another reason to have two images and show/hide the big
one rather than moving and resizing it would be to avoid the current
effect where it hides from the thumbnail bar whenever you highlight
it.

Although if you document this "bug" and call it a "feature", you've
made yourself one of the more effective "Anti image-saving" scripts
I've seen so far 8-)

[RoseW]

Andy Dingley wrote:
| On 20 Jun, 15:06, "RoseW" <[e-mail]:
|| This is a collection of images with its own style sheet to create
|| the hover over the thumbnail and the larger image appears.
|| http://www4.webng.com/chesleyhs/imag.../Planting.html
|
|| Is there a way of having some information in the stylesheet to
|| accomodate if is a narrow image of the 400 x 640 pixel sizing?
|
| Looks promising!
|
| I'd change bits of your HTML to something like this:
|
| <ul class="thumbs">
| <li><a href="#"><img src="9606Elliotpark1_thumb.jpg" title="..."
| alt="..." ><span><img src="9606Elliotpark1_fullsize.jpg" title="..."
| alt="..." ></span></a></li>
|
| [...]
|
| </ul>
|
| and CSS that looks like this
|
| .thumbs span {
| display: none;
| }
| .thumbs a:hover span {
| display: block;
| width: 680px;
| text-align: center;
| }
|
| This has the following differences:
|
| * There's a separate thumbnail and full-size image. Client-side
| resizing of "dumbnails" is poor quality, can't crop and dooes nothing
| to improve download speeds
|
| * Flip the display of a container element (<span>) around the <img>,
| rather than moving and re-sizing the <imgitself. This means you can
| set the container size once and for all, then place the varying images
| and any captioning inside it.
|
| * Set display:block on the <spanrather than using a <div>. This
| keeps the HTML valid (can't nest <divinside <a>)
|
| * Use class not id on "large scale" features of a page. It makes the
| CSS selectors simpler.
|
| * You'll still need to position the <span Either use position
| absolute (which I hate), or position it relative to the <liparent
| and fiddle with the <li>s themselves so that they all start from the
| same place.
|
|
| You can probably work out the rest of the CSS for yourself, otherwise
| ask.

Thank you for the speedy reply.
I noted that the thumbnails lost quality if the original image sizing or
orientation changed and wondered what would be a remedy. I was trying to
keep things 'simple' in this image presentation but its a good point to have
quality thumbnails for some folks just look at the thumbnails and perhaps
pick one. This hover style may not be all that fine for dial up users.

I'll play around with the <lipossibilty. The way it is at the moment no
captions are possible so 'flip the display of a container element(<span>)
around teh <imgwould be useful.
At least there are possiblities <grin>
Rose

[Andy Dingley]

On 20 Jun, 15:06, "RoseW" <[e-mail]:

This is a collection of images with its own style sheet to create the hover
over the thumbnail

I posted this before, but Bloody Evil Google ate it.

Don't use this as an image display page, as the need to actively
_hover_ the mouse makes it very inaccessible. Use it for a navigation
menu if you want, but let people select page-by-page where they want
to go and which image to look at. You can use SSI to embed this nav
bar onto all of them.

You might also like to look here:
<http://codesmiths.com/dingbat/lj/usenet/sidebar_gallery/>
(Can you tell I've got a deadline to be avoiding?)

[RoseW]

Andy Dingley wrote:
| On 20 Jun, 15:06, "RoseW" <[e-mail]:
|| This is a collection of images with its own style sheet to create
|| the hover over the thumbnail
|
| I posted this before, but Bloody Evil Google ate it.
|
| Don't use this as an image display page, as the need to actively
| _hover_ the mouse makes it very inaccessible. Use it for a navigation
| menu if you want, but let people select page-by-page where they want
| to go and which image to look at. You can use SSI to embed this nav
| bar onto all of them.
|
| You might also like to look here:
| <http://codesmiths.com/dingbat/lj/usenet/sidebar_gallery/>
|
|
| (Can you tell I've got a deadline to be avoiding?)

I have a 'lazy' special interest group <lolThese viewers in the plant
group and associated friends love hover and not clicking next to go to the
next page. One did mention that an image could not be saved. I hadn't
thought of any of them wanting to save an image. For me it has been a simple
way to put up a small number of images.

My you threw that sample together 'toute suite' ( I copied it) I had done a
redo using the <liand even after reading over the W3C info on <lithe
only way I could see to eliminate having a black dot beside each thumbnail
was to use <dl class="thumbs">and <dd>

You did get the narrow images more centrered which was the fine tuning that
I was looking for <grin>

It has been a good first posting the this newsgroup topic. I've been lurking
for a long time ~)
Rose

[RoseW]

Andy Dingley wrote:
| On 20 Jun, 15:06, "RoseW" <[e-mail]:
|| This is a collection of images with its own style sheet to create
|| the hover over the thumbnail
|
| I posted this before, but Bloody Evil Google ate it.
|
| Don't use this as an image display page, as the need to actively
| _hover_ the mouse makes it very inaccessible. Use it for a navigation
| menu if you want, but let people select page-by-page where they want
| to go and which image to look at. You can use SSI to embed this nav
| bar onto all of them.
|
| You might also like to look here:
| <http://codesmiths.com/dingbat/lj/usenet/sidebar_gallery/>
|
|
| (Can you tell I've got a deadline to be avoiding?)

I inserted this class into your 'inline css style'
..content{
margin: 0 200px 10px 200px;
padding: 2px;
background-color: #e4f5f6;
position: relative;
z-index: 3;
width: auto;
min-width: 120px;
}
This provides for a short statement at the top of the page and is over the
images as they appear. It has to be a short statement otherwise this
'content' will float overtop of the image<grin>
Where the image is located as a result of your work is fine and the narrow
image is more in the centre. Overall, I will need to be more conscious of
having similar width images in the future.
Thanks for your input.
Rose