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

Re: [ydn-javascript] I can't find a grid for the layout I need

Expand Messages
  • Matt Sweeney
    ... Hi jt, The current YUI Grid system supports a 2 column outer grid and evenly distributed nested grids within the main outer column. The outer columns sizes
    Message 1 of 2 , Apr 29, 2009
    • 0 Attachment
      jt.drumz wrote:
      > This is my first attempt at using this great YUI! I'm really intriguied about using this and felt that a good way to learn was to convert my exisitng sites. But am having trouble right out of the gate because the existing site I'm starting with is nothing like the grids that are offered at least as far as I can tell.
      >
      > This particular site has a left column of 210px a center (header, top-nav, body) of 630px and a 160px right column with a full width footer that's about 30px height. So the header is inside the sidebars or another way of looking at it is the sidebars go to the top of the page. The center area consists (in this order) of a fixed height Header @ 108px, Top-nav @ 34px and a body that can grow in height or be a fixed height @ 700px.
      >
      > How do I go about using the grids with this particular page layout? I want to do this within the confines of YUI and not hack it as I tend to do...
      >
      > Thanks in advance for your assistance!
      >
      >

      Hi jt,

      The current YUI Grid system supports a 2 column outer grid and evenly
      distributed nested grids within the main outer column.

      The outer columns sizes are based on standard ad unit sizes (160, 180,
      300, etc.), based on Y! design standards, and the inner grids are based
      on distribution (50/50, 33/66/33, 25/75, etc.).

      We currently do not provide for a 160px right column, so in addition to
      overriding the default "doc" width, some other customization is required
      to reverse the layout.

      Something like this should do it:
      <style>
      #doc {
      width: 1000px; /* override default width */
      }

      /* reverse main columns */
      #yui-main {
      float:left;
      margin:0 -160px 0 0; /* make room for sidebar */
      }

      #yui-main .yui-b {
      margin:0 160px 0 0; /* make room for sidebar */
      }

      .yui-b {
      float:right;
      width:160px;
      }
      </style>
      ...
      <div id="doc">
      <div id="hd">header</div>
      <div id="bd">
      <div id="yui-main">
      <div class="yui-b">
      <div class="yui-gf">
      <div class="yui-u first">column 1</div>
      <div class="yui-u">column 2</div>
      </div>
      </div>
      </div>

      <div class="yui-b">column 3</div>
      <div id="ft">footer</div>
      </div>


      You are on your own as far as the heights of the various units. Setting
      a height or a min-height on the elements in question should do the trick.

      -Matt
    Your message has been successfully submitted and would be delivered to recipients shortly.