This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > February 2004 > Thumbnail gallery without tables?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Thumbnail gallery without tables?
|
|
| Max Quordlepleen 2004-02-23, 6:30 pm |
| 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/Ph...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
| |
|
| Max Quordlepleen wrote:
> 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/Ph...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.
Not in my IE6.0....
> 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?
give them 'display:inline'. This way you can center them or
left align them, just like regular text.
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Lauri Raittila 2004-02-23, 6:31 pm |
| In article Max Quordlepleen wrote:
> 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/Ph...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.
Could you specify which IE6 minor version? On what platform? IIRC have
tested on XP and 2000.
> 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?
how about :
http://www.student.oulu.fi/~atlas/kuvat/
Does it happen there too?
(special interest as I did both sites)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
| |
| Lauri Raittila 2004-02-23, 6:31 pm |
| In article Els wrote:
> Max Quordlepleen wrote:
>
>
> Not in my IE6.0....
>
>
> give them 'display:inline'. This way you can center them or
> left align them, just like regular text.
Display:inline should not work as it does in IE, so it is useless when
you have captions.
but:
http://www.student.oulu.fi/~laurirai/www/css/gallery/
Uses inline for IE and inline-table for Opera 6 and 7 and bugless
browsers. Tried to aply float:left for mozilla, but html*somthing bug is
fixed in gecko, and it don't work anymore.
Why they don't they fix bugs that do some real harm, instead of fixing
useful bugs? There has been no big CSS fixes since Mozilla 1.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
| |
| Max Quordlepleen 2004-02-23, 6:31 pm |
| Els <els.aNOSPAM@tiscali.nl> writes:
> Not in my IE6.0....
Now _that's_ weird. My HTML editor is set to invoke my default browser
(K-Meleon), and my IE6, so that I can see how pages look in both. When
I open this page in the editor, and invoke IE6, the thumbs are
vertically aligned. When I paste the URL into an already open IE6
address bar, they are properly aligned. Very strange. Sorry for
troubling you, and thanks for the prompt, helpful response.
--
Life? Don't talk to me about life!
http://www.maxqnz.com/References.html
| |
|
| Lauri Raittila wrote:
> In article Els wrote:
>
>
> Display:inline should not work as it does in IE, so it is useless when
> you have captions.
True, I wasn't thinking of captions, actually, just the thumbs.
> but:
> http://www.student.oulu.fi/~laurirai/www/css/gallery/
>
> Uses inline for IE and inline-table for Opera 6 and 7 and bugless
> browsers. Tried to aply float:left for mozilla, but html*somthing bug is
> fixed in gecko, and it don't work anymore.
The work of a webmaster/designer is never done...
All these manufacturers of browsers should really have a
maillist for webmasters, in which they tell exactly which
bugs they fix everytime they do... together with a
workaround if it was a useful bug ;-)
On a recent site I already resorted to little tables (two
cells) inside divs floating left. (where i didn't need it
centered)
That way I was able to define a height to the thumb and
caption together, so that when the caption is more than one
line, the divs don't start piling up at the end of the row.
Also it made it possible to have the horizontal thumbs not
top align with the vertical thumbs.
> Why they don't they fix bugs that do some real harm, instead of fixing
> useful bugs?
Maybe the useful bugs are just easier to fix :-)
> There has been no big CSS fixes since Mozilla 1.
Good, I haven't memorized all CSS rules and bugs yet. Let 'm
wait till I have ;-)
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Richard 2004-02-23, 8:29 pm |
| Lauri Raittila wrote:
> In article Max Quordlepleen wrote:
[color=darkred]
> Could you specify which IE6 minor version? On what platform? IIRC have
> tested on XP and 2000.
[color=darkred]
> how about :
> http://www.student.oulu.fi/~atlas/kuvat/
> Does it happen there too?
> (special interest as I did both sites)
Good job too. Shows up in my IE 6 just fine. The sites show 3 across.
1024x768.
| |
| Sid Ismail 2004-02-23, 9:29 pm |
| On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.com>
wrote:
: and one(example of an
: approach that worked was
: http://www.student.oulu.fi/~egea/Ph...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?
What in heaven's name is wrong with using tables for this application?
Especialhy if you have text captions under/above each image.
Tables is more universal than souped-up morse code.
Sid
| |
|
|
Sid Ismaih wrote:
> On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.com>
> wrote:
>
> : and one example of an
> : approach that worked was
> : http://www.student.oulu.fi/~egea/Ph...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 alh 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?
>
> What in heaven's name is wrong with using tables for this application?
> Especially if you have text captions under/above each image.
(lack of) flexibility :-)
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Max Quordlepleen 2004-02-23, 9:29 pm |
| On Mon, 23 Feb 2004 22:11:26 GMT, Lauri Raittila
<lauri@raittila.cjb.net> proffered, in :
news:MPG.1aa4a7097d2d6758989e94@news.individual.net:
>
> Could you specify which IE6 minor version? On what platform? IIRC
> have tested on XP and 2000.
>
>
> how about :
> http://www.student.oulu.fi/~atlas/kuvat/
>
> Does it happen there too?
>
> (special interest as I did both sites)
Sorry, Lauri, it must have been some snafu when I downloaded the pages
to dissect in my HTML editor. when I visit the pages using IE6, they
are just fine. My sincere apologies.
--
Please do not press this button again
http://www.maxqnz.com/References.html
| |
| Nik Coughin 2004-02-23, 9:29 pm |
| Sid Ismail wrote:
> What in heaven's name is wrong with using tables for this application?
> Especially if you have text captions under/above each image.
>
> Tables is more universal than souped-up morse code.
>
> Sid
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{float: left;text-align: center;}
gallery:
<span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br />Caption
For Thumb 1</span>
<span class="thumbnail><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.
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.
If you want to apply styling to every thumb, you only have to add more
attributes to the CSS part.
CSS is a far superior way of doing thumbs than a table. That's what's wrong
with using tables for this application.
I don't agree with the argument that you shouldn't use tables for layout
because they are intended for tabular data. I think you shouldn't use
tables for layout because once you understand CSS it gives you much more
power, is much more flexible and is simpler to implement than a table. It's
simply a better way of doing things. You're limiting yourself if you use
tables.
| |
| Andrew Urquhart 2004-02-23, 9:29 pm |
| "Sid Ismail" <elsid@nospam.com> wrote in message
news:l37l301ammf5jv979kpst4tucuqde91fro@4ax.com...
> On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.com>
> wrote:
>
> : and one example of an
> : approach that worked was
> : http://www.student.oulu.fi/~egea/Ph...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?
>
>
> What in heaven's name is wrong with using tables for this application?
> Especially if you have text captions under/above each image.
>
> Tables is more universal than souped-up morse code.
>
> Sid
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,
although obviously the title attribute would help here.
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]
--
Andrew Urquhart
www.andrewu.co.uk/about/contact/?su...newsgroup_ciwas
| |
|
|
Andrew Urquhart wrote:
> "Sid Ismail" 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,
> although obviously the title attribute would help here.
What about my mix of div's and tables here:
http://www.mediatech.nl/~rachel/Rac...thcaptions.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.
> 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. And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
|
|
Nik Coughin wrote:
> Sid Ismail 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{float: left;text-align: center;}
>
> gallery:
>
> <span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br />Caption
> For Thumb 1</span>
> <span class="thumbnail><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?
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Nik Coughin 2004-02-23, 10:29 pm |
| Els wrote:
> Nik Coughin wrote:
>
>
> Just out of curiosity on the subject, could you give a url
> to that gallery you just converted?
Harder said than done.
I have no ftp access to my site at the moment.
You can see the original table based gallery at:
http://homepages.ihug.co.nz/~nrkn/xml/
Click screenshot test.
You won't be able to see any source though, as it is an XML document being
translated by xsl and the thumb gallery table itself is generated by
JavaScript dynamically within the xsl. If you don't use IE 6 then I doubt
very much that it will work -- not something that I'm proud of, but it was
made last year before I started writing proper cross browser pages and using
CSS.
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.
<html>
<head>
<title>Gallery with tables</title>
</head>
<body>
Thumbnails<br/><br/>
<table cellpadding="8" border="0">
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
border="0" align="bottom"/><br/>Caption 1</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
border="0" align="bottom"/><br/>Caption 2</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
border="0" align="bottom"/><br/>Caption 3</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
border="0" align="bottom"/><br/>Caption 4</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
border="0" align="bottom"/><br/>Caption 5</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
border="0" align="bottom"/><br/>Caption 6</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
border="0" align="bottom"/><br/>Caption 7</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
border="0" align="bottom"/><br/>Caption 8</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
border="0" align="bottom"/><br/>Caption 9</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
border="0" align="bottom"/><br/>Caption 10</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
alt="10" border="0" align="bottom"/><br/>Caption 11</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
alt="11" border="0" align="bottom"/><br/>Caption 12</a>
</center>
</td>
</tr>
</table>
</body>
<html>
<head>
<title>Gallery with CSS</title>
<style>.thumb{float:left;text-align:center;padding:8px;}</style>
</head>
<body>
Thumbnails<br/><br/>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
border="0" align="bottom"/><br/>Caption 1</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
border="0" align="bottom"/><br/>Caption 2</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
border="0" align="bottom"/><br/>Caption 3</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
border="0" align="bottom"/><br/>Caption 4</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
border="0" align="bottom"/><br/>Caption 5</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
border="0" align="bottom"/><br/>Caption 6</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
border="0" align="bottom"/><br/>Caption 7</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
border="0" align="bottom"/><br/>Caption 8</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
border="0" align="bottom"/><br/>Caption 9</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
border="0" align="bottom"/><br/>Caption 10</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
alt="10" border="0" align="bottom"/><br/>Caption 11</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
alt="11" border="0" align="bottom"/><br/>Caption 12</a>
</span>
</body>
| |
| Nik Coughin 2004-02-23, 11:29 pm |
| Nik Coughin wrote:
> Harder said than done.
Don't know where that came from. I meant easier said than done. Fool :)
| |
| Andrew Urquhart 2004-02-23, 11:29 pm |
| "Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:403aa8f3$0$41752$5fc3050@dreader2.news.tiscali.nl...
>
> Andrew Urquhart wrote:
>
a[color=darkred]
may[color=darkred]
ways,[color=darkred]
>
> What about my mix of div's and tables here:
> http://www.mediatech.nl/~rachel/Rac...thcaptions.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.
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.
>
markup[color=darkred]
>
> 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. It's
also valid markup that way as well!
> 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/mirr...mirroragent.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)
--
Andrew Urquhart
www.andrewu.co.uk/about/contact/?su...newsgroup_ciwas
| |
| Craig 2004-02-24, 12:29 am |
| Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/
Max Quordlepleen wrote:
> 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/Ph...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?
>
| |
| Paul Furman 2004-02-24, 1:28 am |
| reformatted for the slow among us:
Nik Coughin wrote:
..thumbnail {
float: left;
text-align: center;
}
<span class="thumbnail>
<img src="thumb1.gif" alt ="thumb 1" />
<br />
Caption For Thumb 1
</span>
<span class="thumbnail>
<img src="thumb2.gif" alt ="thumb 2" />
<br />
Caption For Thumb 2
</span>
| |
| Steve R. 2004-02-24, 5:29 am |
| 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 :~)
| |
| Steve R. 2004-02-24, 5:29 am |
| 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.
| |
| Barry Pearson 2004-02-24, 5:29 am |
| 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/photo...folios/lrps.htm
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
| |
|
|
| Sid Ismail 2004-02-24, 6:30 am |
| On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
<reply_via_contact_page@website_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
| |
|
|
Andrew Urquhart wrote:
> "Els" wrote:
>
>
> 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?
>
> 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 :-)
>
> :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/mirr...mirroragent.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 vão. O resto é imperfeito.
- Renato Russo -
| |
|
| Barry Pearson wrote:
> Nik Coughin wrote:
> [snip]
>
>
> [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/photo...folios/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 vão. O resto é imperfeito.
- Renato Russo -
| |
|
| Nik Coughin wrote:
> Els wrote:
>
>
> 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 vão. O resto é imperfeito.
- Renato Russo -
| |
|
| 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/Rac...thcaptions.html
I don't think that visual effect can be gained with divs only?
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
|
|
Sid Ismail wrote:
> On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
> <reply_via_contact_page@website_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 vão. O resto é imperfeito.
- Renato Russo -
| |
| Andrew Urquhart 2004-02-24, 6:30 am |
| "Steve R." <stevie_ritchie(NOSPAM)@hotmail.com> wrote in message
news:tIE_b.826$Bp1.7738534@news-text.cableinet.net...
> Andrew Urquhart wrote in message ...
>
> 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
www.andrewu.co.uk/about/contact/?su...newsgroup_ciwas
| |
| Andrew Urquhart 2004-02-24, 7:29 am |
| "Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:403b1dcb$0$41752$5fc3050@dreader2.news.tiscali.nl...
>
> 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.
Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd not
say it couldn't be done, but it would certainly make the CSS less trivial!
:o)
> But if
> I were to make it a list, are you suggesting having each div
> as a <li> item?
Yes, it just has extra semantic meaning than a div ("Here is a
catalogue/list of something" vs. "Here are some blocks"), but can be styled
to do everything that your div can do.
>
> If they're all on the same domain, making them relative will
> only take about 1 second with search and replace :-)
Very true! Although the mirroring process is all automated so I'd have to
manually intervene, open an editor, go find the processed page, etc., etc.,
and that would take a bit longer than 1 second! :o)
--
Andrew Urquhart
Reply: www.andrewu.co.uk/about/contact/?su...newsgroup_ciwas
| |
|
|
Andrew Urquhart wrote:
> "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> news:403b1dcb$0$41752$5fc3050@dreader2.news.tiscali.nl...
>
>
> Agreed, getting all images and captions to appear with the same vertical
> positioning is likely to be a big problem without tables, although I'd not
> say it couldn't be done, but it would certainly make the CSS less trivial!
> :o)
Well, I've tried to do it, but it just got way to
complicated, which is why I used the tables.
>
> Yes, it just has extra semantic meaning than a div ("Here is a
> catalogue/list of something" vs. "Here are some blocks"), but can be styled
> to do everything that your div can do.
That was easy!
http://www.mediatech.nl/~rachel/Rac...ptionslist.html
So this way it would be quicker to jump from thumbnail to
thumbnail? Good :-)
>
> Very true! Although the mirroring process is all automated so I'd have to
> manually intervene, open an editor, go find the processed page, etc., etc.,
> and that would take a bit longer than 1 second! :o)
Make it 5 minutes then :-)
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Sid Ismail 2004-02-24, 8:29 am |
| On Tue, 24 Feb 2004 11:22:30 +0100, Els <els.aNOSPAM@tiscali.nl> wrote:
:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: > <reply_via_contact_page@website_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 :-)
Have valign=bottom in your TD then?
Sid
| |
|
| Els wrote:
> Andrew Urquhart wrote:
>
>
> Well, I've tried to do it, but it just got way to complicated, which is
> why I used the tables.
Oh, and it is (to my knowledge) simply impossible to have
the various thumbs (different heights) aligned - vertically
centered - without specifying exact height for each thumb
seperately.
Can be done automatically with PERL or maybe PHP, but it's a
hassle and a lot of extra code.
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
|
|
Sid Ismail wrote:
> On Tue, 24 Feb 2004 11:22:30 +0100, Els <els.aNOSPAM@tiscali.nl> wrote:
>
> :
> :
> : Sid Ismail wrote:
> :
> : > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
> : > <reply_via_contact_page@website_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 :-)
>
> Have valign=bottom in your TD then?
That just aligns the lot to the bottom of the td instead of
centered. Which helps a little bit, if all the captions are
the same height ;-) It still won't look aligned nicely.
With seperate tablecells, the captions will be aligned with
each other, and so will the thumbs.
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
|
| Sid Ismail wrote:
> On 24 Feb 2004, Max Quordlepleen <maxq@nonags.com> wrote:
>
>
> What in heaven's name is wrong with using tables for this application?
What in heaven's name is the data relationship between e.g., the photo
of "Coordinators" and that of "Hall of upper cottage?"
> Especially if you have text captions under/above each image.
That would be the only use of table, thus 1 table for each
image/caption, floated left.
> Tables is more universal than souped-up morse code.
10 tables? I think it's simpler the way it is.
--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
| |
| Paul Furman 2004-02-24, 11:29 am |
| Els wrote:
>
> ...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 :-)
I took a stab at those issues. It gets a whole lot more complicated! It
has nested divs for the thumb and caption inside the same float left
span above.
http://www.edgehill.net/html/css/gallery2.htm
I was able to omit the width in Mozilla and it sized to the thumb if the
text was not too wide but the second one stretched to the end of the
earth in IE. The height has to be fixed to get the captions to line up
in the bottom. IE won't show the fixed height of the two-line caption
box unless there is enough text to fill it, Mozilla overflows if I write
a caption longer than two lines.
I don't think CSS is necessarily easier or more compact than tables. It
is nice to get the automatic wrapping though. If I was processing this
with php, I could calculate the largest height image for all and set the
width based on each image width (and set the caption box width to match)
then the caption height (and the container span) would have to be
calculated in ems for the largest caption in the set!
I couldn't figure out how to center the image but it's probably
something simple.
If the contents could be aligned to the bottom at a consistent baseline,
I wouldn't mind the top being ragged. I have no clue how to do that.
Here's another version where I just let things fall where they want and
the only width or height I fix is the caption width to match the image
width (plus padding/margin which shows differently in IE & Mozilla so
it's not perfect:
http://www.edgehill.net/html/css/gallery3.htm
| |
|
|
Paul Furman wrote:
> Els wrote:
>
>
> I took a stab at those issues. It gets a whole lot more complicated!
I know :-)
> It
> has nested divs for the thumb and caption inside the same float left
> span above.
>
> http://www.edgehill.net/html/css/gallery2.htm
Almost what I want...
> I was able to omit the width in Mozilla and it sized to the thumb if the
> text was not too wide but the second one stretched to the end of the
> earth in IE. The height has to be fixed to get the captions to line up
> in the bottom. IE won't show the fixed height of the two-line caption
> box unless there is enough text to fill it, Mozilla overflows if I write
> a caption longer than two lines.
>
> I don't think CSS is necessarily easier or more compact than tables.
True :-)
> It
> is nice to get the automatic wrapping though.
Just in case you didn't see my message in a 'side-thread' of
this one, I made an example that has the ease of tables, and
the wrapping of divs:
http://www.mediatech.nl/~rachel/Rac...thcaptions.html
I was told it's even better (for usability) to make it a
list, so I then changed it to
http://www.mediatech.nl/~rachel/Rac...ptionslist.html
> If I was processing this
> with php, I could calculate the largest height image for all and set the
> width based on each image width (and set the caption box width to match)
> then the caption height (and the container span) would have to be
> calculated in ems for the largest caption in the set!
>
> I couldn't figure out how to center the image but it's probably
> something simple.
Horizontally: text-align:center to the div.
Vertically: only possible if you know the height of each
thumb, by using positioning and negative margin.
> If the contents could be aligned to the bottom at a consistent baseline,
> I wouldn't mind the top being ragged. I have no clue how to do that.
Me neither.
(in a div that is)
> Here's another version where I just let things fall where they want and
> the only width or height I fix is the caption width to match the image
> width (plus padding/margin which shows differently in IE & Mozilla so
> it's not perfect:
> http://www.edgehill.net/html/css/gallery3.htm
That's exactly what will mess up the look of the page if you
have more than just two thumbs with different heights.
For me tables (one per thumb) is the answer to this problem,
and as there is no accessibility or flexibility issue (as
far as I know), I don't think it's bad coding or design to
do it the way I did. :-)
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Barry Pearson 2004-02-24, 12:33 pm |
| Paul Furman wrote:
[snip]
> I don't think CSS is necessarily easier or more compact than tables.
[snip]
I examined several layouts, using types of CSS positioning and also using
tables, and found that, on average, my table pages were perhaps 25 bytes extra
per item being positioned. So for 3 columns, it might be about 75 bytes. If
you add spacer GIFs, then you can possibly manage with just one (a single,
transparent, pixel) at less than about 50 bytes. These are just rules of
thumb, and depend on such things as the lengths of ID names, etc.
Somethings I haven't managed (yet) to do with CSS positioning. Some design
ideas are silly to try with tables. I'm currently trying to solve a design
idea that I don't know how to do with either, largely because of well known
problems with IE, but I think I know how to do with a combination of a simple
table and floats within it.
If all you have is a hammer, everything looks like a nail. (Traditional)
If all you have is a screwdriver, everything may get screwed up. (Barry
Pearson, 2004)
And sometimes you just place the screwdriver against some ice you want to
remove, and hit the end of it with a hammer!
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
| |
|
|
|
|
Paul Furman wrote:
> Els wrote:
>
>
> Ah ha!
> I tried something like that too:
> http://www.edgehill.net/html/css/gallery4.htm
> http://www.edgehill.net/html/css/gallery5.htm
You know, I never thought about the possibility of floating
the tables themselves!
> Then I boiled yours down to the basics and color coded to make sense of
> it: http://www.edgehill.net/html/css/gallery6.htm
:-)
And true, there's no need for the height of the table to be
specified. Taking that out....
The div version was 18.345 bytes on the server, the li
version 17.912, without the height it's now 17.897, and just
uploaded the div version without the divs: 16.645 bytes :-)
The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.
I would (to make the page load in a more stable way) specify
a max-width for each thumb, as they are never wider or
higher than 100px, but I don't know how to do that. As soon
as I specify a width, in html or in css, the picture
stretches to become that width...
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Steve R. 2004-02-24, 2:29 pm |
| Els wrote in message ...
> The width and height of each thumb I don't specify though,
> cause it's a hassle, as they're all different.
'Frontpage' users do all that with a simple click of the button :~)
| |
|
| Steve R. wrote:
> Els wrote in message ...
>
>
> 'Frontpage' users do all that with a simple click of the button :~)
Blasphemist! :-D
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Nik Coughin 2004-02-24, 5:31 pm |
| Steve R. wrote:
> Nik Coughin wrote in message ...
>
> That page took forever to load on a dial-up, but I couldn't
> understand why.
>
> Maybe tables *are* quicker :~)
That page uses tables, not CSS :)
It probably took a long time to load because of the way the XSL stylesheet
(nothing to do with CSS) translates the XML. When I wrote that page I knew
nothing about XSL so it doesn't exactly produce optimal code.
| |
| Eric Bohlman 2004-02-25, 5:29 pm |
| "Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:HKF_b.2618$Vv.1980@newsfe2-gui.server.ntli.net:
> 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.
You can probably refactor your code to achieve a large space saving. It
sounds to me like there's a whole lot of code duplicated in each handler;
figure out what's common, write functions with parameters to do the common
stuff, and have the individual handlers simply call the functions with the
right parameters. That way the common code appears in only one place
rather than duplicated for every image.
| |
| Andrew Urquhart 2004-02-25, 6:30 pm |
| "Eric Bohlman" <ebohlman@earthlink.net> wrote in message
news:Xns949A971AC1ECDebohlmanomsdevcom@130.133.1.4...
> "Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
> news:HKF_b.2618$Vv.1980@newsfe2-gui.server.ntli.net:
>
image[color=darkred]
>
> You can probably refactor your code to achieve a large space saving.
It
> sounds to me like there's a whole lot of code duplicated in each
handler;
> figure out what's common, write functions with parameters to do the
common
> stuff, and have the individual handlers simply call the functions with
the
> right parameters. That way the common code appears in only one place
> rather than duplicated for every image.
Hi Eric, if you _look_ you'll see that that is exactly how it already
works.
--
Andrew Urquhart
Reply: www.andrewu.co.uk/about/contact/?su...wsgroup_althtml
| |
| Eric Bohlman 2004-02-26, 1:29 am |
| "Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:gH8%b.1119$bJ1.416@newsfe1-win:
> "Eric Bohlman" <ebohlman@earthlink.net> wrote in message
> news:Xns949A971AC1ECDebohlmanomsdevcom@130.133.1.4...
> It
> handler;
> common
> the
>
> Hi Eric, if you _look_ you'll see that that is exactly how it already
> works.
You could knock off about 4K right away by having ShowPhoto prepend the
path to the photo URIs; that would save you several hundred
"/andrewu/pix/photos/". Another factor contributing to the bloat is the
long directory names.
| |
| Andrew Urquhart 2004-02-26, 7:28 am |
| "Eric Bohlman" <ebohlman@earthlink.net> wrote in message
news:Xns949AECA8DA940ebohlmanomsdevcom@130.133.1.4...
> "Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
> news:gH8%b.1119$bJ1.416@newsfe1-win:
>
already[color=darkred]
>
> You could knock off about 4K right away by having ShowPhoto
> prepend the path to the photo URIs; that would save you several
> hundred "/andrewu/pix/photos/". Another factor contributing to the
> bloat is the long directory names.
Hi Eric. I wrote the XML and XSLT behind the gallery (links to those
files at bottom of gallery) to be flexible enough for others to use if
they want to. So whilst I could introduce tweaks of this nature the code
becomes less general purpose. All of the data is in the XML, all of the
processing is in the XSLT and photo.js is a blackbox that provides
additional DHTML functionality for those browsers that support
javascript. I don't want to cross those boundaries and put data in the
DHTML module for example. If I gave the impression that I was puzzled as
to why the page was large then I apologise as this is not the case. The
long directory and filenames have been lifted directly from my offline
store of photos where they have a purpose in reminding me what they are
by how they are named, they have not been optimised for the web other
than in making them URI-safe. I posted the link as it provided an
example of how to use CSS with semantic HTML to display thumbnails in a
gallery, I wouldn't post it to a thread about file-size optimisation!
:o)
Thanks for the interest.
Best,
--
Andrew Urquhart
Reply: www.andrewu.co.uk/about/contact/?su...newsgroup_ciwas
| |
| Roy Reed 2004-02-26, 9:28 am |
| Steve R. wrote:
> Craig wrote in message ...
>
> 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.
It's not the JPG optimisation that's the problem. The images still have EXIF
data embedded. That's probably between 10K and 15K of the file size.
--
Must fly
Roy
www.reeddesign.co.uk
| |
| Lauri Raittila 2004-02-26, 12:32 pm |
| In article Andrew Urquhart wrote:
> "Sid Ismail" <elsid@nospam.com> wrote in message
> news:l37l301ammf5jv979kpst4tucuqde91fro@4ax.com...
Do you mean by wrapping whole thing to one table? - Everything. Try it in
big/small window for example.
Or every image? - I don't think doing that just to get pre CSS browsers
tile images would be worth hassle.
Or like I suggest further this message?
Or do you mean inline styles? Those are bad, I admit. They are generated
automatically, and I intend to move them to stylesheet when I have time.
(I don't want to hardcode them to stylesheet.)
[color=darkred]
Depends much how you use them.
[color=darkred]
> 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]
I have thought about
<table>
<tr><th>Caption<td>image
<tr><td>Caption1<td>image1
</table>
And then making it look like my example using CSS. I think that is much
better than abusing dl's. I haven't had time to test it unfortunately.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
| |
| Lauri Raittila 2004-02-26, 12:32 pm |
| In article Andrew Urquhart wrote:
> "Eric Bohlman" <ebohlman@earthlink.net> wrote in message
> news:Xns949AECA8DA940ebohlmanomsdevcom@130.133.1.4...
> already
IIANM, you can read image path using JS somehow...
[color=darkred]
> Hi Eric. I wrote the XML and XSLT behind the gallery (links to those
....
> example of how to use CSS with semantic HTML to display thumbnails in a
> gallery, I wouldn't post it to a thread about file-size optimisation!
> :o)
Anyway, if you have that big website, you should use some faster
connected host. Took ages to load it on fast broadband.
You could safe loads of bandwith by not using XHTML, btw.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
| |
|
| Lauri Raittila wrote:
> In article Andrew Urquhart wrote:
>
>
> Or every image? - I don't think doing that just to get pre CSS browsers
> tile images would be worth hassle.
>
> Or like I suggest further this message?
>
> Or do you mean inline styles? Those are bad, I admit. They are generated
> automatically, and I intend to move them to stylesheet when I have time.
> (I don't want to hardcode them to stylesheet.)
>
>
> Depends much how you use them.
>
>
> I have thought about
>
> <table>
> <tr><th>Caption<td>image
> <tr><td>Caption1<td>image1
> </table>
>
> And then making it look like my example using CSS. I think that is much
> better than abusing dl's. I haven't had time to test it unfortunately.
Lauri, I'm just wondering how you think about how I did it
on these example pages:
W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
W:\Rachel's Site\Rachel\thumbswithcaptions.html
W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html
--
Els
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Paul Furman 2004-02-26, 3:31 pm |
| Els wrote:
> Lauri Raittila wrote:
>
>
>
> Lauri, I'm just wondering how you think about how I did it on these
> example pages:
> W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
> W:\Rachel's Site\Rachel\thumbswithcaptions.html
> W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html
Perhaps you missed the recent discussion, see the gallery pages for
experiments: http://www.edgehill.net/html/css Els' approach is
prototypeed in #6 and #2 comes real close to doing this with spans & divs.
| |
| Lauri Raittila 2004-02-26, 4:30 pm |
| In article Els wrote:
> Lauri Raittila wrote:
[Using one table and making it fluid using CSS]
>
> Lauri, I'm just wondering how you think about how I did it
> on these example pages:
> W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
> W:\Rachel's Site\Rachel\thumbswithcaptions.html
> W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html
Your URLs are bit hard to follow... I suppose these are the same as the
one on black background.
Anyway, I think your method is not totally wrong, but it is not very good
either. Better than list IMHO
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|