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
  • lou_tribal
    So in your case use the following (the reverse order of column 3 and 2 is important):
    Message 1 of 9 , Dec 31, 2008
    • 0 Attachment
      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>

      &lt;

      --- 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>
      > > &lt;
      > >
      > >
      > >
      > > --- 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
      > > >
      > >
      >
    • gordonscottplumlee
      (Wrote what is below before I saw this reply. I think that will fix it for you, and it s the same sort of thing I did. I used the yui-BUG class to fix the
      Message 2 of 9 , Dec 31, 2008
      • 0 Attachment
        (Wrote what is below before I saw this reply. I think that will fix
        it for you, and it's the same sort of thing I did. I used the yui-BUG
        class to fix the problem only on that one page, because I used some
        similar nesting that didn't trigger the problem on other pages)

        I haven't worked through your exact problem, so take this with a grain
        of salt. I just saw something similar trying to nest a yui-g inside a
        yui-gd, and the styling went nuts when I did. There is a limit as to
        what can be nested, and you might be hitting this bug (search the
        mailing list for nesting grids and there are several threads from Nate
        regarding this).

        I ended up applying a class of yui-BUG to the body so I could fix it
        in this one case only, and writing two style rules with !important to
        override the widths that were getting applied because of how things
        were nested.

        If you haven't figured it out, let me know and I'll try to take a more
        detailed look today.

        --- 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
        > > > >
        > > >
        > >
        >
      • 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 3 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 4 of 9 , Feb 6 2:44 PM
          • 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.