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

Align grids in header with grids in body

Expand Messages
  • bryan kennedy
    I have a need to use the YUI css grid template system in my body as well as in my header element. Essentially I need the web structure to ... header logo
    Message 1 of 4 , Jan 31, 2008
    • 0 Attachment
      I have a need to use the YUI css grid template system in my body as
      well as in my header element. Essentially I need the web structure to
      look something like this:

      --------------------------------
      header logo | ??? | <---hd
      --------------------------------
      | | | <---bd
      side | 66% | 33% |
      bar | | |
      left | | |
      160 | | |
      | | |
      | | |
      | | |
      | | |
      --------------------------------
      footer | <---ft
      --------------------------------

      The body section uses the yui-t1 template to get the 160px sidebar
      first and then divides the reminder into 66% and 33% columns.

      However, I can't make my divisions in the header match the content in
      the body. I want the section labeled with ??? to match the section
      below in the body which is labeled 33%.

      I can't re-use the yui-t1 template structure in the header region
      because it relies up on the #yui-main which is an ID and therefore can
      only be used once in the document.

      Obviously I can just force it but the page won't validate if I re-use
      the yui-main ID.

      Any help on a way to align the grid in my header with the grid in my body?

      Thanks,
      bryan kennedy
    • bryan kennedy
      Woops my little grid drawing didn t survive the formating. Here is a link to a version that I know will work: http://www.mysteryexperience.com/sandbox/yui.html
      Message 2 of 4 , Jan 31, 2008
      • 0 Attachment
        Woops my little grid drawing didn't survive the formating.

        Here is a link to a version that I know will work:
        http://www.mysteryexperience.com/sandbox/yui.html 
      • Nate Koechley
        Hi bryan kennedy, Grids does not support this particular layout at this time. You could locally add #yui-main s rules (and other rules that hang from
        Message 3 of 4 , Feb 1, 2008
        • 0 Attachment
          Hi bryan kennedy,

          Grids does not support this particular layout at this time. 

          You could locally add #yui-main's rules (and other rules that hang from descendants of that selector) to a class of the same name, and then use the same structure in the header and in the body. But that's probably not ideal.

          Instead, I think your best bet is to write a custom layout. For inspiration you might look at how Grids uses negative margins to set the fixed width of the narrow column in the "present templates" phase (for example .yui-t1) and use a similar technique to set a fixed-size right region in both your top and body regions.

          Thanks,
          Nate


          On Jan 31, 2008, at 9:44 AM, bryan kennedy wrote:

          Woops my little grid drawing didn't survive the formating.

          Here is a link to a version that I know will work:
          http://www.mysterye xperience. com/sandbox/ yui.html 

          \
        • bryan kennedy
          ... Ah yes, totally understandable. I just wanted to check to see if there was something obvious I was missing. ... Yeah, this is what I tried at first. But
          Message 4 of 4 , Feb 4, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@...> wrote:
            > Grids does not support this particular layout at this time.

            Ah yes, totally understandable. I just wanted to check to see if there
            was something obvious I was missing.

            > You could locally add #yui-main's rules (and other rules that hang
            > from descendants of that selector) to a class of the same name, and
            > then use the same structure in the header and in the body. But that's
            > probably not ideal.

            Yeah, this is what I tried at first. But I actually just changed the
            #yui-main into .yui-main (id to class) which worked just fine. But like
            you said isn't actually ideal.

            > Instead, I think your best bet is to write a custom layout. For
            > inspiration you might look at how Grids uses negative margins to set
            > the fixed width of the narrow column in the "present templates" phase
            > (for example .yui-t1) and use a similar technique to set a fixed-size
            > right region in both your top and body regions.

            Right on. That what I am currently doing. I just have a div, in the
            header region, that mimics some of the styles you laid out as an
            example. That is working pretty smoothly.

            Thanks for the assistance,
            bk
          Your message has been successfully submitted and would be delivered to recipients shortly.