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 7 3278
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 -
On Fri, 18 Nov 2005 09:37:16 +1000, Eric Lindsay
<NO**********@e riclindsay.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/
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.jp g" 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)
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
In article <MP************ ************@ne ws.individual.n et>,
Lauri Raittila <la***@raittila .cjb.net> wrote: in comp.infosystem s.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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 does away with the hierarchical
structure of traditional gallery apps and allows the user to select, from a
list of criteria, whatever photos he or she wishes to see. For example,
each photo would have entries for photographer, category, date,...
|
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 anyone can recommend it will
greatly be appreciated. I am willing to pay but freeware is preferable.
Thanks
|
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 plain html. Since the number
of photos I have has increased greatly, it becomes a long and tedious
process to go through all the pages to edit the links (to newly added
pages) and add in the new pages etc...
|
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 on a page and clicking
on the thumbnails would pop open another window with the full-sized image.
The site needs a form that provides for uploading photos.
The photo gallery can be limited to a certain number of photos if need be.
What are the...
|
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 over one item or
clickong one item.
I want to make two things in this page (the sameone
http://www.danieldesjardins.com/gallery/1202015) so it would be like a
| |
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?
I currently run a site with an extensive photo gallery. Hundreds of
photos. Right now I have a system which the thumbnails are laid out in
a table. You click on a thumbnail and you see the full size picture.
That full size picture is in its...
|
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 either too complex or too
simple for my purpose. Most photo gallery scripts are intended
primarily for sharing new photos continuously and allowing visitors to
comment on them. I want something more static, which allows more text
content.
|
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 gallery. (
http://xahlee.org/Periodic_dosage_dir/lanci/lanci.html )
Comments and versions in other lang welcome.
Xah
|
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 that uploads to photo to the folder in the site root diorectory. One that uploads the info to mysql database. but...
When I try to upload them both ways at the same time i cant get it.
I am Including code for both pages i have working.
Code for...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look !
Part I. Meaning of...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |