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

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

Expand Messages
  • 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 1 of 7 , Feb 2, 2009
      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 2 of 7 , Feb 2, 2009
        > 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 3 of 7 , Feb 3, 2009
          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 4 of 7 , Feb 9, 2009
            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.