Thanks, Frank! I printed this out, and I think I'll try it here to see if I get it... Pics of a few E. milii flowers...


{{gwi:484803}}
{{gwi:484804}}
{{gwi:484805}}

Can you tell me why I have the large space between my text and the pics? There was only one space when I typed it out.

Denise in Omaha

Denise, you seem to have scattering of BR tags inside your table. I imagine these are pushing the pictures down, although the usage is a little odd and they might show up differently in different browsers.

Of course you don't actually need all those table tags top make your thumbnails come up in a row, they should do it automatically if the page is wide enough and provided you didn't put anything in between the thumbnail image tags that would break the line. From a purist standpoint, tables should be avoided except for displaying tabular data since it forces a layout which may be inappropriate for some viewers.

Voila, no table (note: these thumbnails are just downsized versions of the real pics 'cos I'm too lazy to upload real thumbnails for this post!):
{{gwi:484798}}{{gwi:484800}}{{gwi:484801}}

P.S. Its also worth noting that the latest GardenWeb page layout is completely within a table, hence some of the alignment issues, just one of many things that have been completely butchered recently and would be very annoying if I wasn't using an advanced browser that de-butchers them for me ;)

Shrubs_n_bulbs,
this doesnÂt seem to work for me.

The way I used to use tags for thumbnails and images is as follows.

(a href="http://url_for_image1.jpg";)(img src="http://url_for_thumbnail1.jpg";)(/a)
(a href="http://url_for_image2.jpg";)(img src="http://url_for_thumbnail2.jpg";)(/a)
(a href="http://url_for_image3.jpg";)(img src="http://url_for_thumbnail3.jpg";)(/a)

They then appear one below the other and never side by side.
What exactly are you doing different? An easier way than creating a table would be much appreciated.

Frank
www.euphorbia.de

Frank, I suspect you are putting each image on a separate line in the HTML, so they come out on a separate line in the browser. A tiny thing, but it makes a big difference.

I'll try to show what I mean with your example, but I think it will make the screen ugly!
(a href="http://url_for_image1.jpg";)(img src="http://url_for_thumbnail1.jpg";)(/a)(a href="http://url_for_image2.jpg";)(img src="http://url_for_thumbnail2.jpg";)(/a)(a href="http://url_for_image3.jpg";)(img src="http://url_for_thumbnail3.jpg";)(/a)

I think I got it. Thanks to Frank for starting the discussion and to shrubs for explaining why Franks brilliant table solution is unecessary if you just get rid of unecessary space! Tinkering showed a strategic space in between image links adds a nice white border between images. Thanks to Both of you!

{{gwi:484806}} {{gwi:473249}} {{gwi:473250}}

Thanks Frank & SnB! I'm also going to save/print out these instructions. I've been posting tables over on the Garden Photo Gallery (using (center) additionally) & any steps eliminated is good by me! I haven't been using thumbnails here, because some can't view them, for whatever reason.

Glad you started this thread, Frank!
~Rosemarie

Frank, you wrote:

In order not to confuse the GardenwebÂs computer software I had to change
bracket "less then" against left parenthesis "(" and
bracket "larger then" against right parenthesis ")"
for this example. Before using it for own experiments you have to change that reverse.

You can use the extended character set to depict the tag enclosures as follows:

&lt; = <
&gt; = >

Thus ..... <table>

Brackets are too confusing. BTW, these depictions are functions of HTML rather than the Board software which is based on HTML 4.0.

As S&B points out, the Table element is not necessary for horizontal image layout -- it is Browser dependent in any case.

James

I'm not computer literate at all and the directions, while very clear to others looks like Chinese arithmetic to me. I thought I would NEVER figure out how to post pics at all!! :-) Is there any reason that I should post my pics as thumbnails rather than full size?
Bill in SC

Being the HTML neanderthal (and my apologies to all HTML-savvy Neanderthals out there), I am afarind I don't follow this at all.

Perhaps if I printed it and studied what you've written for say, an epoch, I might get it, but what I am reading doesn't yet 'click here' in my head.'

I hesitate to ask you to put it another way, just so that Ican understand what you're writing - you've all gone to a lot of work as it is.

Is there a way of seeing the code behind the pictures?

Perhaps if I see that, combined with what Frank, SnB and James have written, the code will become understandable to me.

Hi Bill,

I think I know that one - if you have a slow connection, and the picture is large, it will take a long time to load. Using thumbnails prevents that.

Jeffrey:

{{gwi:484808}}

Here is the HTML code behind the above picture:

<img src="http://jp29.org/dihors14.JPG">;

..... the HTML element tag that designates image retrieval and display (img src) and the URL (Uniform Resource Location) address for the image (domain name on my server = jp29.org)

James

Dear James,

Thank you, but I should have been more specific; how do I see the code for the laterally -arranged pictures above?

Or, perhaps better, do yuou know of a website that would learn me such information as to how to post pictures in such a manner as Denise and Frank did?

Thanks much!

Yes Jeffrey, my dial up is slow, but the idea is to post pics on the lowest camera setting for ease of loading and viewing on the forum. In fact, the forum won't accept a pic if it is too large. Even with my slow dial up, properly sized pics pop right up for me. Mine are formated like the way James just illustrated..
Bill in SC

Jeffrey and Bill:

The following illustrates the horizontal layout of three clickable image thumbnails. As you can see, you do not have to use the HTML table element to effect this. I have repeated just one image to simplify this demonstration. You can cut and paste the HTML code that produced this image layout (below) and substitute your own URLs/images.

{{gwi:484030}} {{gwi:484030}} {{gwi:484030}}

<a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a>; <a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a>; <a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a>;

Glossary of terms used in above code:

HTML -- Hyper Text Markup Language
A -- Anchor tag/element
HREF -- Hyper Text Reference
IMG -- image/photo
SRC -- image source
HTTP -- Hyper Text Transfer Protocol

and .....

URL -- Uniform Resource Location: the internet address at which the requested image can be found.

Please visit my Home page where you will find clickable links to basic online HTML references/resources.

James

Jeff,

My pic site is offering the "tags" (right word??) for thumbnails. Otherwise, I would have never gotten it! Does your pic site do so? The first time I did it, I used the "tag" that makes a full-sized picture. So I ended up with 3 big pics side-by-side. Then I realized my pic site had "thumbnail tags." Tried that and, voila!... worked like a charm!

Denise in Omaha

{{gwi:484030}} Of course, a really neat way to use images in postings is to align them left and wrap the text around them as I am doing here. The thumbnail can be presented without a border as has been done here for this photograph of Discocactus subvridigriseus. The full size image can still be displayed via clicking.

{{gwi:484032}} The virtue of text wrapping around images is that detailed descriptions and information relating to them can be included. Plant pictured here is Discocactus crystallophilus




{{gwi:484034}} Of course, all this is only really necessary when a considerable amount of text, data, or descriptive information is needed to accompany multiple images. Plant pictured here is Discocactus insignis.

Sorry, everyone, I didn't take into account the long line wrap of the first posting when I composed the above -- it's getting late!

James

Hi All,
just a comment: this is surely appreciable, but noone on earth still writes html code that way. Because even knowing the html, it's so easy to make mistakes and soooo annoying... There are programs that write html for you while you just drag&drop the objects on the screen.
Some forums I have seen give you the possibility of customizing the text you're entering writing some html on your behalf. This is not the case of GW: IMHO the essential look of GW makes it more "professional".
Anyway, for the curious people using Internet Explorer: if you want to know how a page has been written, just click on View->source and look for the piece of text of interest. Have a good time! :)

Alessandro

Even better, select the bit of the page you are interested in, right click, and click on view selection source (don't think you can do this in IE, get a real browser!).

Allesandro wrote:

just a comment: this is surely appreciable, but noone on earth still writes html code that way .....

No, that is not so, Allesandro, in fact most Web authors who are dedicated to producing interoperable pages -- those that will render in all user agents -- use text editors to hand code HTML Markup. Automatic code generators ("canned" Web page software) frequently employ non-standard propriety HTML Markup that may render correctly in the more popular graphical Browsers, but not in other rendering agents.

Although these software packages are getting better at generating interoperable pages, most still fall short, not even providing alternate text for images (as we are not doing here) thus violating the requirements of accessibility for people with disabilities.

While the majority of Rendering Agents used on the Internet are Graphical Browsers that display text and images (such as MSIE, FireFox, Opera, et al), Textual Browsers that only display text and Screen Readers that read pages from left to right -- top to bottom -- and render the text as synthesized speech are also frequently employed, particularly by People with Disabilities.

The major premise of the principle of Interoperability, as advanced by the W3C, is that Web pages which contain valid HTML markup -- measured against established standards -- will function satisfactorily in all Rendering Agents. Conversely, pages that contain invalid HTML Markup with propriety tags and constructs (tag soup) -- will only function reliably in Rendering Agents designed to accommodate those tags and constructs.

To get an idea of just how many Graphical Browsers alone (therefor excluding Text Browsers and Screen Readers) are currently used on the WWW visit .....

XHTML media type test - results

..... standards complying Markup is essential to insure correct rendering in all of them, i.e. Interoperability.

The most frequently used method of checking HTML Markup for standards compliance/Web page Interoperability is to use a reliable Validator such as .....

W3C Markup Validation Service

..... most extant Web pages, composed using non-standard automatically generated Markup, will fail Validation (not interoperable). Test this GW page -- or your own -- just out of curiosity. Pages that pass Validation are interoperable (will render correctly in ALL devices) and garner accolades for the author!

James