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

How to create my own custom 1/4 + 3/4 layout like .yui-gf ?

Expand Messages
  • rckrll4ever
    Hi, I have read alot of the docs and I understand not to add to or change the grids css. I don t see alot of examples of how to add your own content inside of
    Message 1 of 9 , Feb 4, 2009
    • 0 Attachment

      Hi,

      I have read alot of the docs and I understand not to add to or change the grids css. I don't see alot of examples of how to add your own content inside of the grids then again I am a still new to this framework. I am also not a CSS expert.

      I want to create main content sections similar to the .yui-gf but without the extra margin after the left column. I also want to be able to Create div containers inside of the Left Column that Stack Vertically to hold images is that possible? Is there a reason for the extra margin I see with the units inside of the grids?

       

      Here is what I have so far:

      <body>
      <div id="doc2" class="">
       <div id="hd">
        <p id="masthead">HEADER</p>
       </div>
       <div id="bd">
        <div class="yui-b">
         <p id="navFull"> HORIZONTAL NAVIGATION</p>
        </div>
        <div id="yui-main">
         <div class="yui-b">
          <div class="yui-gf">
           <div class="yui-u first">
            <p class="main">MAIN COLUMN 1</p>
           </div>
           <div class="yui-u">
            <p class="main">MAIN COLUMN 2</p>
           </div>
          </div>
         </div>
        </div>
        <div class="yui-b">
         <p id="secondaryFull">OPTIONAL SECONDARY FOOTER</p>
        </div>
       </div>
       <div id="ft">
        <p id="footer">FOOTER</p>
       </div>
      </div>
      </body>

      Thanks!

       

    • rckrll4ever
      Ugg, I am confused as to which is the correct way to use grids, consider the following two pages that give me the same layout, and please tell me which one is
      Message 2 of 9 , Feb 4, 2009
      • 0 Attachment
        Ugg, I am confused as to which is the correct way to use grids,
        consider the following two pages that give me the same layout, and
        please tell me which one is the correct way to use the grids.

        Source for Page1:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
        4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
        1">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title>CSS Layout</title>
        <style type="text/css">
        #masthead{height:100px; background-color:#555555;margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        .main{height:400px; background-color:#CCCCCC; margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #secondary{height:300px; background-color:#333333; margin:0px;
        padding:0px;}
        #secondaryFull{height:50px; background-color:#F5DEB3; margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #navFull{height:50px; background-color:#00BFFF; margin:0px;
        padding:0px;text-align: center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #footer{height:50px; background-color:#555555;margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        </style>
        <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
        <link rel="stylesheet" type="text/css" href="base.css">
        </head>
        <body>
        <div id="doc2" class="">
        <div id="hd">
        <p id="masthead">HEADER</p>
        </div>
        <div id="bd">
        <div class="yui-b">
        <p id="navFull"> HORIZONTAL NAVIGATION</p>
        </div>
        <div id="yui-main">
        <div class="yui-b">
        <p class="main">MAIN CONTENT</p>
        </div>
        </div>
        <div class="yui-b">
        <p id="secondaryFull">OPTIONAL SECONDARY
        FOOTER</p>
        </div>
        </div>
        <div id="ft">
        <p id="footer">FOOTER</p>
        </div>
        </div>
        </body>
        </html>

        Source For Page 2:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
        transitional.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
        1">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title>CSS Layout</title>
        <style type="text/css">
        #masthead{height:100px; background-color:#555555;margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        .main{height:400px; background-color:#CCCCCC; margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #secondary{height:300px; background-color:#333333; margin:0px;
        padding:0px;}
        #secondaryFull{height:50px; background-color:#F5DEB3; margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #navFull{height:50px; background-color:#00BFFF; margin:0px;
        padding:0px;text-align: center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        #footer{height:50px; background-color:#555555;margin:0px;
        padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
        size:medium;}
        .customG yui-u first"{float:left;}
        </style>
        <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
        <link rel="stylesheet" type="text/css" href="base.css">
        </head>
        <body>
        <div id="doc2" class="">
        <div id="hd">
        <p id="masthead">HEADER</p>
        </div>
        <div id="hd">
        <p id="navFull"> HORIZONTAL NAVIGATION</p>
        </div>
        <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
        <p class="main">MAIN COLUMN 1</p>
        </div>
        </div>

        </div>
        <div id="ft"
        <p id="secondaryFull">OPTIONAL SECONDARY FOOTER</p>
        </div>
        <div id="ft">
        <p id="footer">FOOTER</p>
        </div>
        </div>
        </body>
        </html>
      • grflanagan
        Here s a fishing rod rather than a fish: http://yarriba.appspot.com It requires at least some aquaintance with Python however, so I don t know how much use it
        Message 3 of 9 , Feb 5, 2009
        • 0 Attachment
          Here's a fishing rod rather than a fish:

          http://yarriba.appspot.com

          It requires at least some aquaintance with Python however, so I don't
          know how much use it will be to you if you're not that way inclined
          ;-). No documentation as yet, but this may give you something to go on:

          >>> grid = yui.YUIGrid('1:3')
          >>> grid[1].lorem()
          >>> grid[0].append(yui.PageUnit(CLASS='img'))
          >>> grid[0].append(yui.PageUnit(CLASS='img'))
          >>> grid[0].append(yui.PageUnit(CLASS='img'))
          >>> imgstyle = grid[0].innerStyle['.img']
          >>> imgstyle.width = '200px'
          >>> imgstyle.height = '200px'
          >>> imgstyle.border = 'solid 2px orangered'
          >>> show grid
          >>> imgstyle.background_image = "url('static/no_image.gif')"
          >>> show grid
          >>> css = grid.get_css()
          >>> print css

          .yui-gf .yui-u.first .img {
          height: 200px;
          border: solid 2px orangered;
          background-image: url('static/no_image.gif');
          width: 200px;
          }
          >>> print grid

          <div class="yui-gf">
          <div class="yui-u first">
          <div class="img">
          </div>
          <div class="img">
          </div>
          <div class="img">
          </div>
          </div>
          <div class="yui-u second"><p>Lorem ipsum ...</p>
          </div>
          </div>

          HTH

          G.

          --- In ydn-javascript@yahoogroups.com, "rckrll4ever" <rckrll4ever@...>
          wrote:
          >
          >
          > Hi,
          >
          >
          >
          > I have read alot of the docs and I understand not to add to or change
          > the grids css. I don't see alot of examples of how to add your own
          > content inside of the grids then again I am a still new to this
          > framework. I am also not a CSS expert.
          >
          >
          >
          > I want to create main content sections similar to the .yui-gf but
          > without the extra margin after the left column. I also want to be able
          > to Create div containers inside of the Left Column that Stack Vertically
          > to hold images is that possible? Is there a reason for the extra margin
          > I see with the units inside of the grids?
          >
          >
          >
        • rckrll4ever
          Thanks grflanagan but I know nothing about python, I am currently working in the MS DotNet world, but I appreciate any help I get.
          Message 4 of 9 , Feb 5, 2009
          • 0 Attachment
            Thanks grflanagan but I know nothing about python, I am currently
            working in the MS DotNet world, but I appreciate any help I get.
          • grflanagan
            ... Not to worry. I assume you are aware of the grids builder: http://developer.yahoo.com/yui/grids/builder/ G.
            Message 5 of 9 , Feb 5, 2009
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, "rckrll4ever" <rckrll4ever@...>
              wrote:
              >
              > Thanks grflanagan but I know nothing about python, I am currently
              > working in the MS DotNet world, but I appreciate any help I get.
              >

              Not to worry. I assume you are aware of the grids builder:

              http://developer.yahoo.com/yui/grids/builder/

              G.
            • rckrll4ever
              Yep, but it doesn t help me build what I need, at least from what I can tell. Here is what I was trying to prototype out. Ie. Body is 950px page width so I use
              Message 6 of 9 , Feb 5, 2009
              • 0 Attachment
                Yep, but it doesn't help me build what I need, at least from what I can
                tell.

                Here is what I was trying to prototype out.

                Ie. Body is 950px page width so I use doc2
                Header Full width
                Horizontal Nav Full width
                Left column 25% <-- This is where I am stuck , Inside of left column I
                need Vertically stacked containers that hold images for example small
                advertisement type images.

                Right column 75% Width full height

                Still haven't figured out how to or if I should change the gutter
                margins and I did watch this video(Video: The YUI CSS Foundation) and
                at the end it is mentioned why there is about a 1em gutter and why you
                should have some gutter. So my questions about the gutter is if you
                have two different sections with different colors the gutter will be
                clearly visible since the body bg color wouldn't matter then, so what
                do people out there do with the gutter? Just looking for some advice on
                it.

                I haven't even yet got to how to create rounded corners on containers
                with YUI Grids or if it is possible.
              • grflanagan
                ... Well, I m no design expert, but i notice (in Firefox) that if you have a yui-gf grid (25:75) and you set the width of the wider column to 76%, then the two
                Message 7 of 9 , Feb 5, 2009
                • 0 Attachment
                  --- In ydn-javascript@yahoogroups.com, "rckrll4ever" <rckrll4ever@...>
                  wrote:
                  >
                  > Yep, but it doesn't help me build what I need, at least from what I can
                  > tell.
                  >
                  > Here is what I was trying to prototype out.
                  >
                  > Ie. Body is 950px page width so I use doc2
                  > Header Full width
                  > Horizontal Nav Full width
                  > Left column 25% <-- This is where I am stuck , Inside of left column I
                  > need Vertically stacked containers that hold images for example small
                  > advertisement type images.
                  >
                  > Right column 75% Width full height
                  >
                  > Still haven't figured out how to or if I should change the gutter
                  > margins and I did watch this video(Video: The YUI CSS Foundation) and
                  > at the end it is mentioned why there is about a 1em gutter and why you
                  > should have some gutter. So my questions about the gutter is if you
                  > have two different sections with different colors the gutter will be
                  > clearly visible since the body bg color wouldn't matter then, so what
                  > do people out there do with the gutter? Just looking for some advice on
                  > it.
                  >

                  Well, I'm no design expert, but i notice (in Firefox) that if you have
                  a yui-gf grid (25:75) and you set the width of the wider column to
                  76%, then the two columns are 'flush', ie. no gutter.

                  G.
                • rckrll4ever
                  ... Interesting. In the video Nate mentioned that if you remove the gutter centering could be off across grade A browsers because they all round differently.
                  Message 8 of 9 , Feb 5, 2009
                  • 0 Attachment
                    > Well, I'm no design expert, but i notice (in Firefox) that if you have
                    > a yui-gf grid (25:75) and you set the width of the wider column to
                    > 76%, then the two columns are 'flush', ie. no gutter.
                    >
                    > G.

                    Interesting.
                    In the video Nate mentioned that if you remove the gutter centering
                    could be off across grade A browsers because they all round differently.

                    Here is what was mentioned in the video that causes the 1em gutter:

                    .yui-t2 .yui-b
                    {
                    float:left;
                    width:13.8456em; <-- 1em less than the margin-left creates the gutter.
                    *width: 13.512em;
                    }

                    .yui-t2 #yui-main .yui-b
                    {
                    margin-left:14.845em;
                    *margin-left:14.512em;
                    }

                    I must be CSS dumb lol, because I can't seem to remove it by overriding
                    the margin-left in the style sheet in my page header. I also would like
                    to know if not removing it is a better choice and if it is then I guess
                    your are stuck with making the body background color the same across
                    the page so the gutters are not so visible.
                  • rckrll4ever
                    ... 8859- ... I must be a tard as I forgot that I just kept what Eric Meyers had in his example. I am removing the margin-left before it is even applied, that
                    Message 9 of 9 , Feb 6, 2009
                    • 0 Attachment
                      --- In ydn-javascript@yahoogroups.com, "rckrll4ever"
                      <rckrll4ever@...> wrote:
                      >
                      > Ugg, I am confused as to which is the correct way to use grids,
                      > consider the following two pages that give me the same layout, and
                      > please tell me which one is the correct way to use the grids.
                      >
                      > Source for Page1:
                      >
                      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
                      > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                      > <html>
                      > <head>
                      > <meta http-equiv="Content-Type" content="text/html; charset=iso-
                      8859-
                      > 1">
                      > <meta name="keywords" content="">
                      > <meta name="description" content="">
                      > <title>CSS Layout</title>
                      > <style type="text/css">
                      > #masthead{height:100px; background-color:#555555;margin:0px;
                      > padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
                      > size:medium;}
                      > .main{height:400px; background-color:#CCCCCC; margin:0px;
                      > padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
                      > size:medium;}
                      > #secondary{height:300px; background-color:#333333; margin:0px;
                      > padding:0px;}
                      > #secondaryFull{height:50px; background-color:#F5DEB3; margin:0px;
                      > padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
                      > size:medium;}
                      > #navFull{height:50px; background-color:#00BFFF; margin:0px;
                      > padding:0px;text-align: center;Color:#FFFFFF;font-weight:bold;font-
                      > size:medium;}
                      > #footer{height:50px; background-color:#555555;margin:0px;
                      > padding:0px;text-align:center;Color:#FFFFFF;font-weight:bold;font-
                      > size:medium;}
                      > </style>
                      > <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
                      > <link rel="stylesheet" type="text/css" href="base.css">
                      > </head>

                      I must be a tard as I forgot that I just kept what Eric Meyers had in
                      his example. I am removing the margin-left before it is even applied,
                      that is the problem. I will probably remove the gutter and see how it
                      behaves in the browsers I need to worry about.
                      Now I am off to add rounded corners lol.
                    Your message has been successfully submitted and would be delivered to recipients shortly.