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

Re: YUI-Grids Need Help with Nesting a YUI-GB in a YUI-GE

Expand Messages
  • flooracle
    Lou, Gordon, Thank you both for your help with this. I don t use the skins, so I removed the .yui-skin-sam from the code and it worked great! I very much
    Message 1 of 9 , Dec 31, 2008
    • 0 Attachment
      Lou, Gordon,

      Thank you both for your help with this. I don't use the skins, so I
      removed the ".yui-skin-sam" from the code and it worked great!
      I very much appreciate you taking the time to share your knowledge
      with me.

      Jim
      --- In ydn-javascript@yahoogroups.com, "lou_tribal" <lou_tribal@...>
      wrote:
      >
      > So in your case use the following (the reverse order of column 3 and
      2
      > is important):
      >
      > <div class="yui-ge" >
      > <div class="yui-u first">
      > <div class="columnWrapper">
      > <div class="yui-gb" >
      > <div class="yui-u first">Column 1</div>
      > <div class="yui-u">Column 3</div>
      > <div class="yui-u">Column 2</div>
      > </div>
      > </div>
      > </div>
      > <div class="yui-u">Long List</div>
      > </div>
      >
      > And add the folliwng style in your document (if you are using a skin
      > different from yui-skin-sam update the style accordingly):
      >
      > <style>
      > .yui-skin-sam .yui-ge .yui-gb .yui-u{width:32%}
      > </style>
      >
      > <
      >
      > --- In ydn-javascript@yahoogroups.com, "flooracle" <flooracle@>
      > wrote:
      > >
      > > Lou,
      > > Second layout. Can't use the 4 - 1/4's though, the 1st three
      columns
      > > need to be wrapped in another div for styling based on my
      designer's
      > > plan here.
      > >
      > > ---------------------------------- -------------
      > > | column 1 | column 2 | column 3 | | long list |
      > > | column 1 | column 2 | column 3 | | long list |
      > > | column 1 | column 2 | column 3 | | long list |
      > > | column 1 | column 2 | column 3 | | long list |
      > > ---------------------------------- | long list |
      > > -------------
      > >
      > > Make sense?
      > >
      > > Thanks for your help,
      > > Jim
      > >
      > > --- In ydn-javascript@yahoogroups.com, "lou_tribal" lou_tribal@
      > > wrote:
      > > >
      > > > I am not hundred % sure about what you want to do but I will try
      to
      > > find
      > > > out :).
      > > >
      > > > First layout:
      > > >
      > > > | column 1 | column 2 | column 3 |
      > > > ----------------------------------
      > > > | long list that span 3 columns |
      > > > In this case your divs are wrong you only need one grid.
      > > >
      > > > <div class="yui-gb" >
      > > > <div class="yui-u first">Column 1</div>
      > > > <div class="yui-u" >Column 2</div>
      > > > <div class="yui-u" >Column 3</div>
      > > > </div>
      > > > <div class="yui-u" >Long List that spans all 3 columns</div>
      > > >
      > > > Second layout:
      > > >
      > > > | column 1|column 2|column 3|long list|
      > > >
      > > > where columns are in the first 3/4 and the list in the last 1/4
      > > > In this case just simplify your layout using the grid 1/4 - 1/4
      -
      > > 1/4 -
      > > > 1/4 (3/4 divided by 3 is 1/4 each column)
      > > >
      > > > <div class="yui-g" >
      > > > <div class="yui-u first">
      > > > <div class="yui-g" >
      > > > <div class="yui-u first">Column 1</div>
      > > > <div class="yui-u">Column 2</div>
      > > > </div>
      > > > </div>
      > > > <div class="yui-u">
      > > > <div class="yui-g" >
      > > > <div class="yui-u first">Column 3</div>
      > > > <div class="yui-u">Long List</div>
      > > > </div>
      > > > </div>
      > > > </div>
      > > > <
      > > >
      > > >
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "flooracle" <flooracle@>
      > > > wrote:
      > > > >
      > > > > Hi,
      > > > >
      > > > > I am trying to nest a YUI-GB, 3 column grid inside the first
      (3/4)
      > > > > part of a YUI-GE. The results are not what I expected. The
      1st
      > > of
      > > > > the YUI-GB columns seems to take up the first 2 columns. The
      2nd
      > > is
      > > > > underneath the 3rd.
      > > > >
      > > > > My code looks like this:
      > > > >
      > > > > <div class="yui-ge">
      > > > > <div class="yui-u first">
      > > > > <div class="yui-gb">
      > > > > <div class="yui-u first">Column 1</div>
      > > > > <div class="yui-u">Column 2</div>
      > > > > <div class="yui-u">Column 3</div>
      > > > > </div>
      > > > > </div>
      > > > > <div class="yui-u">Long List that spans all 3 columns</div>
      > > > > </div>
      > > > >
      > > > > Thanks in advance for any help that can be send my way. I am
      a
      > > > > webmaster, not a developer, so please excuse my ignorance if
      it is
      > > an
      > > > > easy, obvious fix.
      > > > >
      > > > > Thanks,
      > > > > Jim
      > > > >
      > > >
      > >
      >
    • paulmefford
      I don t know if you got the fix for this but I had the same problem and used the following CSS to fix it. I looked at the grid css and its no wonder there
      Message 2 of 9 , Feb 6, 2009
      • 0 Attachment
        I don't know if you got the fix for this but I had the same problem
        and used the following CSS to fix it. I looked at the grid css and
        its no wonder there may be a few bugs. There are all kinds of
        permutations with nesting grids, I think a lower property messes up
        the correct above.
        .yui-ge .yui-gb .yui-u div.first, .yui-ge .yui-gb .yui-u{
        width:32%;
        float:left;
        }


        --- In ydn-javascript@yahoogroups.com, "flooracle" <flooracle@...> wrote:
        >
        > Hi,
        >
        > I am trying to nest a YUI-GB, 3 column grid inside the first (3/4)
        > part of a YUI-GE. The results are not what I expected. The 1st of
        > the YUI-GB columns seems to take up the first 2 columns. The 2nd is
        > underneath the 3rd.
        >
        > My code looks like this:
        >
        > <div class="yui-ge">
        > <div class="yui-u first">
        > <div class="yui-gb">
        > <div class="yui-u first">Column 1</div>
        > <div class="yui-u">Column 2</div>
        > <div class="yui-u">Column 3</div>
        > </div>
        > </div>
        > <div class="yui-u">Long List that spans all 3 columns</div>
        > </div>
        >
        > Thanks in advance for any help that can be send my way. I am a
        > webmaster, not a developer, so please excuse my ignorance if it is an
        > easy, obvious fix.
        >
        > Thanks,
        > Jim
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.