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

Re: 3 grids layout: divide center column

Expand Messages
  • filippo.trocca
    Thanks Erik, your example is perfect! Filippo. ... href= http://yui.yahooapis.com/2.4.1/build/reset-fonts-grids/reset-fonts-grids.css ...
    Message 1 of 3 , Dec 31, 2007
    • 0 Attachment
      Thanks Erik,
      your example is perfect!
      Filippo.



      --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
      >
      > Filippo,
      >
      > I'm not totally sure what your design goal is here, but the odds are
      > that you're running into one of the nesting limitations that affect
      > the special grids. In some cases, nested special grids don't play
      > well; in those cases, you need to make some minor adjustments.
      >
      > Here's a version of the layout I think you're aiming at:
      >
      > http://yuiblog.com/sandbox/yui/v241/examples/grids/innercolumns.html
      >
      > I've adjusted the inner columns to be artificially narrow, which keeps
      > them in line; you can play with the width some given your own design,
      > but technique should be sound.
      >
      > We will be providing some specific patches for situations like this in
      > a subsequent release so that you'll have an official workaround when
      > doing this kind of nesting.
      >
      > The full HTML of my example follows.
      >
      > Regards,
      > Eric
      >
      > ______________________________________________
      > Eric Miraglia
      > Yahoo! User Interface Library
      >
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <title>YUI Base Page</title>
      > <link rel="stylesheet"
      href="http://yui.yahooapis.com/2.4.1/build/reset-fonts-grids/reset-fonts-grids.css

      > " type="text/css">
      > <style type="text/css">
      > #mainContent.yui-gb .yui-u {width:30%; border:1px solid red;}
      > </style>
      > </head>
      > <body>
      > <div id="doc4" class="yui-t1">
      > <div id="hd"><h1>YUI: CSS Grid Builder (header section)</h1></div>
      > <div id="bd">
      > <div id="yui-main">
      > <div class="yui-b"><div class="yui-ge">
      > <div class="yui-u first">
      > <div id="mainContent" class="yui-gb">
      > <div class="yui-u first">
      > Column one
      > </div>
      > <div class="yui-u">
      > Column two
      > </div>
      > <div class="yui-u">
      > Column three
      > </div>
      > </div>
      > </div>
      > <div class="yui-u">
      > Rightmost column.
      > </div>
      > </div>
      > </div>
      > </div>
      > <div class="yui-b">
      > Navigation/ leftmost column
      > </div>
      >
      > </div>
      > <div id="ft">Footer is here.</div>
      > </div>
      > </body>
      > </html>
      >
      > On Dec 28, 2007, at 2:50 AM, filippo.trocca wrote:
      >
      > > i' ve created a 3grids layout:
      > >
      > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > > "http://www.w3.org/TR/html4/strict.dtd">
      > > <html>
      > > <head>
      > > <title>YUI Base Page</title>
      > > <link rel="stylesheet"
      href="http://yui.yahooapis.com/2.4.1/build/reset-fonts-
      > > grids/reset-fonts-grids.css" type="text/css">
      > > <link rel="stylesheet" href="static.css" type="text/css">
      > > </head>
      > > <body>
      > > <!-- choose fluid page and Template Preset -->
      > > <div id="doc2" class="yui-t1">
      > > <div id="hd" style="background-image:url(images/top_bg.gif);
      > > background-
      > > repeat: no-repeat;">
      > > <div class="yui-gd" >
      > > <div class="yui-u first" >
      > > <a href="//"><img src=".../images/wrapper/top_logo.gif"></a>
      > > </div>
      > > <div class="yui-u">
      > >
      > > <div id="NavigationBar"> Aiuto | Informazioni | Chi Siamo |
      > > Contattateci
      > > | Garanzie</div>
      > > <div id="linkContainer">
      > > <a href="../static/wrapper.asp?param=Delivery.htm"><img
      > > src="../images/wrapper/top_link1.gif"></a>
      > > <a href="../static/wrapper.asp?
      > > param=csr_contact_us_topics.htm"><img src="../images/wrapper/
      > > top_link2.gif"></a>
      > > </div>
      > > </div>
      > > </div>
      > >
      > > <div id="yui-main">
      > > <div class="yui-b">
      > >
      > > <div class="yui-ge">
      > > <div class="yui-u first">
      > >
      > > a
      > > </div>
      > >
      > >
      > >
      > >
      > > <div class="yui-u">aaaaaaaaa aaaaaa aaaaaaaaa aaaaaaaaa
      > > aaaaa</div>
      > > </div>
      > > <div class="yui-ge">
      > > <div class="yui-u first">
      > >
      > > a
      > > </div>
      > >
      > >
      > >
      > >
      > > <div class="yui-u">aaaaaaaaa aaaaaa aaaaaaaaa aaaaaaaaa
      > > aaaaa</div>
      > > </div>
      > >
      > >
      > >
      > > </div>
      > > </div>
      > >
      > > <div class="yui-b">aaaaaa</div>
      > > </div>
      > > </div>
      > > </body>
      > > </html>
      > >
      > > Now i wish divide the center column into 3 columns using yui-gb
      > > class, but it's
      > > impossible. If I use a 2 column layout there isn't any problem, If I
      > > try to use the 3 columns
      > > layout it doesn't work, if I use a 2 column layout and then try to
      > > divide the largest column
      > > it doens't work again,
      > > Someone can help me?
      > > Filippo
      > >
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.