Forums

Board index » YUI 2.x: » CSS

Page 1 of 1   [ 4 posts ]
New Topic | Post Reply | Print view

JF Rompré

  • Username: KingCode
  • Joined: Sun Sep 20, 2009 5:45 am
  • Posts: 1
  • Offline
  • Profile
Tags:

Non-trivial nested grid doesn't work: grid C within F

Post Posted: Sun Sep 20, 2009 6:37 am
+0-
Hello,

I am currently shopping for a grid framework and just tried making a simple, but non-trivial nesting example of a grid F (1/4-3/4) nesting another grid C (2/3-1/3) within its second element and can't get the nested grid to respect its API contracted proportions.

After looking at the cascade within Firebug, the desired 'yui-gc div.first' width of 66% gets overriden by the container's '.yui-gf div.first' 24%. In other words, the cascades 'mistakenly' chooses coupling the parent grid's "yui-gf" with the child grid's "first" classes, over the direct hierarchy "yui-gc div.first".

Is there a workaround for this? I tried using a cleaner structure with 'yui-gc' as a direct child of 'yui-gf' which expectedly (class hierarchy doesn't change) doesn't fix the problem. To get the proper width I had to force the correct widths with an override, which defeats the purpose of using a grid system; also, I still couldn't get the nested second unit to line up with its sibling.

Below is my code - what am I doing wrong? Or is there a limitation on nesting grids in YUI?

Thanks for any comment,

KC

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grids CSS Example - YUI Grids - Trying Special Nesting Grid F: 1/4 - 3/4 where the second div nests a Grid C: 2/3 - 1/3</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
</head>

<body>

<style type="text/css">/*
#CenterPanel .yui-gc .yui-u {width: 33%}
#CenterPanel .yui-gc div.first { width: 66%}
*/
</style>
<!-- the id on the containing div determines the page width. -->
<!-- #doc = 750px; #doc2 = 950px; #doc3 = 100%; #doc4 = 974px -->
<div id="doc3">

<div class="Header yui-gd">
<div class="Logo yui-u first">LOGO: head of the class!</div>
<div class="TabContainer yui-u">Tab1 Tab2 ....Tab6</div>
</div>

<div class="Middle yui-gf">
<div class="LeftSide yui-u first"><ul><li>link1</a></li><li><a href="">link2</a></li></ul></div>
<div id="CenterPanel" class="CenterContainer yui-u">
<div class="yui-gc">
<div class="MainContent yui-u first"> Content ipsum dolor blahblahblah ontent psum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblah Content psum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblahContent ipsum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblah Content ipsum dolor blahblahblahContent </div>
<div class="RightContent yui-u">GIMME A SHOPPING CART, FAST!(This should line up vertically with its sibling)
</div>
</div>
</div>
</div>


<div id="Footer">
Smelly footer
</div>

</div>
</body>
</html>

James Ponikvar

  • Username: jlp
  • Joined: Wed Oct 21, 2009 5:54 am
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: Non-trivial nested grid doesn't work: grid C within F

Post Posted: Wed Oct 21, 2009 6:52 am
+0-
Your markup is missing a 'div' tag and an 'a' tag, but correcting those problems did not restore the layout to its intended state.

I tried to produce the same structure to no effect. You're supposed to be able to use grids as units of other grids when nesting (so that the 'yui-u' actually becomes a 'yui-g') but that did not work either. Here is the code I tested in the latest versions of FF/IE/Chrome:

Code:
<div id='doc3'>
   <div id='bd'>
      <div class='yui-gf'>
         <div class='yui-u first'>List of menu stuff</div>
         <div class='yui-gc'>
            <div class='yui-u first'>
               <p>...content...</p>
               <p>...content...</p>
               
            </div>
            <div class='yui-u'>
               <p>...content...</p>
               <p>...content...</p>
            </div>
         </div>
      </div>
   </div>
</div>





For some reason, the blocks inside the 'yui-gc' grid are not floating side-by-side, possibly due to some issue with calculating the widths. What else is odd is that even though I have the page layout set to a fluid width, the #bd div is constrained to 750px in width.

nima dilmaghani

  • Joined: Sun Feb 21, 2010 9:37 pm
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: Non-trivial nested grid doesn't work: grid C within F

Post Posted: Sun Feb 21, 2010 9:53 pm
+0-
I ran into exactly this same bug today. Replacing yui-gf with yui-g tag and forcing the widths of the enclosed units with style="width:66.6%" and style="width:33.3% seems to fix the issue.

However, replacing yui-gf with any other grid produces a bug. The defect here really manifests itself as 5 different bugs. Could the YUI team not have caught it in their testing? Is there a more solid patch?

luker

  • Joined: Wed May 19, 2010 1:40 pm
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: Non-trivial nested grid doesn't work: grid C within F

Post Posted: Wed May 19, 2010 1:44 pm
+0-
I was going nuts trying to solve this float bug in IE7. I noticed the bug only affects special grids .yui-gc (2/3,1/3) and .yui-gd (1/3,2/3).

Therefore, I'm serving a star hack to the first unit to decrease the unit's width by 1 or 2 percent. The smaller width (on the first unit) allows the units to float side-by-side in IE7.

Code:
.yui-gc .first {*width: 65% !important;}
.yui-gd .first {*width: 31% !important;}


I hope this helps, and if there's a better solution, I'm all ears.

Peace,
Luke Robinson
Page 1 of 1   [ 4 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group