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

Simple Noob YUI Grids Question- How to remove the padding/margin of Main Colums

Expand Messages
  • rckrll4ever
    Hi, How do I remove the padding or margin applied when using yui-ge? Like this example by Eric Meyers:
    Message 1 of 7 , Jan 30, 2009
    View Source
    • 0 Attachment
      Hi,

      How do I remove the padding or margin applied when using yui-ge?

      Like this example by Eric Meyers:
      http://layouts.ironmyers.com/950_pixel_Layouts/layout/?id=49

      And how do I not show my email address here?


      Thanks!
    • rckrll4ever
      Why does template .yui-t7 add bottom margin to the main content column? .yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}
      Message 2 of 7 , Feb 2, 2009
      View Source
      • 0 Attachment
        Why does template .yui-t7 add bottom margin to the main content column?
        .yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}
      • Nate Koechley
        Hey, That s legacy, more or less. t1-t6 set up two-column preset template for the two blocks (.yui-b). In contrast, t7 previously stacked them vertically for
        Message 3 of 7 , Feb 2, 2009
        View Source
        • 0 Attachment
          Hey,

          That's legacy, more or less.

          t1-t6 set up two-column "preset template" for the two blocks (.yui-b). In contrast, t7 previously stacked them vertically for a full-width layout. In that scenario, it was useful to have some margin between the two blocks that were otherwise flush against each other.

          Currently, I don't recommend using yui-t7, since it does basically the same thing as just omitting it.

          Hope that helps.

          Thanks,
          Nate


          On Feb 2, 2009, at 1:34 PM, rckrll4ever wrote:

          Why does template .yui-t7 add bottom margin to the main content column?
          .yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}


        • Nate Koechley
          ... If you d like to style content within Grids, I recommend nesting a node (e.g. DIV) inside the nodes that Grids provides. That way you can put any style on
          Message 4 of 7 , Feb 2, 2009
          View Source
          • 0 Attachment
            On Jan 30, 2009, at 1:58 PM, rckrll4ever wrote:

            > Hi,
            >
            > How do I remove the padding or margin applied when using yui-ge?

            If you'd like to style content within Grids, I recommend nesting a
            node (e.g. DIV) inside the nodes that Grids provides. That way you can
            put any style on your node without impacting YUI's nodes. (Otherwise
            if you changed the margin on a yui-u directly, you'd likely break
            Grids.) Does that make sense, and is that what you were asking?

            > And how do I not show my email address here?

            You can administer your membership here:
            http://tech.groups.yahoo.com/group/ydn-javascript/join

            Hope that helps.

            Thanks,
            Nate
          • rckrll4ever
            ... can ... Yes that is what I was looking for too, since I plan on adding content inside the grids, so if I understand you correctly leave the packed css code
            Message 5 of 7 , Feb 2, 2009
            View Source
            • 0 Attachment
              > If you'd like to style content within Grids, I recommend nesting a
              > node (e.g. DIV) inside the nodes that Grids provides. That way you
              can
              > put any style on your node without impacting YUI's nodes. (Otherwise
              > if you changed the margin on a yui-u directly, you'd likely break
              > Grids.) Does that make sense, and is that what you were asking?


              Yes that is what I was looking for too, since I plan on adding content
              inside the grids, so if I understand you correctly leave the packed css
              code alone, and add a div with my own class name and apply styles?
              Where do I get the most current compact css files for grids? I
              downloaded the YUI lib but I didn't see the css files anywhere I guess
              I will search for them again.

              Thanks!
            • Eric Miraglia
              rckrll4ever, http://developer.yahoo.com/yui/articles/hosting/?base&fonts&grids&reset&MIN&nocombine&norollup That will show you the individual file paths for
              Message 6 of 7 , Feb 3, 2009
              View Source
              • 0 Attachment
                rckrll4ever,


                That will show you the individual file paths for the minified versions of the 4 YUI CSS files (reset, base, fonts, grids). 

                -Eric


                On Feb 2, 2009, at 8:40 PM, rckrll4ever wrote:

                > If you'd like to style content within Grids, I recommend nesting a 
                > node (e.g. DIV) inside the nodes that Grids provides. That way you 
                can 
                > put any style on your node without impacting YUI's nodes. (Otherwise 
                > if you changed the margin on a yui-u directly, you'd likely break 
                > Grids.) Does that make sense, and is that what you were asking?

                Yes that is what I was looking for too, since I plan on adding content 
                inside the grids, so if I understand you correctly leave the packed css 
                code alone, and add a div with my own class name and apply styles? 
                Where do I get the most current compact css files for grids? I 
                downloaded the YUI lib but I didn't see the css files anywhere I guess 
                I will search for them again.

                Thanks!


              • rckrll4ever
                Hi Nate, That makes sense but I could use an example of removing the gutter with my own node inside of what the grid provides as you suggested. I believe you
                Message 7 of 7 , Feb 9, 2009
                View Source
                • 0 Attachment
                  Hi Nate,

                  That makes sense but I could use an example of removing the gutter
                  with my own node inside of what the grid provides as you suggested. I
                  believe you suggested that the gutter is there because of rounding
                  issues with different browsers, is that correct?

                  I still need to add JavaScript to make the columns equal height. In
                  my environment I am using YUI Grids, JQuery and ASP.Net.

                  Thanks!

                  Here is a layout where I would like to remove the gutter:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">
                  <html>
                  <head>
                  <title>YUI Base Page</title>
                  <link rel="stylesheet"
                  href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-
                  fonts-grids.css" type="text/css">
                  <style type="text/css">
                  #sidebar
                  {
                  text-align:center;
                  background:#ccc;
                  color:#FFFFFF;
                  }
                  .rtop, .rbottom
                  {
                  display:block;
                  background:#FFFFFF;
                  }
                  .rtop *, .rbottom *
                  {
                  display: block;
                  height: 1px;
                  overflow: hidden;
                  background:#ccc;
                  }
                  .r1{margin: 0 5px}
                  .r2{margin: 0 3px}
                  .r3{margin: 0 2px}
                  .r4{margin: 0 1px; height: 2px}

                  .container
                  {
                  margin:0 15px;
                  /*margin: 0.3125em;*/
                  background: #FFEFD5;
                  color:#FFFFFF;
                  }
                  .crtop, .crbottom
                  {
                  display:block;
                  background:#ccc;
                  }
                  .crtop *, .crbottom *
                  {
                  display: block;
                  height: 1px;
                  overflow: hidden;
                  background:#FFEFD5;
                  }
                  .cr1{margin: 0 5px}
                  .cr2{margin: 0 3px}
                  .cr3{margin: 0 2px}
                  .cr4{margin: 0 1px; height: 2px}
                  .main{background-color:#CCCCCC; margin:0px;
                  padding:10px;text-align:left;Color:#FFFFFF;font-weight:bold;font-
                  size:small;}
                  #navFull{height:50px; background-color:#00BFFF;
                  margin:0px; padding:0px;text-align: center;Color:#FFFFFF;font-
                  weight:bold;font-size:medium;}
                  #masthead{height:100px; background-
                  color:#555555;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;}
                  #footer{height:50px; background-
                  color:#555555;margin:0px; padding:0px;text-
                  align:center;Color:#FFFFFF;font-weight:bold;font-size:medium;}
                  .yui-gf{overflow: hidden;}
                  .yui-gf div.first .yui-u{padding-bottom: 32000px;
                  margin-bottom: -32000px;}
                  #hnav .rtop *
                  {
                  background-color:#00BFFF;
                  }
                  #hnav .rbottom *
                  {
                  background-color:#00BFFF;
                  }
                  .header .rtop * {background-color:#555555;}
                  .header .rbottom *{background-color:#555555;}
                  #secFooter .rtop *{background-color:#F5DEB3;}
                  #secFooter .rbottom *{background-color:#F5DEB3;}
                  .footer .rtop *{background-color:#555555;}
                  .footer .rbottom *{background-color:#555555;}
                  </style>
                  </head>
                  <body>
                  <div id="doc2" class="">
                  <div id="hd" class="header">
                  <b class="rtop">
                  <b class="r1"></b>
                  <b class="r2"></b>
                  <b class="r3"></b>
                  <b class="r4"></b>
                  </b>
                  <p id="masthead">HEADER GOES HERE</p>
                  <b class="rbottom">
                  <b class="r4"></b>
                  <b class="r3"></b>
                  <b class="r2"></b>
                  <b class="r1"></b>
                  </b>
                  </div>
                  <div id="bd">
                  <div class="yui-b" id="hnav">
                  <b class="rtop">
                  <b class="r1"></b>
                  <b class="r2"></b>
                  <b class="r3"></b>
                  <b class="r4"></b>
                  </b>
                  <p id="navFull"> HORIZONTAL NAVIGATION</p>
                  <b class="rbottom">
                  <b class="r4"></b>
                  <b class="r3"></b>
                  <b class="r2"></b>
                  <b class="r1"></b>
                  </b>
                  </div>
                  <div class="yui-main" >
                  <div class="yui-b">
                  <div class="yui-gf">
                  <!--<div class="container">
                  <b class="rtop">
                  <b
                  class="r1"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r4"></b>
                  </b>
                  CONTENTS GOES
                  HERE
                  <b class="rbottom">
                  <b
                  class="r4"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r1"></b>
                  </b>
                  </div>-->

                  <div class="yui-u first"
                  id="sidebar">
                  <b class="rtop">
                  <b
                  class="r1"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r4"></b>
                  </b>
                  <div style="padding:
                  0.13em;">
                  <div
                  class="container">
                  <b
                  class="crtop">

                  <b class="cr1"></b>

                  <b class="cr2"></b>

                  <b class="cr3"></b>

                  <b class="cr4"></b>
                  </b>
                  <div
                  class="myImg">

                  <img src="" />
                  </div>
                  <b
                  class="crbottom">

                  <b class="cr4"></b>

                  <b class="cr3"></b>

                  <b class="cr2"></b>

                  <b class="cr1"></b>
                  </b>
                  </div>
                  </div>
                  <div style="padding:
                  0.13em;">
                  <div
                  class="container">
                  <b
                  class="crtop">

                  <b class="cr1"></b>

                  <b class="cr2"></b>

                  <b class="cr3"></b>

                  <b class="cr4"></b>
                  </b>

                  <div class="myImg">

                  <img src="" />
                  </div>
                  <b
                  class="crbottom">

                  <b class="cr4"></b>

                  <b class="cr3"></b>

                  <b class="cr2"></b>

                  <b class="cr1"></b>
                  </b>
                  </div>
                  </div>
                  <div style="padding:
                  0.13em;">
                  <div
                  class="container">
                  <b
                  class="crtop">

                  <b class="cr1"></b>

                  <b class="cr2"></b>

                  <b class="cr3"></b>

                  <b class="cr4"></b>
                  </b>
                  <div
                  class="myImg">

                  <img src="" />
                  </div>
                  <b
                  class="crbottom">

                  <b class="cr4"></b>

                  <b class="cr3"></b>

                  <b class="cr2"></b>

                  <b class="cr1"></b>
                  </b>
                  </div>
                  </div>
                  <div style="padding:
                  0.13em;">
                  <div
                  class="container">
                  <b
                  class="crtop">

                  <b class="cr1"></b>

                  <b class="cr2"></b>

                  <b class="cr3"></b>

                  <b class="cr4"></b>
                  </b>
                  <div
                  class="myImg">

                  <img src="" />
                  </div>
                  <b
                  class="crbottom">

                  <b class="cr4"></b>

                  <b class="cr3"></b>

                  <b class="cr2"></b>

                  <b class="cr1"></b>
                  </b>
                  </div>
                  </div>
                  <b class="rbottom">
                  <b
                  class="r4"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r1"></b>
                  </b>
                  </div>
                  <div class="yui-u">
                  <b class="rtop">
                  <b
                  class="r1"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r4"></b>
                  </b>
                  <p class="main">
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  Lorem ipsum dolor sit
                  amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc
                  quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
                  volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
                  feugiat.
                  </p>
                  <b class="rbottom">
                  <b
                  class="r4"></b>
                  <b
                  class="r3"></b>
                  <b
                  class="r2"></b>
                  <b
                  class="r1"></b>
                  </b>
                  </div>
                  </div>
                  </div>
                  </div>
                  <div class="yui-b" id="secFooter">
                  <b class="rtop">
                  <b class="r1"></b>
                  <b class="r2"></b>
                  <b class="r3"></b>
                  <b class="r4"></b>
                  </b>
                  <p id="secondaryFull">OPTIONAL SECONDARY
                  FOOTER</p>
                  <b class="rbottom">
                  <b class="r4"></b>
                  <b class="r3"></b>
                  <b class="r2"></b>
                  <b class="r1"></b>
                  </b>
                  </div>
                  </div>
                  <div id="ft" class="footer">
                  <b class="rtop">
                  <b class="r1"></b>
                  <b class="r2"></b>
                  <b class="r3"></b>
                  <b class="r4"></b>
                  </b>
                  <p id="footer">FOOTER GOES HERE.</p>
                  <b class="rbottom">
                  <b class="r4"></b>
                  <b class="r3"></b>
                  <b class="r2"></b>
                  <b class="r1"></b>
                  </b>
                  </div>
                  </div>
                  </body>
                  </html>
                Your message has been successfully submitted and would be delivered to recipients shortly.