SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    anyone with experience modifying yahoo yui layouts?

    i'm trying to convert what displays as a two-column fixed width layout to a two column left fixed, right fluid layout.

    (for those of you familiar with the yui grids i am using t1, for those of you not familiar but curious go here: http://developer.yahoo.com/yui/grids/)

    i've designed a 100% width header (#hd), and a 90% width content area. the original yui css specifies a fixed width, but then the right column won't expand.

    the left div (.yui-b) is a fixed width of 160px, floated left, the right div (#main .yui-b) is 76% floated right.

    problem: the right float on a percentage creates a dynamic "gutter" between the two divs, and makes the left margin of the main class jump around.

    i've tried various solutions, including making both a left float, and making the right div 100% with a 165px left margin--works for ie, not firefox. i've not tested any of this in safari.

    i know the answer has to be there somewhere, and probably even an obvious somewhere, but i've been debugging my code midification or nearly two weeks now and am bug-eyed.

    hopefully someone more css-savvy than i can help? the code is below.

    thanks,

    michelle

    Code:
    <!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">
    <title>template (Fluid)</title>
    
    <style type="text/css">
    <!--
    /*
    Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.net/yui/license.txt
    version: 0.11.3
    */
    body {
       text-align:center;
       background-image:url(../graphics/navyTealBkgRepeat.gif);
       font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    #doc {
       min-width:57.69em;
       *min-width:56.3em; /* IE */
       min-width:750px;
       margin:auto;
       text-align:left;
    }
    
    #hd,#bd {margin-bottom:0em;text-align:left;}
    #ft {font-size:77%;font-family:verdana;clear:both;}
    
    #hd {height:96px;background-color:#01396b;background-image:url(../graphics/navyTealHeaderRepeat.gif);}
    
    #hdLogo {width:90%;height:96px;margin:0px auto 0px auto;background-image:url(../graphics/navyTealHdLogoBkgRepeat.gif);padding-top:0px;z-index:100;}
    
    #subscriber {height:96px;margin:0px auto 0px auto;background-image:url(../graphics/headerLogo.gif);background-position:top left;background-repeat:no-repeat;font-size:1.15em;padding:font-weight:bold;z-index:500;}
    
    .subscriberName { padding-top:.25em;font-size:90%;color:#FDCF30;text-align:right;}
    
    #bd {width:90%;border:1px solid #01396B;background-color:#FFFFFF;margin:0px auto 0em auto;text-align:left;border:1px solid #993366;}
    
    #ft {width:90%;height:16px;margin:0px auto 0px auto;background-color:#01396B;padding:1px;color:#FCF1CC;font-size:77%;text-align:left;}
    
    #nav {width:160px;position:relatove;float:left;background-color:#99FF66:}
    
    #live {width:100%;margin-left:165px;position:relative;float:left;background-color:#99FF66:}
    
    #yui-main {
    margin-lft:160px;}
    
    /* rules for main templates */
    .yui-t1 #yui-main .yui-b/*, .yui-t2 #yui-main .yui-b, .yui-t3 #yui-main .yui-b,
    .yui-t4 .yui-b, .yui-t5 .yui-b, .yui-t6 .yui-b*/ {float:right;}
    .yui-t1 .yui-b/*, .yui-t2 .yui-b, .yui-t3 .yui-b, .yui-t4 #yui-main .yui-b, .yui-
    t5 #yui-main .yui-b, .yui-t6 #yui-main .yui-b*/ {float:left;}
    
    /* t1: L160 */
    .yui-t1 #yui-main .yui-b {width:76%;/*min-width:570px;*/background-color:#6633FF;}
    .yui-t1 .yui-b {/*width:21.33%;min-*/width:160px;background-color:#CC9900;}
    
    /* t2 & t4: L180 & R180 */
    /*.yui-t2 #yui-main .yui-b, .yui-t4 #yui-main .yui-b {width:73.4%;min-
    width:550px;}
    .yui-t2 .yui-b, .yui-t4 .yui-b {width:24%;min-width:180px;}*/
    
    /* t3 & t6: L300 & R300 */
    /*.yui-t3 #yui-main .yui-b, .yui-t6 #yui-main .yui-b {width:57.6%;min-
    width:430px;}
    .yui-t3 .yui-b, .yui-t6 .yui-b {width:40%;min-width:300px;}*/
    
    /* t5: R240 */
    /*.yui-t5 #yui-main .yui-b {width:65.4%;min-width:490px;}
    .yui-t5 .yui-b {width:32%;min-width:240px;}*/
    
    /* t7: 750 */
    
    
    
    /*	grid-generic rules for all templates */
    
    /* all modules and grids nested in a grid get floated */
      .yui-g .yui-u, .yui-g .yui-g, .yui-ge .yui-u, .yui-gf .yui-u {
       float:right;
       display:inline;   /* IE */
    }
    */
      float left and kill margin on first for added flex */
    <!--.yui-g .first, .yui-gd .first, .yui-ge .first, .yui-gf .first {float:left; }-->
    
    /* 2 col */
     .yui-g .yui-u, .yui-g .yui-g {width:49.1%;}
    .yui-g .yui-g .yui-u {width:48.1%;}*/ /* smaller for nested to preserve margins */
    
    /* 3 col */
    .yui-gb .yui-u, .yui-gc .yui-u, .yui-gd .yui-u {
       float:left; /* need to reverse the order for 3 */
       margin-left:2%; *margin-left:1.895%;
       width:32%;
    }
    
    .yui-gb .first, .yui-gc .first, .yui-gd .first {margin-left:0;}
    */
    /* colspan 2 */
    .yui-gc .first, .yui-gd .yui-u {width:66%;}
    .yui-gd .first {width:32%;}
    
    /* colspan 3 */
    .yui-ge .yui-u {width:24%;}
    .yui-ge .first, .yui-gf .yui-u {width:74.2%;}
    .yui-gf .first {width:24%;}
    .yui-ge .first {width:74.2%;}
    
    /* self clear floated parent containers */
    #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;} /* IE */
    
    
    /*
    Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.net/yui/license.txt
    version: 0.11.3
    */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
    ol,ul {list-style:none;}
    caption,th {text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;}
    q:before,q:after{content:'';}
    
    /*
    Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.net/yui/license.txt
    version: 0.11.3
    */
    
    /**
     * 84.5% for !IE, keywords for IE
     * Percents could work for IE, but for backCompat purposes, we are using
     keywords.
     * x-small is for IE < 6 and IE6 quirks mode.
     *
     */
    body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-
    small;}
    table {font-size:inherit;font:100%;}
    
    /**
     * 99% for safari; 100% is too large
     */
    select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
    
    /**
     * Bump up !IE to get to 13px equivalent
     */
    pre, code {font:115% monospace;*font-size:100%;}
    
    /**
     * Default line-height based on font-size rather than "computed-value"
     * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
     */
    body * {line-height:1.22em;}
    -->
    </style>
    
    </head>
    
    
    <body>
      
    
    <div class="yui-t1" id="doc">
      <div id="hd">
          <div id="hdLogo">
    	<div id="subscriber">
    	  <div class="subscriberName">name</div>
    	</div><!--end div subscriber-->
    	
    	</div><!--end div hdLogo-->
      </div><!--end div hd-->
      
      <div id="bd">  
        <!--<div id="bdBorder">adjust border alignment with the solid blue rectangles above and below-->   	  
          <div class="yui-b">yui-b 1	  
            <p>HOME</p>
    	    <p>DASHBOARD</p>
    	    <p>PEOPLE&	    </p>
    	    <p> PROGRAMS</p>
    	    <p>MESSAGES<br />
    	      REPORTS<br />
            OUTCOMES?</p>
    	    <p> OBJECTIVES<br />
    	      MEASURES &amp;      
            <p> FINDINGS      
            <p>MAPPING      
            <p>ACTION PLAN      
            <p>ANALYSIS   
    	  </div><!--end first instance of class yui-b-->
        <div id="yui-main">
            <div class="yui-b">yui-b 2 -- main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f imain jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f aiuamaks kjdfkasifa; faj ;ajsdf af a;f main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f main jksjdf sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f iaif sflkjl ljkflakjsf lkajlkjs ajdljfk kajjfijfie ijsn ajjd aijiihf ;aiuamaks kjdfkasifa; faj ;ajsdf af a;f </div>
             <!--end second instance of class yui-b-->
        </div>
          <!--end div yui-main-->
        <!--</div>end div bdBorder-->
      </div><!--end div bd-->    
      
      <div id="ft">footer here</div><!-- end div ft-->
    
    </div><!--end div doc-->
    
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, evven if it's not been posted before, hopefully someone will still know what i have to do to fix it.

    thanks for the link. i had not even heard of them (the yahoo thingies) until the developer here at my new job said he wanted to use them...mainly because they had already been rigorously tested against standards. plus, he may want to use the grid sub-division feature in the dynamic area of the .asp page.

    i like the idea of the standards thing, but four simple divs in a wrapper sure would be easier.


Bookmarks

Posting Permissions

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