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

Re: can anyone tell me why this grid doesn't render properly?

Expand Messages
  • juliebonniedaisy
    Also, the builder only displays a yui-main div for me if I add a sidebar.
    Message 1 of 14 , Nov 5, 2009
      Also, the builder only displays a yui-main div for me if I add a sidebar.

      --- In ydn-javascript@yahoogroups.com, "juliebonniedaisy" <juliebonniedaisy@...> wrote:
      >
      > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
      >
      > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> wrote:
      > >
      > > Hi Julie,
      > >
      > > The issue is with the cascading rules. The units are incorrectly
      > > inheriting the -gc rather than -gb.
      > >
      > > Adding the following to your stylesheet should resolve it:
      > > .yui-gc .yui-gb .yui-u {
      > > float: left;
      > > width: 32%;
      > > }
      > >
      > >
      > > I double-checked the grid builder, and it does include the full markup
      > > template, including the "yui-main" div, but that isn't the issue here.
      > > This is exactly the type of issue I am resolving with the updated yui3
      > > grids.
      > >
      > > Sorry about the hassle.
      > >
      > > -Matt
      > >
      > > juliebonniedaisy wrote:
      > > > Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
      > > >
      > > > Everything should stay on the same line though.
      > > >
      > > > <body class="yui-skin-sam main">
      > > >
      > > > <div id="doc3">
      > > >
      > > > <div id="bd">
      > > > <div id="yui-main"> <!-- primary content -->
      > > > <div class="yui-b"> <!-- basic block -->
      > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
      > > > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
      > > > <div class="yui-u first">col 1.a</div> <!-- first unit -->
      > > > <div class="yui-u">col 1.b</div> <!-- unit -->
      > > > <div class="yui-u">col 1.c</div> <!-- unit -->
      > > > </div>
      > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
      > > > <div class="yui-u first">col 2.a</div> <!-- first unit -->
      > > > <div class="yui-u">col 2.b</div> <!-- unit -->
      > > > </div>
      > > > </div>
      > > > </div>
      > > > </div>
      > > > </div>
      > > >
      > > >
      > > > </div>
      > > >
      > > >
      > > > </body>
      > > >
      > > >
      > > >
      > > >
      > >
      >
    • Matt Sweeney
      Hi Julie, I ve posted my working version here: http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html -Matt
      Message 2 of 14 , Nov 5, 2009
        Hi Julie,

        I've posted my working version here:
        http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html

        -Matt

        juliebonniedaisy wrote:
        > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
        >
        > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
        >> Hi Julie,
        >>
        >> The issue is with the cascading rules. The units are incorrectly
        >> inheriting the -gc rather than -gb.
        >>
        >> Adding the following to your stylesheet should resolve it:
        >> .yui-gc .yui-gb .yui-u {
        >> float: left;
        >> width: 32%;
        >> }
        >>
        >>
        >> I double-checked the grid builder, and it does include the full markup
        >> template, including the "yui-main" div, but that isn't the issue here.
        >> This is exactly the type of issue I am resolving with the updated yui3
        >> grids.
        >>
        >> Sorry about the hassle.
        >>
        >> -Matt
        >>
        >> juliebonniedaisy wrote:
        >>> Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
        >>>
        >>> Everything should stay on the same line though.
        >>>
        >>> <body class="yui-skin-sam main">
        >>>
        >>> <div id="doc3">
        >>>
        >>> <div id="bd">
        >>> <div id="yui-main"> <!-- primary content -->
        >>> <div class="yui-b"> <!-- basic block -->
        >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
        >>> <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
        >>> <div class="yui-u first">col 1.a</div> <!-- first unit -->
        >>> <div class="yui-u">col 1.b</div> <!-- unit -->
        >>> <div class="yui-u">col 1.c</div> <!-- unit -->
        >>> </div>
        >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
        >>> <div class="yui-u first">col 2.a</div> <!-- first unit -->
        >>> <div class="yui-u">col 2.b</div> <!-- unit -->
        >>> </div>
        >>> </div>
        >>> </div>
        >>> </div>
        >>> </div>
        >>>
        >>>
        >>> </div>
        >>>
        >>>
        >>> </body>
        >>>
        >>>
        >>>
        >>>
        >
      • juliebonniedaisy
        Thanks, it works great now, I was missing the yui-u on yui-gb and yui-gc. Thanks again Matt.
        Message 3 of 14 , Nov 5, 2009
          Thanks, it works great now, I was missing the yui-u on yui-gb and yui-gc. Thanks again Matt.

          --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
          >
          > Hi Julie,
          >
          > I've posted my working version here:
          > http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html
          >
          > -Matt
          >
          > juliebonniedaisy wrote:
          > > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
          > >
          > > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> wrote:
          > >> Hi Julie,
          > >>
          > >> The issue is with the cascading rules. The units are incorrectly
          > >> inheriting the -gc rather than -gb.
          > >>
          > >> Adding the following to your stylesheet should resolve it:
          > >> .yui-gc .yui-gb .yui-u {
          > >> float: left;
          > >> width: 32%;
          > >> }
          > >>
          > >>
          > >> I double-checked the grid builder, and it does include the full markup
          > >> template, including the "yui-main" div, but that isn't the issue here.
          > >> This is exactly the type of issue I am resolving with the updated yui3
          > >> grids.
          > >>
          > >> Sorry about the hassle.
          > >>
          > >> -Matt
          > >>
          > >> juliebonniedaisy wrote:
          > >>> Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
          > >>>
          > >>> Everything should stay on the same line though.
          > >>>
          > >>> <body class="yui-skin-sam main">
          > >>>
          > >>> <div id="doc3">
          > >>>
          > >>> <div id="bd">
          > >>> <div id="yui-main"> <!-- primary content -->
          > >>> <div class="yui-b"> <!-- basic block -->
          > >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
          > >>> <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
          > >>> <div class="yui-u first">col 1.a</div> <!-- first unit -->
          > >>> <div class="yui-u">col 1.b</div> <!-- unit -->
          > >>> <div class="yui-u">col 1.c</div> <!-- unit -->
          > >>> </div>
          > >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
          > >>> <div class="yui-u first">col 2.a</div> <!-- first unit -->
          > >>> <div class="yui-u">col 2.b</div> <!-- unit -->
          > >>> </div>
          > >>> </div>
          > >>> </div>
          > >>> </div>
          > >>> </div>
          > >>>
          > >>>
          > >>> </div>
          > >>>
          > >>>
          > >>> </body>
          > >>>
          > >>>
          > >>>
          > >>>
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.