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

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

Expand Messages
  • 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 1 of 7 , Feb 2 1:34 PM
    • 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 2 of 7 , Feb 2 2:09 PM
      • 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 3 of 7 , Feb 2 2:12 PM
        • 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 4 of 7 , Feb 2 8:40 PM
          • 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 5 of 7 , Feb 3 11:50 AM
            • 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 6 of 7 , Feb 9 7:43 AM
              • 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.