473,387 Members | 1,812 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 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 3235
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Daniel Kelly \(AKA Jack\) | last post by:
Hi! I'm searching for a Photo Gallery software package (like Coppermine and Gallery) that works, from the ground up, like a database-driven app. In other words, I want a gallery which entirely...
1
by: leigh | last post by:
I need a php photo gallery script that will allow me to categorise photos to directories/sections, post captions for each photo and allow users to comment on individual photos. If there is one...
5
by: fraser | last post by:
Hi, I have a photo gallery with cat photos here http://mouserspage.cjb.net From the beginning, I have been making each page of thumbnails, with a separate page for each photo, entirely in...
3
by: bob garbados | last post by:
I'm looking for thoughts on photo galleries and security/performance implications... I'm working on an asp.net site in vb that will include an updateable photo gallery that will display thumbnails...
1
by: desjardins.daniel | last post by:
Hi ! Excuse my english, i'm a french canadien... So here my message : I have put on my site a photo gallery and at the right a nav menu. This menu has a red dot visible want someone is passing...
13
by: Viken Karaguesian | last post by:
Hello everyone, Can anyone recommend a good online site to learn PHP? The W3Schools website is quite lacking - leaves much to be desired. I'm sure there are many places, but which ones are good?...
1
by: Throw | last post by:
G'day everyone I'm looking for a simple photo gallery script in PHP (or Perl), but not too simple. I have tried several photo gallery scripts in either language and I have found that they are...
1
by: Xah Lee | last post by:
The following is a program to generate thumbnail images for a website. Useful, if you want to do that. It is used to generate the thumbnails for my “Banners, Damsels, and Mores” project...
1
by: cumupkid | last post by:
II am trying to create a form that will allow me to upload photos to a folder in the site root directory and add the information to the mysql db at the same time. I have created two forms, one...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.