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

Issues with customizing grid column size

Expand Messages
  • Pat
    Hello, I ve been able to figure out most of the YUI CSS Grid system, and it s working very well on the site that I m designing. However, I am having some
    Message 1 of 6 , Feb 15, 2007
    • 0 Attachment
      Hello,

      I've been able to figure out most of the YUI CSS Grid system, and it's
      working very well on the site that I'm designing. However, I am
      having some problems changing the width of the columns and I'm also
      concerned with how margin/padding will play into this, too.

      I used the Grid Builder
      (http://developer.yahoo.com/yui/grids/builder/) to create a page that
      has a custom width of 975px, no body columns, and 3 rows (50/25/25).
      This is *almost* exactly what I need.

      The template class that the builder used appears to be "yui-t7".

      The problem is: I can't figure out what to change or overwrite in the
      css file to alter the column widths and/or add margins/padding.

      Do I need to overwrite everything related to t7? Or should I just
      create a t8 and custom code things from there (crossing my fingers and
      hoping that the code turns out as elegant and cross-browser compatible
      as the original yui layout)?

      Thanks in advance for your help. If you'd like to see a URL of the
      page I'm working on, please let me know.
    • Nate Koechley
      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
      Message 2 of 6 , Feb 15, 2007
      • 0 Attachment
        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





        > -----Original Message-----
        > From: ydn-javascript@yahoogroups.com
        > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Pat
        > Sent: Thursday, February 15, 2007 1:12 PM
        > To: ydn-javascript@yahoogroups.com
        > Subject: [ydn-javascript] Issues with customizing grid column size
        >
        > Hello,
        >
        > I've been able to figure out most of the YUI CSS Grid system,
        > and it's working very well on the site that I'm designing.
        > However, I am having some problems changing the width of the
        > columns and I'm also concerned with how margin/padding will
        > play into this, too.
        >
        > I used the Grid Builder
        > (http://developer.yahoo.com/yui/grids/builder/
        > <http://developer.yahoo.com/yui/grids/builder/> ) to create a
        > page that has a custom width of 975px, no body columns, and 3
        > rows (50/25/25).
        > This is *almost* exactly what I need.
        >
        > The template class that the builder used appears to be "yui-t7".
        >
        > The problem is: I can't figure out what to change or
        > overwrite in the css file to alter the column widths and/or
        > add margins/padding.
        >
        > Do I need to overwrite everything related to t7? Or should I
        > just create a t8 and custom code things from there (crossing
        > my fingers and hoping that the code turns out as elegant and
        > cross-browser compatible as the original yui layout)?
        >
        > Thanks in advance for your help. If you'd like to see a URL
        > of the page I'm working on, please let me know.
        >
        >
      • Pat
        Hey Nate, Thanks for responding so promptly. I really appreciate it. You can find the page I m working on here:
        Message 3 of 6 , Feb 15, 2007
        • 0 Attachment
          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

          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, "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
        • Nate Koechley
          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
          Message 4 of 6 , Feb 15, 2007
          • 0 Attachment
            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
            >
            >
            >
          • Pat
            Nate, Thanks a ton. I came across your 24ways article earlier in the day, but I didn t get a chance to look over it. I ll go over the Grids docs again, more
            Message 5 of 6 , Feb 15, 2007
            • 0 Attachment
              Nate,

              Thanks a ton. I came across your 24ways article earlier in the day,
              but I didn't get a chance to look over it. I'll go over the Grids
              docs again, more thoroughly and I'm sure I'll get it.

              Thanks again for all of your help and for making all of these great
              tools open source.

              -Pat

              --- 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
            • 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 6 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.