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

Grids - Different template (yui-t5 reversed)

Expand Messages
  • Dave Patterson
    I m using grids.css and need to set up a two-column layout like yui-t3 (narrow on the left), but with the dimensions of yui-75 (240 for secondary column). I
    Message 1 of 3 , Nov 22, 2006
      I'm using grids.css and need to set up a two-column layout like yui-t3
      (narrow on the left), but with the dimensions of yui-75 (240 for
      secondary column).

      I got into the CSS and got myself confused.

      Anybody know how to do this?


      Thanks!

      Dave
    • Ben Long
      Hi Dave, I inverted the floats for yui-t5 and called it yui-t8. If you look at the grid portion of the combined css (or just grids.css), you can see where the
      Message 2 of 3 , Nov 22, 2006
        Hi Dave,

        I inverted the floats for yui-t5 and called it yui-t8. If you look at the grid portion of the combined css (or just grids.css), you can see where the individual templates are defined. In the first section, a handful of the templates are floated left with a right margin, and a handful are floated right with a left margin. I took t5 and turned it into a float left. Below that, you will see the actual margin and width definitions for t5. I took those and renamed the 'rights' to 'lefts'.

        This is what I ended up creating:

        .yui-t8 #yui-main{float:right;margin-left:-25em;/* IE: preserve layout at narrow widths */}
        .yui-t8 .yui-b {
            float:left;
            width:18.4608em;*width:18.016em;}
        .yui-t8 #yui-main .yui-b {
            margin-left:19.4608em;*margin-left:19.016em;
        }

        I ran a quick test and it worked for me. Try pasting into the head of your doc or adding to your own css and see if it works for you.

        Cheers,
        Ben



        On 11/22/06, Dave Patterson <dplhenterprises@...> wrote:
        I'm using grids.css and need to set up a two-column layout like yui-t3
        (narrow on the left), but with the dimensions of yui-75 (240 for
        secondary column).

        I got into the CSS and got myself confused.

        Anybody know how to do this?


        Thanks!

        Dave






        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto: ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com

        <*> Your use of Yahoo! Groups is subject to:
             http://docs.yahoo.com/info/terms/



      • David M. Patterson
        Ben, That is exactly what I was looking for. I m going to have to dig into the grids.css file more deeply one of these days. Thanks loads, Dave _____ David M.
        Message 3 of 3 , Nov 22, 2006

          Ben,

           

          That is exactly what I was looking for.

          I’m going to have to dig into the grids.css file more deeply one of these days.

           

          Thanks loads,

          Dave


          David M. Patterson
          Consulting Software Engineer
          DP Consulting

          Voice: 714-532-4492
          Fax: 253-679-8673
          dpatterson@...

          There are only 10 kinds of people – Those that understand binary and those that don’t.


           

          -----Original Message-----
          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Ben Long
          Sent: Wednesday, November 22, 2006 2:06 PM
          To: ydn-javascript@yahoogroups.com
          Subject: Re: [ydn-javascript] Grids - Different template (yui-t5 reversed)

           

          Hi Dave,

          I inverted the floats for yui-t5 and called it yui-t8. If you look at the grid portion of the combined css (or just grids.css), you can see where the individual templates are defined. In the first section, a handful of the templates are floated left with a right margin, and a handful are floated right with a left margin. I took t5 and turned it into a float left. Below that, you will see the actual margin and width definitions for t5. I took those and renamed the 'rights' to 'lefts'.

          This is what I ended up creating:

          .yui-t8 #yui-main{float: right;margin- left:-25em; /* IE: preserve layout at narrow widths */}
          .yui-t8 .yui-b {
              float:left;
              width:18.4608em; *width:18. 016em;}
          .yui-t8 #yui-main .yui-b {
              margin-left: 19.4608em; *margin-left: 19.016em;
          }

          I ran a quick test and it worked for me. Try pasting into the head of your doc or adding to your own css and see if it works for you.

          Cheers,
          Ben


          On 11/22/06, Dave Patterson <dplhenterprises@ sbcglobal. net> wrote:

          I'm using grids.css and need to set up a two-column layout like yui-t3
          (narrow on the left), but with the dimensions of yui-75 (240 for
          secondary column).

          I got into the CSS and got myself confused.

          Anybody know how to do this?


          Thanks!

          Dave






          Yahoo! Groups Links

          <*> To visit your group on the web, go to:
              http://groups. yahoo.com/ group/ydn- javascript/

          <*> Your email settings:
              Individual Email | Traditional

          <*> To change settings online go to:
              http://groups. yahoo.com/ group/ydn- javascript/ join
              (Yahoo! ID required)

          <*> To change settings via email:
              mailto: ydn-javascript- digest@yahoogrou ps.com
              mailto:ydn-javascript- fullfeatured@ yahoogroups. com

          <*> To unsubscribe from this group, send an email to:
              ydn-javascript- unsubscribe@ yahoogroups. com

          <*> Your use of Yahoo! Groups is subject to:
               http://docs. yahoo.com/ info/terms/

           

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