473,887 Members | 2,280 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Thumbnail gallery without tables?

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column. I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

--
Democracy is a form of government that substitutes election by the
incompetent many for appointment by the corrupt few. - G. B. Shaw
Jul 20 '05
54 7280
Nik Coughin wrote in message ...
You can see the original table based gallery at:
http://homepages.ihug.co.nz/~nrkn/xml/


That page took forever to load on a dial-up, but I couldn't understand why.

Maybe tables *are* quicker :~)
Jul 20 '05 #21
Nik Coughin wrote:
[snip]
Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontally and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.

[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.

In the gallery below, I believe that using tables is sensible. The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photog...olios/lrps.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #22
Craig wrote in message ...
Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/


Many of your thumbnails are very poorly web-optimised, especially on a page
which carries so many images. Pity the poor dial-up user (60% or more of
all users)

This one for example is 19K ..
http://www.amd-m.com/guys/thumbs/jonathanh_jpg.jpg

and this one 19K ...
http://www.amd-m.com/guys/thumbs/tomwastintime_jpg.gif

Thumbnails that pixel size can easily be around 3K - 4K maximum.
Jul 20 '05 #23
On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
<reply_via_cont act_page@websit e_in.sig> wrote:

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways
<td>
<img.... ><br>
Caption goes in the same TD cell
</td>

Sid

Jul 20 '05 #24
Els

Andrew Urquhart wrote:
"Els" wrote:
Andrew Urquhart wrote:
With either method (tables or divs) there could be a loss of semantic
informatio n depending on the implementation. For example if captions are a
seperate table row then the connection between the image and the caption may
not work very well for browsers rendering the content in non-visual ways,
although obviously the title attribute would help here.
What about my mix of div's and tables here:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
(don't click the links, or you'll go into the site I
borrowed the pics from ;-) )
Would it lose semantic information? It's completely
flexible, only left aligned, while I'd wish it to be
centered, but that's ok.


Hmmn, in your implementation for each thumbnail image you've got a div
containing a 1 cell x 2 row table. I think it's unlikely that the caption
and image are ever going to get pulled apart from each other as they might
do in a multi-celled table, so it'd be quite difficult not to associate the
caption text with the image. That said, the table does actually seem
somewhat redundant to me.


It's not redundant. Try taking it out :-)
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.
Looking at the information you're representing in the page you have a
collection of images with caption data, there are no categories or
sub-categories in the gallery so you don't need any additional structural
markup to order and partition your thumbnails - the reason why I used
multiple lists of various types. The only thing you could do different
AFAICS is use a single list, but you wouldn't gain too much by doing that. A
list would allow a user to know how many items are in the gallery and to
jump from thumbnail to thumbnail without being forced to jump over the
captions as well, plus the user could more easily find the end of the list
and skip to any following content, but in your example there only is the
gallery and no other content, it would be hard to recommend implementing a
list in such a case.
True, and on the actual page, the only other content is the
menu, both before and after the thumbnail collection. But if
I were to make it a list, are you suggesting having each div
as a <li> item?
As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]


Looks very nice, but why did you put all these widths and
heights in? The heights are all equal, and the widths don't
matter, as far as I can see.


If the browser knows the dimensions of the content (in this case the images)
during download it can in theory render and layout the page as it downloads
instead of having to wait for each image to download and then calculate the
image dimensions from the image file data and then re-draw the page.


True.
It's also valid markup that way as well!


That I knew :-)
And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D


:o) I know! The reason that the URIs are written out in full is rather off
topic! It's because the page was actually created using a mirroring script
that I built (http://www.andrewu.co.uk/tools/mirro...irroragent.zip
[9KB, zipped HTA]). That entire page is actually mirrored from
www.andrewu.co.uk/photo/ in an attempt to save that sites megre bandwidth!
The mirroring script changed the relative links in the original page during
the mirroring process so that the web page would work on a different domain,
it's just that I haven't gotten round to making it use relative URLs during
this process. So, that's why their absolutely referenced! :o)


If they're all on the same domain, making them relative will
only take about 1 second with search and replace :-)
--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #25
Els
Barry Pearson wrote:
Nik Coughin wrote:
[snip]
Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontall y and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.
[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.


Yep, that's what I did too, with tables, on various pages of
http://www.rachelrijsdijk.com/ (forgive me about the splash
screen, it is too big, but it wasn't my design)
In the gallery below, I believe that using tables is sensible.
I agree.
The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photog...olios/lrps.htm


That's what I call a good way of using tables for layout
purposes. It's difficult to do that with divs. I'd say
impossible too, unless you use little tables inside the
divs, but as this is fixed width, I'd say a table is far
easier to maintain and much less code too.
--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #26
Els
Nik Coughin wrote:
Els wrote:
Nik Coughin wrote:
Tables aren't the best or even the simplest way to do it.

Far from "souped-up morse code", a simple CSS thumbnail gallery
would look like this:

CSS:

.thumbnail{f loat: left;text-align: center;}

gallery:

<span class="thumbnai l><img src="thumb1.gif " alt ="thumb 1" /><br
/>Caption For Thumb 1</span>
<span class="thumbnai l><img src="thumb2.gif " alt ="thumb 2" /><br
/>Caption For Thumb 1</span>
etc.

That's a hell of a lot simpler than using tables. I should know, I
converted my table-based thumbnail gallery to a CSS-based one today.


Just out of curiosity on the subject, could you give a url
to that gallery you just converted?


However, if you want to see what the html source looks like, copy the code
below and paste it into notepad (or any other plain text editor), then save
it as tables.html and open it in your browser. Below that, I have included
my code for doing it with CSS. Notice that the table version is fixed
width, the CSS version scales to your browser window.


[snip code]

I did copy and paste that, and it looks okay, but it won't
work if you don't carefully put them in order of height..
Try it with alternating heights, or with a double line
caption here and there. It will break up and not look at all
the way you want, I'm sure :-)

--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #27
Els
Craig wrote:
Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/


I personally don't like the pictures and their captures
'floating' to the top of each div.
Which is why I used tables (2 rows each) inside the floating
divs myself.
Example page:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
I don't think that visual effect can be gained with divs only?

--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #28
Els


Sid Ismail wrote:
On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
<reply_via_cont act_page@websit e_in.sig> wrote:

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways

<td>
<img.... ><br>
Caption goes in the same TD cell
</td>


Which only will look 'okay' if all thumbs have the same
height. They don't at least on my pages :-)

--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #29
"Steve R." <stevie_ritchie (NOSPAM)@hotmai l.com> wrote in message
news:tI******** ***********@new s-text.cableinet. net...
Andrew Urquhart wrote in message ...
it's a bit big -128KB of markup alone.


Dial-up users won't be looking at your pages then.

I'm sure the HTLM for tables would have loaded much more quickly.


Hi Steve, I agree with you that the page is not dial-up friendly and it is
my intention to remedy that in the future.

However, I very much disagree when you say "tables would have loaded much
more quickly". I'm sure that it would load more slowly and here are my
reasons:

1. If my gallery was table-based then the instead of an <li> and <ol> I'd
need at least <td>, <tr> and <table> (I'll omit <tbody> and summary
attributes etc.) I calculate that if I make my gallery table-based I would
use 285 extra characters of HTML (225 for <tr> and 60 for the extra chars in
<table>). In reality this figure would be larger as I'm viewing 10
thumbnails per line in my 1024px-width viewport and I would need to reduce
this to not larger than 800px, hence more rows would be needed. It should be
noted that I could never accommodate every viewport size with a table-based
layout - if I fix the number of thumbnails per line then it's not going to
fit in someones display and would look too small in someone elses.

It should also be noted that:
2. This gallery has a DHTML-based display mechanism (for those that support
it, for those that don't there's an alternative) so each image has a rather
large onclick handler attached that really beefs-up the markup.
3. There simply are an awful lot of thumbnails in the gallery - 184 to be
exact each with very descriptive alt and title attributes.
4. The URIs used are absolute and not relative due to the process in which
the page was created via a robot, this is explained in an earlier post in
this thread. Correcting the absolute URIs would reduce the gallery by at
least 8832 characters.
--
Andrew Urquhart
http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas
Jul 20 '05 #30

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
3435
by: Filippo Giarratano | last post by:
Hi -- I'm trying to figure out how to make a photo thumbnail gallery page using CSS and no tables that (1) has a caption below each image and (2) is centered -- so that as browser width changes the images consistently reconstitute themselves as centered rows with the maximum number of images on each row. I've made a test page at http://www.americanstate.org/test/gal01/ that illustrates what I'm aiming for and how close I've gotten. I've...
6
1740
by: Stevie D | last post by:
Hi I'm a Javascript newbie I'm doing a 'simple' (basically adding pages and changing text in frontpage 2000) update of a web site for a friend - what I have done 'should not' have done anything to the Java script that this site contains and the bits I've added work fine. However, having uploaded the changes, and looking at the site in I.E. the thumbnail images that already existed in the site don't load into a popup window that was...
8
4825
by: Chris Dewin | last post by:
Hi. I run a website for my band, and the other guys want an image gallery. I'm thinking it would be nice and easy, if we could just upload a jpg into a dir called "gallery/". When the client clicks the "gallery" link, a cgi script could search the gallery/ dir, and create thumbnails of any jpeg images that don't already have a thumbnail associated with them. The script could then generate a page of clickable thumbnails. A few questions:
1
3248
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
8
20385
by: barb | last post by:
So that the world at large benefits from our efforts, here is one fully documented way to use Windows Irfanview freeware to create thumbnail web galleries (http://www.irfanview.com). STEP 1: Start with original thumbnails & two empty sub directories STEP 2: Create smaller versions of the originals for one sub directory STEP 3: Create thumbnail version of the originals the other sub directory STEP 4: Create an index.html pointing to the...
11
2395
by: Jane | last post by:
Hi, I need some help (php rookie) to build a thumbnail page using php. I'v a mysql database containing links to the original image files. No thumbnails created so far. It would be nice when the thumbnail contains a link to the original file :-) Jane
0
9799
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11173
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, 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...
0
10771
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10877
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,...
1
7988
isladogs
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...
0
7143
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5810
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...
1
4633
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
2
4239
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.