Thumbs plus caption line up horizontal & wrap

[paul]

I want to have thumbnails with captions below fill the screen, stacking
horizontally then wrapping down as needed. The following test page works
with the last few images (or text only) but when I put a <br> in there &
add the caption, it messes it up like the first two images. I tried
putting another <div> around the image & caption but that forces each
set to not roll out horizontally.

http://www.edgehill.net/1/0-selected-photos/test.htm
-<div> added to hold things together

http://www.edgehill.net/1/0-selected-photos/test1.htm
-totally messed up without the <div>

http://www.edgehill.net/1/0-selected-photos/test2.htm
-how it should work except I want captions under each thumb, note that
resizing the window makes it wrap

and the associated CSS for making a horizontal list:
ul.menu {
margin: 0;
/* margin-bottom: 1px; */
padding: 0;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
li.menu {
display: inline;
margin: 0; /*top right bottom left*/
padding: 0 0.5em 0 0.5em;
/* padding: 0;
padding-left: 0.5em;
padding-right: 0.5em; */
}

 

[WindAndWaves]

I want to have thumbnails with captions below fill the screen, stacking
horizontally then wrapping down as needed. The following test page works
with the last few images (or text only) but when I put a <br> in there &
add the caption, it messes it up like the first two images. I tried
putting another <div> around the image & caption but that forces each
set to not roll out horizontally.

http://www.edgehill.net/1/0-selected-photos/test.htm
-<div> added to hold things together

http://www.edgehill.net/1/0-selected-photos/test1.htm
-totally messed up without the <div>

http://www.edgehill.net/1/0-selected-photos/test2.htm
-how it should work except I want captions under each thumb, note that
resizing the window makes it wrap

and the associated CSS for making a horizontal list:
ul.menu {
margin: 0;
/* margin-bottom: 1px; */
padding: 0;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
li.menu {
display: inline;
margin: 0; /*top right bottom left*/
padding: 0 0.5em 0 0.5em;
/* padding: 0;
padding-left: 0.5em;
padding-right: 0.5em; */
}

I would do:

LI {float: left;}

and then if you wanted to have a new line

DIV.newline {clear: both;}

I hope this makes sense.

- Nicolaas

 

[paul]

I would do:

LI {float: left;}

and then if you wanted to have a new line

DIV.newline {clear: both;}

I hope this makes sense.

- Nicolaas

Ha, well I never understood float but that alone did the trick without
needing the div, just using a regular <br>

Thanks!

Hmm, now I've got some text below all that which gets pulled into the
whole float thing, sloshing around when the window gets resized instead
of staying centered below. I put all the thumbnails in a table and fixed
it though I'm sure you'd cringe at that, putting them in a div didn't
help. Is there a more proper way to turn off the float for a new section
below? In the final page I applied the float to the div containing each
individual thumb/caption. No list was needed like my test page.

Anyways, here's the result:
http://www.edgehill.net/1
Apart from the different height of some thumbs it works pretty well.

 

[Richard]

I want to have thumbnails with captions below fill the screen, stacking
horizontally then wrapping down as needed. The following test page works
with the last few images (or text only) but when I put a <br> in there &
add the caption, it messes it up like the first two images. I tried
putting another <div> around the image & caption but that forces each
set to not roll out horizontally.

Now you've almost sorted out the mess so that it's functional.
Why go to a new page for another submenu? Then another new page just to get
to the images? Wasted effort.
If I'm on dialup, that could tick me off real easy.

Then on the image page, you show a new page just to show the larger image.
Time to learn what z-index is all about.
One page for all.
Which could also be used for your menus as well.

 

[paul]

Now you've almost sorted out the mess so that it's functional.
Why go to a new page for another submenu? Then another new page just to get
to the images? Wasted effort.
If I'm on dialup, that could tick me off real easy.

Then on the image page, you show a new page just to show the larger image.
Time to learn what z-index is all about.
One page for all.
Which could also be used for your menus as well.

I have no clue what a z-index is.

If I understand what you are discussing, I have the galleries broken
into multiple pages so that only a few thumbnails show in order to load
faster on dialup in the event that there are 50 or 100 pictures. Also it
doesn't clutter up the screen so you don't need to scroll past 50
thumbnails to see the picture.

I'm going to implement the thumbnail preview in the nested folders next.
It's just nicer than a plain text list. This thing formats folders that
I can just dump up on the site & shuffle around with PHP. I can put a
few choice pictures in the root of each folder with subfolders below but
for now many of these are just folders containing folders for organizing
what will be a large collection of galleries. If I had them all strung
out in one index it would be a mess. Am I understanding your objections?

 

[paul]

I'm going to implement the thumbnail preview in the nested folders next.

OK I got that up now. It's a bit screwy with no way to handle long text
& some other funny stuff but... for the moment...

http://www.edgehill.net/1/index.php?SCREEN=home.php

 

[Richard]

paul wrote:

OK I got that up now. It's a bit screwy with no way to handle long text
& some other funny stuff but... for the moment...

http://www.edgehill.net/1/index.php?SCREEN=home.php

Think of z-index as a page in a book.
The next page is hidden behind the one you're reading.
Or a pair of graphic images on the computer screen, where one appears to
travel behind the other.
In reality, they are sharing the same space, with one having priority over
the other.

I'm slowly putting together a working demo for you using your own basic
design.
When finished, you'll see how z-indexing resolves a few problems of loading
unnecessary pages.
Specially when content is not an issue.

 

[paul]

I cleaned it up some more. Also, I remembered that I had looked at this
issue before & made the following test pages:
<http://www.edgehill.net/1/index.php?SCREEN=ecards.php&IMG_DIR=MISC/html-coding/css>
Doh!
The "gallery" pages show several different ways to accomplish this, all
using float left.

 

[paul]

Think of z-index as a page in a book.
The next page is hidden behind the one you're reading.
Or a pair of graphic images on the computer screen, where one appears to
travel behind the other.
In reality, they are sharing the same space, with one having priority over
the other.

I'm slowly putting together a working demo for you using your own basic
design.
When finished, you'll see how z-indexing resolves a few problems of loading
unnecessary pages.
Specially when content is not an issue.

Sounds interesting!