Photo Gallery with centered photos and text

[Eric Lindsay]

I would like to do a photo gallery with a liquid layout.

I wanted to center a caption below each photo (or above each photo).
I can do that easily with tables, but then I don't have a liquid layout.

Besides, I wanted to try to do it with CSS. I can do centered captions
with text-align. This works provided the element containing each photo
is floated left. I have found several examples of how to do this.

However I didn't want the photos floated left. I wanted to see whether
I could center them. I found a site demonstrating doing that with
multiple containers (and patches for IE, and the IE patches made it
desirable), and made this variation (html and css validate).

http://site.sheltersrus.com.au/gallery.html

however if I try to add a caption I break the liquid layout. Any
suggestions?

--
http://www.ericlindsay.com

[Els]

Eric Lindsay wrote:

I would like to do a photo gallery with a liquid layout.

I wanted to center a caption below each photo (or above each photo).
I can do that easily with tables, but then I don't have a liquid layout.

Besides, I wanted to try to do it with CSS. I can do centered captions
with text-align. This works provided the element containing each photo
is floated left. I have found several examples of how to do this.

However I didn't want the photos floated left. I wanted to see whether
I could center them. I found a site demonstrating doing that with
multiple containers (and patches for IE, and the IE patches made it
desirable), and made this variation (html and css validate).

http://site.sheltersrus.com.au/gallery.html

however if I try to add a caption I break the liquid layout. Any
suggestions?

http://locusmeus.com/test/thumbswith...scentered.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Els wrote:

however if I try to add a caption I break the liquid layout. Any
suggestions?

http://locusmeus.com/test/thumbswith...scentered.html

If you don't like missused tables (shouldn't it be one big table, pics in
one column and captions in other), you can use just CSS:

http://www.student.oulu.fi/~laurirai/www/css/gallery/

Uses same princible, but not real table, and CSS table for Gecko, as it
has many bugs... Less bulletproof. Works in IE, Opera and Gecko (not
necessary all of them, but at least recent.)


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Stephen Poley]

On Fri, 18 Nov 2005 09:37:16 +1000, Eric Lindsay
<NO**********@ericlindsay.com> wrote:

I would like to do a photo gallery with a liquid layout.

I wanted to center a caption below each photo (or above each photo).
I can do that easily with tables, but then I don't have a liquid layout.

Besides, I wanted to try to do it with CSS. I can do centered captions
with text-align. This works provided the element containing each photo
is floated left. I have found several examples of how to do this.

However I didn't want the photos floated left. I wanted to see whether
I could center them. I found a site demonstrating doing that with
multiple containers (and patches for IE, and the IE patches made it
desirable), and made this variation (html and css validate).

http://site.sheltersrus.com.au/gallery.html

however if I try to add a caption I break the liquid layout. Any
suggestions?

http://www.spartanicus.utvinternet.i...h_captions.htm

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Jim Moe]

Eric Lindsay wrote:

I would like to do a photo gallery with a liquid layout.

I wanted to center a caption below each photo (or above each photo).
I can do that easily with tables, but then I don't have a liquid layout.
Try this (due to Spartanicus):
CSS:
#gallery { text-align: center; } /* Add "white-space:nowrap" to prevent
wrapping. */
#gallery p { display: inline; }
#gallery p img {
margin-bottom: 5px;
padding: 0px;
border: 1px solid #f00;
}
#gallery span {
margin: 0 5px 5px 5px;
vertical-align: top;
/* width: 172px; */ /* Image width, not required. */
display: table-cell;
display: inline-table;
display: inline-block;
border: 1px solid #789;
}
#gallery p>span { vertical-align: baseline; }

HTML:
<div id="gallery">
<p><span><img src="image01.jpg" width="172" height="122" alt="A box 1"
title=""><br>A box 1</span></p>
....etc...
</div>

Besides, I wanted to try to do it with CSS. I can do centered captions
with text-align. This works provided the element containing each photo
is floated left. I have found several examples of how to do this.

However I didn't want the photos floated left. I wanted to see whether
I could center them. I found a site demonstrating doing that with
multiple containers (and patches for IE, and the IE patches made it
desirable), and made this variation (html and css validate).

http://site.sheltersrus.com.au/gallery.html

however if I try to add a caption I break the liquid layout. Any
suggestions?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Spartanicus]

Jim Moe <jm***************@sohnen-moe.com> wrote:

Try this (due to Spartanicus):
CSS:

[snip code]

Please don't do that. The code is most peculiar and thus prone to be
misunderstood, or botched up by the user if they try to adapt it.

Post the url to the article, that way a user also gets the explanation
with the code.

--
Spartanicus

[Eric Lindsay]

In article <pc********************************@4ax.com>,
Stephen Poley <sb******************@xs4all.nl> wrote:

http://site.sheltersrus.com.au/gallery.html

however if I try to add a caption I break the liquid layout. Any
suggestions?

http://www.spartanicus.utvinternet.i...h_captions.htm

Thanks for the URL. Having looked at that again, I realise I had seen
it when looking through the site previously. However with Spartanicus
warning about traps in the markup, I thought I would do my first
experiment with a different (easier?) example.

--
http://www.ericlindsay.com

[Eric Lindsay]

In article <MP************************@news.individual.net> ,
Lauri Raittila <la***@raittila.cjb.net> wrote:

in comp.infosystems.www.authoring.stylesheets, Els wrote:

however if I try to add a caption I break the liquid layout. Any
suggestions?
http://locusmeus.com/test/thumbswith...scentered.html

I am trying to avoid using tables at all (except for tabular data). I
guess you could argue photos with captions are tabular, but I'd like to
try the CSS way before falling back to tables.
If you don't like missused tables (shouldn't it be one big table, pics in
one column and captions in other), you can use just CSS:

http://www.student.oulu.fi/~laurirai/www/css/gallery/

Uses same princible, but not real table, and CSS table for Gecko, as it
has many bugs... Less bulletproof. Works in IE, Opera and Gecko (not
necessary all of them, but at least recent.)

Thanks for that Lauri. I tried it based on your method, since you
mention that it works in IE (I can't test IE). I am a little nervous
about the reliability of the changes I made, since I've never had much
luck with display, and especially with display table. I also took out
the vertical centering of the photos, at least for the moment. My
original version is at
http://site.sheltersrus.com.au/gallery.html

and my revised version is at
http://site.sheltersrus.com.au/gallery2.html

Works on a Macintosh in Safari 2, Opera 8.02, and Firefox 1.07. The
differences in display are interesting. Safari seems to align on the
bottom of the photos (all the captions are in a horizontal row).
Firefox does the same, but puts a bright blue link indicator around each
thumbnail (I guess I turn that off like in any link) which neither
Safari nor Opera do. Opera aligns on the top of the photographs (which
actually seems slightly more logical, albeit inconvenient).

Reports on results in different browsers (especially IE versions) would
be most welcome.

--
http://www.ericlindsay.com