thumbnails

[Ken]

I am in the process of designing my first web-site, and am having a problem
with my picture gallery. My thumbnails are all different sizes, I would
like them to be one size. The manual does not address this situation.
Where did I go wrong?

[Evertjan.]

Ken wrote on 21 jul 2003 in comp.infosystems.www.authoring.stylesheets:

I am in the process of designing my first web-site, and am having a
problem with my picture gallery. My thumbnails are all different
sizes, I would like them to be one size. The manual does not address
this situation. Where did I go wrong?

<style>
..thumbnails {width:80px;height:60px;margin:5px;}
</style>
.......
<img src=".." class="thumbnails">
<img src=".." class="thumbnails">
<img src=".." class="thumbnails">
.......

btw, what manual are you talking about ?
css is learned by looking at examples and documentation.

.... and reading this NG ;-)

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[David Dorward]

Ken wrote:

I am in the process of designing my first web-site, and am having a
problem
with my picture gallery. My thumbnails are all different sizes, I would
like them to be one size. The manual does not address this situation.
Where did I go wrong?

Err... you didn't specify the same size for all the thumbnails in your image
editor?

--
David Dorward http://david.us-lot.org/

[Ian Rastall]

On Sun, 20 Jul 2003 18:51:30 -0500, "Ken" <ke****@worldnet.att.net>
wrote:

I am in the process of designing my first web-site, and am having a problem
with my picture gallery. My thumbnails are all different sizes, I would
like them to be one size. The manual does not address this situation.
Where did I go wrong?

Do you mean you don't know how to do this in HTML?

Are you using any software to process your photos? They should be
resized and optimized to become thumbnails. You can specify the same
width and height for them, but it's best to do that only if they're
already mostly the same dimensions. Don't just set small dimensions on
a large photo, because the page will take forever to load.

If you really mean CSS, there's no reason that I know of to set the
width and height of your images with CSS when you can do it just as
easily in HTML.

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/

[Stan Brown]

In article <Xn********************@194.109.133.29> in
comp.infosystems.www.authoring.stylesheets, Evertjan.
<ex**************@interxnl.net> wrote:

Ken wrote on 21 jul 2003 in comp.infosystems.www.authoring.stylesheets:

I am in the process of designing my first web-site, and am having a
problem with my picture gallery. My thumbnails are all different
sizes, I would like them to be one size. The manual does not address
this situation. Where did I go wrong?

<style>
.thumbnails {width:80px;height:60px;margin:5px;}
</style>

This is really not good advice, for two reasons:

(1) most browsers don't give very good results when resizing
pictures.

(2) having the browser resize a picture wastes download time.

A MUCH better approach, really the only reasonable approach, is for
the author to use an image editor to make the thumbnails the desired
size before uploading them.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/

[Evertjan.]

Stan Brown wrote on 21 jul 2003 in
comp.infosystems.www.authoring.stylesheets:

<style>
.thumbnails {width:80px;height:60px;margin:5px;}
</style>

This is really not good advice, for two reasons:

(1) most browsers don't give very good results when resizing
pictures.

(2) having the browser resize a picture wastes download time.

A MUCH better approach, really the only reasonable approach, is for
the author to use an image editor to make the thumbnails the desired
size before uploading them.

1
It is a bit beside the question as the question was a stylesheet solution
(NG!) to different thumbnail sizes, it does not say the src'es where not
thumbnails.

2
It sometimes is not a waste of download time at all, since it can be a
very visual way of preloading, even if the original is 400x300px or so.
Even vertical images, though distorted as horizontal thumbnails, are
easily recognisable, a thumbnail is nearly never a good picture and it
doesn't need to be:

=============

<style>
..thumbnails {width:80px;height:60px;margin:5px;}
</style>

<img src="empty.jpg" class="big" id="bigimg"><br>

<img src="a.jpg" class="thumbnails"
onmouseover="bigimg.src=this.src">

<img src="b.jpg" class="thumbnails"
onmouseover="bigimg.src=this.src">

===========

This specific code not tested, it is the idea.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)