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

Re: Issues with customizing grid column size

Expand Messages
  • Bo
    Nate, I would like a fixed three column layout, with the left column for my content, and the two right columns suitable for both content and standard ad
    Message 1 of 6 , Aug 24, 2008
    • 0 Attachment
      Nate,

      I would like a fixed three column layout, with the left column for my
      content, and the two right columns suitable for both content and
      standard ad formats, 300px and 180px respectively plus margins.

      Starting with #doc4 and yui-t4, how do I split the remaining two left
      columns into roughly 480px and 310px? Can I modify the split
      percentage of yui-gc to accomplish this? If so, how do I most easily
      accomplish this?

      Thanks,

      /Bo

      --- In ydn-javascript@yahoogroups.com, "Nate Koechley" <natek@...> wrote:
      >
      > He Pat,
      >
      > Your situation, with a standard-sized ad unit in one of the columns,
      is one
      > of the key reasons Template Presets exist as included functionality
      in YUI
      > Grids. For example, the "t4" template preset has a right column
      180px wide,
      > designed to hold skyscraper ads.
      >
      > http://developer.yahoo.com/yui/grids/#preset_templates
      > http://developer.yahoo.com/yui/examples/grids/example_t4.html
      >
      > I recommend you start with the t4 example above. Next, follow these
      > instructions to customize the overall page with (to 975 I think you
      said):
      >
      > http://developer.yahoo.com/yui/grids/#custom_page_width
      >
      > At that point, you'll have a 180px colum on the right, and a wide main
      > column taking up the rest of the space. Depending on your design you
      could
      > float the 200px picture with your own CSS. However, if you wanted a true
      > column there to hold the picture I'd recommend using one of the special
      > Nesting Grids to nest a 2/3 - 1/3 grid. (One third of 975 - 180
      should be
      > about right for your photo.)
      >
      > http://developer.yahoo.com/yui/grids/#special_grids
      >
      > While I know it's always tempting to use automated systems right
      away -- and
      > the Grids Builder is great -- I encourage you to walk through the
      YUI Grids
      > documentation and build a page from scratch; Getting to the
      "eureka!" moment
      > is worth it I think because then you'll have the power at your
      fingertips
      > that the three levers (Page Width, Template Presets, Nesting Grids)
      in YUI
      > Grids CSS provides.
      >
      > If you follow the steps and links above, you should end up with a
      page about
      > like this, which I think is what you're describing:
      >
      >
      >
      http://www.yuiblog.com/sandbox/yui/v0121/examples/grids/975-180-200_v1.html
      >
      > Thanks
      > Nate
      >
      > PS: Here's another Grids tutorial I wrote:
      > http://24ways.org/2006/intricate-fluid-layouts
      >
      >
      >
      > > -----Original Message-----
      > > From: ydn-javascript@yahoogroups.com
      > > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Pat
      > > Sent: Thursday, February 15, 2007 3:54 PM
      > > To: ydn-javascript@yahoogroups.com
      > > Subject: [ydn-javascript] Re: Issues with customizing grid column size
      > >
      > > Hey Nate,
      > >
      > > Thanks for responding so promptly. I really appreciate it.
      > >
      > > You can find the page I'm working on here:
      > > http://www2.pittsburghlive.com/pfulton/fanfare3/index7.html
      > > <http://www2.pittsburghlive.com/pfulton/fanfare3/index7.html>
      > >
      > > As for what widths for what columns, I'd like the second (the
      > > one with the photo) and the third (the skyscraper ad) to be
      > > tighter (ie: for the skyscraper, if it could be 160px with
      > > some room for padding, that would be excellent). The photo in
      > > the second column is 200px. In the first (main column), I'll
      > > need to add margin or padding to make it appear over the
      > > background image correctly, I'm just not sure what to change
      > > in the css.
      > >
      > > Thanks again for your help. The whole YUI package is awesome
      > > and I've learned a lot over the past few days (and un-learned
      > > a lot of bad table-less/css habits, too!).
      > >
      > > -Pat
      > >
      > > --- In ydn-javascript@yahoogroups.com
      > > <mailto:ydn-javascript%40yahoogroups.com> , "Nate Koechley"
      > > <natek@> wrote:
      > > >
      > > > Hey Pat,
      > > >
      > > > Please share exactly what you're trying to achieve: what widths for
      > > which
      > > > columns?
      > > >
      > > > If you have a url hand, please do share that too.
      > > >
      > > > Thanks
      > > > Nate
      > >
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.