Multiple image-label display

Discussion in 'HTML' started by None, Jun 12, 2007.

  1. None

    None Guest

    Hello,

    I have a table where in one column, we display an image and its label.
    This works out fine.

    However, when there are two or more images to display, we would like the
    display to break
    after each image-label pair so that they appear on top of each other.
    We currently use
    <br> tag to do this, but then images have spaces between them. If we
    don't use <br> tags,
    then the images display on the same line which is not what we want.

    Is there a way to eliminate spaces above/below each image-label pairs?
    I would like to do this
    via CSS if possible.

    Thanks in advance!


    ====================================================
    <table>
    <tr> <td> Test>
    <td> <img ...> This is image 1
    <br/>
    <img ...> This is image 2
    <br/>
    </td>
    </tr>
    </table>
     
    None, Jun 12, 2007
    #1
    1. Advertising

  2. None wrote:
    > Hello,


    Hello none. Are you associated with the domain none.com?

    http://www.dnsstuff.com/tools/whois.ch?&ip=none.com
    WHOIS - none.com

    If not your should *really* learn how to properly munge your email!

    http://www.google.com/search?hl=en&q=properly munge email&btnG=Google Search
    properly munge email - Google Search

    >
    > I have a table where in one column, we display an image and its label.
    > This works out fine.
    >
    > However, when there are two or more images to display, we would like the
    > display to break
    > after each image-label pair so that they appear on top of each other. We
    > currently use
    > <br> tag to do this, but then images have spaces between them. If we
    > don't use <br> tags,
    > then the images display on the same line which is not what we want.
    >
    > Is there a way to eliminate spaces above/below each image-label pairs? I
    > would like to do this
    > via CSS if possible.
    >
    > Thanks in advance!
    >
    >
    > ====================================================
    > <table>
    > <tr> <td> Test>
    > <td> <img ...> This is image 1
    > <br/>
    > <img ...> This is image 2
    > <br/>
    > </td>
    > </tr>
    > </table>
    >
    >


    Yes, dump the table use DIVs and style accordingly

    div.pixbox { margin: 0; padding: 0; }


    <div class="pixbox">
    <img src="somePix.jpg" alt="1st Pix">
    First one
    </div>

    <div class="pixbox">
    <img src="anotherPix.jpg" alt="2nd Pix">
    Second one
    </div>




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 12, 2007
    #2
    1. Advertising

  3. None

    None Guest

    Jonathan N. Little wrote:

    >
    > Yes, dump the table use DIVs and style accordingly
    >
    > div.pixbox { margin: 0; padding: 0; }
    >
    >
    > <div class="pixbox">
    > <img src="somePix.jpg" alt="1st Pix">
    > First one
    > </div>
    >
    > <div class="pixbox">
    > <img src="anotherPix.jpg" alt="2nd Pix">
    > Second one
    > </div>



    Hello Jonathan,

    Thank you for your feedback on munging. I am reading up on it and I
    will change it by my next post.

    I tried this <div> style you proposed. I still see the images are
    separated by white space. Is there
    a way to completely remove the white space between images so they are
    flush together?

    Thanks a bunch!
     
    None, Jun 12, 2007
    #3
  4. None

    dorayme Guest

    In article <f4mvf3$lh3$>, None <> wrote:

    > Jonathan N. Little wrote:
    >
    > >
    > > Yes, dump the table use DIVs and style accordingly
    > >
    > > div.pixbox { margin: 0; padding: 0; }
    > >
    > >
    > > <div class="pixbox">
    > > <img src="somePix.jpg" alt="1st Pix">
    > > First one
    > > </div>
    > >
    > > <div class="pixbox">
    > > <img src="anotherPix.jpg" alt="2nd Pix">
    > > Second one
    > > </div>

    >
    >
    > Hello Jonathan,
    >
    > Thank you for your feedback on munging. I am reading up on it and I
    > will change it by my next post.
    >
    > I tried this <div> style you proposed. I still see the images are
    > separated by white space. Is there
    > a way to completely remove the white space between images so they are
    > flush together?
    >
    > Thanks a bunch!


    Try:

    http://tinyurl.com/29suol

    --
    dorayme
     
    dorayme, Jun 12, 2007
    #4
  5. None

    dorayme Guest

    In article <f4mvf3$lh3$>, None <> wrote:

    > Jonathan N. Little wrote:
    >
    >
    > Hello Jonathan,
    >
    > Thank you for your feedback on munging. I am reading up on it and I
    > will change it by my next post.
    >
    > I tried this <div> style you proposed. I still see the images are
    > separated by white space. Is there
    > a way to completely remove the white space between images so they are
    > flush together?
    >



    And for another idea that may be less bizarre than my last (which
    will cause trouble overall but intended really to highlight the
    problem, if you are just having pics in your div boxes:

    http://tinyurl.com/3ajqj5

    --
    dorayme
     
    dorayme, Jun 13, 2007
    #5
  6. None

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <f4mvf3$lh3$>, None <> wrote:
    >
    > > Jonathan N. Little wrote:
    > >
    > >
    > > Hello Jonathan,
    > >
    > > Thank you for your feedback on munging. I am reading up on it and I
    > > will change it by my next post.
    > >
    > > I tried this <div> style you proposed. I still see the images are
    > > separated by white space. Is there
    > > a way to completely remove the white space between images so they are
    > > flush together?


    Better add: the trouble you are having is due to the provision in
    inline for the descenders of letters. If it was just the pics,
    and if browsers could not be set for minimum fonts, font-size
    very very small, even zero might help you and still use <br>. I
    am off like a rabbit now before the shotguns boom...

    --
    dorayme
     
    dorayme, Jun 13, 2007
    #6
  7. None wrote:

    > I tried this <div> style you proposed. I still see the images are
    > separated by white space. Is there
    > a way to completely remove the white space between images so they are
    > flush together?


    Depends, how about a URL so I can see what you are trying and then offer
    a possible solution. Far better than having me try to divine what you
    are doing, eh?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 13, 2007
    #7
    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. Shapper
    Replies:
    2
    Views:
    768
    Scott Mitchell [MVP]
    May 7, 2005
  2. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,738
    Josef K.
    May 22, 2005
  3. Praveen
    Replies:
    1
    Views:
    1,054
    Rob Williscroft
    Nov 5, 2006
  4. CSharpner
    Replies:
    0
    Views:
    1,131
    CSharpner
    Apr 9, 2007
  5. Knut Krueger
    Replies:
    8
    Views:
    327
    Knut Krueger
    Aug 20, 2013
Loading...

Share This Page