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

Re: [ydn-javascript] Re: can anyone tell me why this grid doesn't render properly?

Expand Messages
  • Matt Sweeney
    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
    Message 1 of 14 , Nov 4, 2009
      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>
      >
      >
      >
      >
    • Christian Tiberg
      Sure, do it your way :) It was just a friendly note. I didn t learn that system at all, and I m not using the YUI grids system either. I simply learned enough
      Message 2 of 14 , Nov 4, 2009
        Sure, do it your way :) It was just a friendly note. I didn't learn that system at all, and I'm not using the YUI grids system either. I simply learned enough CSS to roll my own.

        The only thing I needed was to realize that setting float: none, display:inline on a div makes it work.

        Best regards,
         Christian Tiberg


        2009/11/5 Matt Sweeney <msweeney@...>
         

        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 for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
        Message 3 of 14 , Nov 5, 2009
          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
          Christian, that sounds like good advice. I ll have to dig in a bit more to figure this out. Thank you again.
          Message 4 of 14 , Nov 5, 2009
            Christian, that sounds like good advice. I'll have to dig in a bit more to figure this out. Thank you again.

            --- In ydn-javascript@yahoogroups.com, Christian Tiberg <ctiberg@...> wrote:
            >
            > Sure, do it your way :) It was just a friendly note. I didn't learn that
            > system at all, and I'm not using the YUI grids system either. I simply
            > learned enough CSS to roll my own.
            >
            > The only thing I needed was to realize that setting float: none,
            > display:inline on a div makes it work.
            >
            > Best regards,
            > Christian Tiberg
            >
            >
            > 2009/11/5 Matt Sweeney <msweeney@...>
            >
            > >
            > >
            > > 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
            Also, the builder only displays a yui-main div for me if I add a sidebar.
            Message 5 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 6 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 7 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.