CSS layouts for images

[GeneSmith]

I'm trying to design a web page that will have a few thumnails of
different dimensions grouped on the left side, and a full size image of
a clicked thumnail on the right side, along with a couple of lines of
text below the image.

Are there CSS layouts that will approximate this, and keep the
thumbnails and the full size image positioned properly on different
monitor sizes? Thanks.

 

[m]

I'm trying to design a web page that will have a few thumnails of
different dimensions grouped on the left side, and a full size image of
a clicked thumnail on the right side, along with a couple of lines of
text below the image.

Are there CSS layouts that will approximate this, and keep the
thumbnails and the full size image positioned properly on different
monitor sizes? Thanks.

First, don't use a frame.
Link to another page that has both the thumbmail and the full size image
displayed if you want. You can either generate the pages server-side
or preprocess the extra pages so that the thumbnail (or a group of
thumbnails) and the enlargement always show up in the same place on
the page. They should all be styled with a common spreadsheet file.

http://www.mbstevens.com/howtothumb/
http://www.mbstevens.com/preprocessor/

 

[tm]

(e-mail address removed) wrote:

First, don't use a frame.

Frames work for thumbnailed pictures.
http://www.campalicious.com/2002/photos/dav/

 

[m]

Frames work for thumbnailed pictures.
http://www.campalicious.com/2002/photos/dav/

Ugggh!
http://www.html-faq.com/htmlframes/?framesareevil
http://www.useit.com/alertbox/9612.html

 

[tm]

tm wrote:

Ugggh!
http://www.html-faq.com/htmlframes/?framesareevil
http://www.useit.com/alertbox/9612.html

Yeah, I've seen those. Frames still work for thumbnailed pictures.

 

[m]

Yeah, I've seen those. Frames still work for thumbnailed pictures.

Question is not entirely whether it works -- the question is whether it is a
good way to do it. An internet newbie wouldn't know how to find subframe
information in order to save the address of, say, the image with the fur
bikini, and might not be able to find it. And the back-arrow is broken.
And a search engine would just index the frameset page, so anyone looking
for pictures of fur bikinis would come to the page and have to search
around for a while to find it, probably deciding it was not worth the
trouble. A real subpage could have been given a <title> that a search
engine could use. The page works, but has lousy usability.

 

[m]

Question is not entirely whether it works -- the question is whether it is
a
good way to do it. An internet newbie wouldn't know how to find subframe
information in order to save the address of, say, the image with the fur
bikini, and might not be able to find it. And the back-arrow is broken.
And a search engine would just index the frameset page, so anyone looking
for pictures of fur bikinis would come to the page and have to search
around for a while to find it, probably deciding it was not worth the
trouble. A real subpage could have been given a <title> that a search
engine could use. The page works, but has lousy usability.

Correction, the back-arrow on this particular site doesn't seem to be
broken, but the other frame-related problems are still there. The
non-frame releated problems have to do with completely meaningless
titles and filenames for the images and thumbnail images.

 

[tm]

tm wrote:

Question is not entirely whether it works -- the question is whether it is a
good way to do it. An internet newbie wouldn't know how to find subframe
information in order to save the address of, say, the image with the fur
bikini, and might not be able to find it. And the back-arrow is broken.
And a search engine would just index the frameset page, so anyone looking
for pictures of fur bikinis would come to the page and have to search
around for a while to find it, probably deciding it was not worth the
trouble. A real subpage could have been given a <title> that a search
engine could use.

All wonderful arguments against frames. Otoh, if you want to display
thumbnails and pictures in the same window, frames work.

The page works, but has lousy usability.

Lousy usability in terms of bookmarking and searching, in terms of
browsing thumbnails it has excellent usability.

 

[tm]

Correction, the back-arrow on this particular site doesn't seem to be
broken, but the other frame-related problems are still there. The
non-frame releated problems have to do with completely meaningless
titles and filenames for the images and thumbnail images.

Yes, the page is not perfect, wasn't looking for a critique, its not
my page. Just pointing out that that method is a fine way to display
pictures.

 

[m]

Lousy usability in terms of bookmarking and searching, in terms of
browsing thumbnails it has excellent usability.

The page could get that _without_ the other problems
by dropping the frames.

The otehr problems are just not acceptable.

 

[tm]

tm wrote:

The page could get that _without_ the other problems
by dropping the frames.

Wasn't the original question how to have the thumbnails and the full
pictures open in the same window?

The otehr problems are just not acceptable.

To whom?

 

[Leif K-Brooks]

Lousy usability in terms of bookmarking and searching, in terms of
browsing thumbnails it has excellent usability.

Shooting yourself out of a cannon has lousy usability in terms of not
getting injured, in terms of travel it has excellent usability.

 

[tm]

tm wrote:

Shooting yourself out of a cannon has lousy usability in terms of not
getting injured, in terms of travel it has excellent usability.

Cool.
Analogys are usually lousy in terms of enlightenment, but they are
excellent in terms of entertainment.

 

[m]

Wasn't the original question how to have the thumbnails and the full
pictures open in the same window?

Yes. Completely achievable without frames.

To whom?

To newbies who can't figure how to bookmark subframes.
To people using search engines who love fir bikinis.
To me and those in my room.
Lots of folk besides youm,
Thas 'om.

 

[tm]

Yes. Completely achievable without frames.

Ah, finally. Please elaborate.

 

[tm]

tm wrote:

http://www.porjes.com/butterflies/

Thank you. Exactly what i was looking for.

 

[Leif K-Brooks]

Ah, finally. Please elaborate.

http://www.porjes.com/butterflies/

 

[m]

Ah, finally. Please elaborate.

Subpages have left-hand div (with scrollbar turned on
if the (perhaps benighted) designer feels it absolutely necessary).
Repeating elements are easy do with either server-side page generation
or preprocessing.

Precise behavior of the bikini site would take some trouble,
but the original question didn't require that.

 

[GeneSmith]

http://www.porjes.com/butterflies/

Thanks, this is very close to what I have in mind. I would like to group
the thumbnails on the left side and the enlarged image on the left, and
should be able to do it. The big problem is how to get the thumbnails
aligned "properly" on different monitor sizes and with different
browsers. For example, if the thumbnails consist of a mixture of
landscapes and portraits and are of different dimensions. Any hints?

BTW, I would like this page to be standardized and without frames.

 

[bulge]

I'm trying to design a web page that will have a few thumnails of
different dimensions grouped on the left side, and a full size image of
a clicked thumnail on the right side, along with a couple of lines of
text below the image.

Are there CSS layouts that will approximate this, and keep the
thumbnails and the full size image positioned properly on different
monitor sizes? Thanks.

First half of this article should help:
http://www.alistapart.com/articles/practicalcss/

Outlines how to do thumbnails.