Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Thumbs plus caption line up horizontal & wrap

Reply
Thread Tools

Thumbs plus caption line up horizontal & wrap

 
 
paul
Guest
Posts: n/a
 
      12-10-2004
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; */
}
 
Reply With Quote
 
 
 
 
WindAndWaves
Guest
Posts: n/a
 
      12-10-2004

"paul" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


 
Reply With Quote
 
 
 
 
paul
Guest
Posts: n/a
 
      12-11-2004
WindAndWaves wrote:
> "paul" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>
>>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


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.
 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      12-11-2004
paul wrote:

> 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.



 
Reply With Quote
 
paul
Guest
Posts: n/a
 
      12-11-2004
Richard wrote:

> paul wrote:
>
> > 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.



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?
 
Reply With Quote
 
paul
Guest
Posts: n/a
 
      12-11-2004
paul wrote:

> 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
 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      12-11-2004
paul wrote:

> paul wrote:


>> 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



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.


 
Reply With Quote
 
paul
Guest
Posts: n/a
 
      12-11-2004
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.
 
Reply With Quote
 
paul
Guest
Posts: n/a
 
      12-11-2004
Richard wrote:

> paul wrote:
>
> > paul wrote:

>
> >> 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

>
>
> 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!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Thumbs Plus's Photo Viewer: Standalone Execution? (PeteCresswell) Digital Photography 2 04-11-2007 09:13 PM
Thumbs plus Gordon MacPherson Digital Photography 13 03-07-2006 07:10 AM
JList: horizontal wrap not working with 5 or more items per row Scott Steiner Java 0 07-05-2005 03:23 PM
Thumbs Plus destroys EXIF? Terry Pinnell Digital Photography 20 12-11-2004 06:58 PM
Anybody using Thumbs Plus 2000 ? Michael Schnell Digital Photography 2 09-14-2003 05:41 AM



Advertisments