Loading ...
Sorry, an error occurred while loading the content.

Re: noob - thumbnail layouts

Expand Messages
  • kenpglover
    Charlie, I don t think what you are trying to do can be done inside of a table. When you specify a table you tell the table how many columns it will have. A
    Message 1 of 2 , Jul 30, 2009
    • 0 Attachment
      Charlie,

      I don't think what you are trying to do can be done inside of a table. When you specify a table you tell the table how many columns it will have. A table is a very static thing.

      You're best bet would be to get rid of the table and put the images inside floating divs with set widths. This would give you the flexibility you need along with the structure you require inside the divs themselves. Something like this might help--

      <head>
      <style>
      .floating-img-div{
      float:left; /*this tells the browser to float left and let the next div with the same class do the same. It also allows the div to drop down to the next line if there is no room due to browser width*/
      width:100px;/*set this width the size of the thumbnails that you are displaying. */
      height:100px;/*this height can be replaced by "auto" or removed when img is inserted*/
      background:#333333; /*this is just here to take the place of the img. you can remove this when img is placed*/
      margin:10px

      }
      </style>
      </head>

      <body>

      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>
      <div class="floating-img-div"></div>


      </body>

      I've commented the styles on the top so you know how and what they do.

      Good luck

      Ken
      --- In ydn-javascript@yahoogroups.com, "mrccod" <mrccod@...> wrote:
      >
      > I am new to this YUI stuff but and friend said it may have the answer to my problem...
      > I am trying to find the layout code that displays the thumbnail search results on both Yahoo and Google image search results - ie. the javascript and css that would let me load divs into table cells(with percentage cellspacing) and wrap the right-most thumbnail down to the next row when the window is resized smaller (or up a row when the window is resized bigger) - the closet I have got so far is here
      >
      > www.supernaturalstudios.com/liquid_layout.html
      >
      > but there is no table here keeping the right-most thumbnail the same width from the edge as the left-most thumb
      >
      > any suggestions would be greatly appreciated
      >
      > thanks,
      > charlie
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.