html - YUI Grid CSS for 100% width page with custom template width -
I'm using Yahoo's UI grid to structure most of my pages. One of my pages is Google Maps and I need a left column of approximately 400 pixels to keep the map panel information. The YUI grid only gives 3 columns for their 100% page layout, i.e. 160px, 180px and 300px.
Is there any way that I can customize their 'Template 3' which should have 300px columns in my 400px column?
I have determined how to do this. YUI Yatra for Nate in the Forum to point me in the right direction
To set a fixed left column, you have to divide the width of column pixel 13 to determine the M for all non-IE browsers. For IE, divide the column width by 13.3333
For example, for a fixed 480 px width, 480/13 gives me 36.9231m for non-IE and for 480 / 13.33 IE 36em is
Using template 3, CSS is:
.UE-T3 .UE-B {float: left; Width: 12.3207em; * Width: 12.0106em; }. Yui-t3 # yui-main .yui-b {margin-left: 36.9231em; * Margin-left: 36 AM; }
In addition, if you want zero margins of margins, you can do something like this:
# doc3 {margin: auto 0 ; }
The grid is currently downgraded to UUI 3 - when I saw that it is a shock. In July there will be some browsers leaving A category and as a result, the grid will be rebuilt, that some initial design decisions were definitely based on older browsers.
Comments
Post a Comment