471,086 Members | 1,016 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,086 software developers and data experts.

Photo Gallery with centered photos and text

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
Nov 23 '05 #1
7 3032
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 -
Nov 23 '05 #2
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>
Nov 23 '05 #3
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/
Nov 23 '05 #4
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)
Nov 23 '05 #5
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
Nov 23 '05 #6
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
Nov 23 '05 #7
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
Nov 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Daniel Kelly \(AKA Jack\) | last post: by
1 post views Thread by leigh | last post: by
5 posts views Thread by fraser | last post: by
3 posts views Thread by bob garbados | last post: by
1 post views Thread by desjardins.daniel | last post: by
13 posts views Thread by Viken Karaguesian | last post: by
1 post views Thread by Xah Lee | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.