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

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

Expand Messages
  • juliebonniedaisy
    Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
    Message 1 of 14 , Nov 5, 2009
    • 0 Attachment
      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 2 of 14 , Nov 5, 2009
      • 0 Attachment
        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 3 of 14 , Nov 5, 2009
        • 0 Attachment
          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 4 of 14 , Nov 5, 2009
          • 0 Attachment
            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 5 of 14 , Nov 5, 2009
            • 0 Attachment
              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.