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

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

Expand Messages
  • juliebonniedaisy
    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
    Message 1 of 14 , Nov 4, 2009
      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
      What finally got how this worked into my head is the 960 grid system. Their simple image said it all, and the code was easy to read. But I don t copy it
      Message 2 of 14 , Nov 4, 2009
        What finally got how this worked into my head is the 960 grid system. Their simple image said it all, and the code was easy to read. But I don't copy it verbatim, now I know enough to write my own :)


        Best regards,
         Christian Tiberg


        2009/11/4 juliebonniedaisy <juliebonniedaisy@...>
         

        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
        surely it s not necessary to learn an entirely different grid system to make this one work. lets not over complicate it please. if you see the problem
        Message 3 of 14 , Nov 4, 2009
          surely it's not necessary to learn an entirely different grid system to make this one work. lets not over complicate it please. if you see the problem please let me know.

          Regards...

          --- In ydn-javascript@yahoogroups.com, Christian Tiberg <ctiberg@...> wrote:
          >
          > What finally got how this worked into my head is the 960 grid system. Their
          > simple image said it all, and the code was easy to read. But I don't copy it
          > verbatim, now I know enough to write my own :)
          >
          > http://960.gs/
          >
          > Best regards,
          > Christian Tiberg
          >
          >
          > 2009/11/4 juliebonniedaisy <juliebonniedaisy@...>
          >
          > >
          > >
          > > 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, 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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.