Thumbs plus caption line up horizontal & wrap

Discussion in 'HTML' started by paul, Dec 10, 2004.

  1. paul

    paul Guest

    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; */
    }
    paul, Dec 10, 2004
    #1
    1. Advertising

  2. paul

    WindAndWaves Guest

    "paul" <> wrote in message
    news:...
    > 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
    WindAndWaves, Dec 10, 2004
    #2
    1. Advertising

  3. paul

    paul Guest

    WindAndWaves wrote:
    > "paul" <> wrote in message
    > news:...
    >
    >>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.
    paul, Dec 11, 2004
    #3
  4. paul

    Richard Guest

    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.
    Richard, Dec 11, 2004
    #4
  5. paul

    paul Guest

    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?
    paul, Dec 11, 2004
    #5
  6. paul

    paul Guest

    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
    paul, Dec 11, 2004
    #6
  7. paul

    Richard Guest

    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.
    Richard, Dec 11, 2004
    #7
  8. paul

    paul Guest

    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, Dec 11, 2004
    #8
  9. paul

    paul Guest

    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!
    paul, Dec 11, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. osman

    help with thumbs please

    osman, Sep 3, 2004, in forum: HTML
    Replies:
    1
    Views:
    341
    osman
    Sep 5, 2004
  2. The LoxFather

    C plus plus vs C Sharp

    The LoxFather, Aug 9, 2003, in forum: C++
    Replies:
    23
    Views:
    9,169
  3. The LoxFather

    C plus plus vs C Sharp

    The LoxFather, Aug 9, 2003, in forum: C Programming
    Replies:
    23
    Views:
    1,362
  4. Rahul
    Replies:
    9
    Views:
    408
    Andrey Tarasevich
    Mar 25, 2008
  5. furqan shaikh

    c plus plus code comparator

    furqan shaikh, Nov 7, 2008, in forum: C++
    Replies:
    6
    Views:
    801
    red floyd
    Nov 12, 2008
Loading...

Share This Page