Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: YUI Grid? Css?

  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question YUI Grid? Css?

    I believe it is called a YUI Grid? Or it uses yui for the css and html. But I didn't know that... Anyways, I would like help with this css layout I have found. I am currently exploring css layouts and I don't really know how to work the yui.. grid? css? I haven't really encountered it before because I usually work with just plain old basic css and I don't use the em for my css... so.. its even more confusing (plus I'm a beginner when it comes to coding)

    Its a 950 px width I think. If I wanted to change the css layout to a 750 width, how would I do that?

    Here is the html code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Full Secondary Column, 1/2 x 1/2 Main Column.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <link rel="stylesheet" type="text/css" href="styles.css" >
    </head>
    <body>
    <div id="doc" class="yui-t7">
      <div id="hd">
        <div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div>
      </div>
      <div id="bd">
        <div id="yui-main">
          <div class="yui-b">
            <div class="yui-g">
              <div class="yui-u first">
                <div class="content">Content Here</div>
              </div>
              <div class="yui-u">
                <div class="content">Content Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="yui-b">
          <div id="secondary">Secondary Column</div>
        </div>
      </div>
      <div id="ft">
        <div id="footer">Footer</div>
      </div>
    </div>
    </body>
    </html>
    and then here is the css code:
    Code:
    /*
    Copyright (c) 2007, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.net/yui/license.txt
    version: 2.2.2
    */
    /* for all templates and grids */
    body{text-align:center;}
    #ft{clear:both;}
    /**/
    /* 750 centered, and backward compatibility */
    #doc,#doc2,#doc3,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
       margin:auto;text-align:left;
       width:57.69em;*width:56.3em;min-width:750px;}
    /* 950 centered */
    #doc2 {
       width:57.69em;*width:56.3em;min-width:750px;}
    /* 100% with 10px viewport side matting */ 
    #doc3 {
       margin:auto 10px; /* not for structure, but so content doesn't bleed to edge */
       width:auto;}
       
    /* below required for all fluid grids; adjust widths and margins above accordingly */
    
       /* to preserve source-order independence for Gecko */
       .yui-b{position:relative;}
       .yui-b{_position:static;} /* for IE < 7 */
       #yui-main .yui-b{position:static;} 
    
    #yui-main {width:100%;}
    .yui-t1 #yui-main,
    .yui-t2 #yui-main,
    .yui-t3 #yui-main{float:right;margin-left:-25em;/* IE: preserve layout at narrow widths */}
    
    .yui-t4 #yui-main,
    .yui-t5 #yui-main,
    .yui-t6 #yui-main{float:left;margin-right:-25em;/* IE: preserve layout at narrow widths */}
    
    .yui-t1 .yui-b {
       float:left;
        width:12.3207em;*width:12.0106em;}
    .yui-t1 #yui-main .yui-b{
        margin-left:13.3207em;*margin-left:13.0106em;
    }
    
    .yui-t2 .yui-b {
       float:left;
        width:13.8456em;*width:13.512em;}
    .yui-t2 #yui-main .yui-b {
        margin-left:14.8456em;*margin-left:14.512em;
    }
    
    .yui-t3 .yui-b {
       float:left;
        width:23.0759em;*width:22.52em;}
    .yui-t3 #yui-main .yui-b {
        margin-left:24.0759em;*margin-left:23.52em;
    }
    
    .yui-t4 .yui-b {
       float:right;
        width:13.8456em;*width:13.512em;}
    .yui-t4 #yui-main .yui-b {
        margin-right:14.8456em;*margin-right:14.512em;
    }
    
    .yui-t5 .yui-b {
       float:right;
        width:18.4608em;*width:18.016em;}
    .yui-t5 #yui-main .yui-b {
        margin-right:19.4608em;*margin-right:19.016em;
    }
    
    .yui-t6 .yui-b {
       float:right;
        width:23.0759em;*width:22.52em;}
    .yui-t6 #yui-main .yui-b {
        margin-right:24.0759em;*margin-right:23.52em;
    }
    
    .yui-t7 #yui-main .yui-b {
       display:block;margin:0 0 1em 0;
    }
    #yui-main .yui-b {float:none;width:auto;}
    /* GRIDS (not TEMPLATES) */
    .yui-g .yui-u, 
    .yui-g .yui-g, 
    .yui-gc .yui-u,
    .yui-gc .yui-g .yui-u,
    .yui-ge .yui-u, 
    .yui-gf .yui-u{float:right;display:inline;}
    .yui-g div.first, 
    .yui-gc div.first,
    .yui-gc div.first div.first,
    .yui-gd div.first, 
    .yui-ge div.first, 
    .yui-gf div.first{float:left;}
    .yui-g .yui-u, 
    .yui-g .yui-g{width:49.1%;}
    .yui-g .yui-g .yui-u,
    .yui-gc .yui-g .yui-u {width:48.1%;}
    .yui-gb .yui-u, 
    .yui-gc .yui-u, 
    .yui-gd .yui-u{float:left;margin-left:2%;*margin-left:1.895%;width:32%;}
    .yui-gb div.first, 
    .yui-gc div.first, 
    .yui-gd div.first{margin-left:0;}
    .yui-gc div.first, 
    .yui-gd .yui-u{width:66%;}
    .yui-gd div.first{width:32%;}
    .yui-ge .yui-u{width:24%;}
    .yui-ge div.first, 
    .yui-gf .yui-u{width:74.2%;}
    .yui-gf div.first{width:24%;}
    .yui-ge div.first{width:74.2%;}
    #bd:after,
    .yui-g:after, 
    .yui-gb:after, 
    .yui-gc:after, 
    .yui-gd:after, 
    .yui-ge:after, 
    .yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    #bd,
    .yui-g, 
    .yui-gb, 
    .yui-gc, 
    .yui-gd, 
    .yui-ge, 
    .yui-gf{zoom:1;}
    
    
    /* Basic Element Formatting */
    
    #header{
       height:100px;
       background-color:#F3F2ED;
       margin:0;
       padding:0;
       }
       
    #header h1{
       font-size:1em;
       margin:0;
       padding:10px;
       }
       
    #header h1 a{
       color:#000000;
       background-color:#F3F2ED;
       }
       
    .content{
       height:300px;
       background:#CCC8B3;
       border-top:#FFFFFF 2px solid;
       margin:0;
       padding:0;
       }
       
    #secondary{
       height:300px;
       background:#F6F0E0;
       border-top:#FFFFFF 2px solid;
       margin:0;
       padding:0;
       }
       
    #secondaryFull{
       height:50px;
       background-color:#CFB59F;
       border-top:#FFFFFF 2px solid;
       margin:0;
       padding:0;
       }
       
    #footer{
       height:50px;
       background:#BFBD93;
       border-top:#FFFFFF 2px solid;
       margin:0;
       padding:0;
       }
    Thank you. And any other help to understanding this would be much appreciated.. looking at all the yui in the coding makes my head hurt...

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Check here at the Yahoo! Developer's site: http://developer.yahoo.com/yui/grids/

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    wow. Thanks. I think I'll look through those.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •