can anyone tell me why this grid doesn't render properly?
|
View:
New views
14 Messages
—
Rating Filter:
Alert me
|
 |
can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
It is supposed to be 2/3 - 1/3
inside the 2/3, divided into 3 inside the 1/3, divided into 2/3 - 1/3 Thanks ! <div id="doc2"> <div id="bd"> <div class="yui-gc"> <div class="yui-gb first"> <div class="yui-u first">col 1.a</div> <div class="yui-u">col 1.b</div> <div class="yui-u">col 1.c</div> </div> <div class="yui-gc"> <div class="yui-u first">col 2.a</div> <div class="yui-u">col 2.b</div> </div> </div> </div> </div> |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
bump ?
--- In ydn-javascript@..., "juliebonniedaisy" <juliebonniedaisy@...> wrote: > > It is supposed to be 2/3 - 1/3 > inside the 2/3, divided into 3 > inside the 1/3, divided into 2/3 - 1/3 > Thanks ! > > > <div id="doc2"> > > <div id="bd"> > > <div class="yui-gc"> > <div class="yui-gb first"> > <div class="yui-u first">col 1.a</div> > <div class="yui-u">col 1.b</div> > <div class="yui-u">col 1.c</div> > </div> > <div class="yui-gc"> > <div class="yui-u first">col 2.a</div> > <div class="yui-u">col 2.b</div> > </div> > </div> > </div> > </div> > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
oh great grids master make thyself known ! We bring you grids of joy.
--- In ydn-javascript@..., "juliebonniedaisy" <juliebonniedaisy@...> wrote: > > It is supposed to be 2/3 - 1/3 > inside the 2/3, divided into 3 > inside the 1/3, divided into 2/3 - 1/3 > Thanks ! > > > <div id="doc2"> > > <div id="bd"> > > <div class="yui-gc"> > <div class="yui-gb first"> > <div class="yui-u first">col 1.a</div> > <div class="yui-u">col 1.b</div> > <div class="yui-u">col 1.c</div> > </div> > <div class="yui-gc"> > <div class="yui-u first">col 2.a</div> > <div class="yui-u">col 2.b</div> > </div> > </div> > </div> > </div> > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by Matt Sweeney
::
Rate this Message:
Hi Julie,
Your grid markup is incomplete. The "yui-main" id wrapper is required around the content grid. The content block inside of yui-main requires the "yui-b" class wrapper. ... <div id="yui-main"> <div class="yui-b"> <div class="yui-gc"> <div class="yui-gb first"> <div class="yui-u first">col 1.a</div> <div class="yui-u">col 1.b</div> <div class="yui-u">col 1.c</div> </div> <div class="yui-gc"> <div class="yui-u first">col 2.a</div> <div class="yui-u">col 2.b</div> </div> </div> </div> </div> </div> ... I recommend starting with the Grid Builder[1] to get the basic template together before nesting grids. -Matt [1] http://developer.yahoo.com/yui/grids/builder/ juliebonniedaisy wrote: > It is supposed to be 2/3 - 1/3 > inside the 2/3, divided into 3 > inside the 1/3, divided into 2/3 - 1/3 > Thanks ! > > > <div id="doc2"> > > <div id="bd"> > > <div class="yui-gc"> > <div class="yui-gb first"> > <div class="yui-u first">col 1.a</div> > <div class="yui-u">col 1.b</div> > <div class="yui-u">col 1.c</div> > </div> > <div class="yui-gc"> > <div class="yui-u first">col 2.a</div> > <div class="yui-u">col 2.b</div> > </div> > </div> > </div> > </div> > > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
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> |
|
|
Re: Re: can anyone tell me why this grid doesn't render properly?
by Christian Tiberg
::
Rate this Message:
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> > > > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
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@..., 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> > > > > > > > |
|
|
Re: Re: can anyone tell me why this grid doesn't render properly?
by Matt Sweeney
::
Rate this Message:
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> > > > > |
|
|
Re: Re: can anyone tell me why this grid doesn't render properly?
by Christian Tiberg
::
Rate this Message:
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> > > > > > > > > > > > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
--- In ydn-javascript@..., 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> > > > > > > > > > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
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@..., 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> > > > > > > > > > > > > > > > > > > > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
Also, the builder only displays a yui-main div for me if I add a sidebar.
--- In ydn-javascript@..., "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@..., 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> > > > > > > > > > > > > > > > |
|
|
Re: Re: can anyone tell me why this grid doesn't render properly?
by Matt Sweeney
::
Rate this Message:
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@..., 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> >>> >>> >>> >>> > |
|
|
Re: can anyone tell me why this grid doesn't render properly?
by juliebonniedaisy
::
Rate this Message:
Thanks, it works great now, I was missing the yui-u on yui-gb and yui-gc. Thanks again Matt.
--- In ydn-javascript@..., 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@..., 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> > >>> > >>> > >>> > >>> > > > |
| Free embeddable forum powered by Nabble | Forum Help |
