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
  • 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 1 of 14 , Nov 4, 2009
    • 0 Attachment
      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 2 of 14 , Nov 4, 2009
      • 0 Attachment
        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 3 of 14 , Nov 4, 2009
        • 0 Attachment
          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 4 of 14 , Nov 4, 2009
          • 0 Attachment
            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 5 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 6 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 7 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 8 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 9 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.