Erstellen von drei Spalten Layout, mit festen Seitenleisten mit yui-Gitter

Question

Ich habe versucht, dies ohne viel Erfolg zu tun.

Wie kann ich mit Yui-Grids eine Vorlage wie yui-t1 erstellen (die mit einer Seitenleiste von 160px auf der linken Seite), aber auch eine Seitenleiste auf der rechten Seite der gleichen Breite?

Die Säule Zentrum sollte flüssig sein ...

Answer 1

Nach this page, ein 180px weite rechten Seitenleiste hat die Standardklasse yui-T4. Ich nehme an, Sie könnten in das CSS gehen und diesen Pixelwert auf 160 ändern.

Answer 2

Sie könnten dies liquid layout stattdessen versuchen?

Answer 3

Haben Sie versucht, die YUI Grids http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

Layout verwenden, aber dann eine zusätzliche Klasse Zugabe auf die 2. yui-u .main oder eine Klasse von .last auf den dritten yui-u bezeichnet.

Sie können den unter Überschreiben Stil

.yui-gb .yui-u { 
width: 19%; 
} 

.yui-gb .main { 
    width: 59%; 
} 

erhalten 3 cols mit Breiten 19/59/19

, dass jede Nutzung zu euch?

Answer 4

Sie haben Matthews Antwort gewählt, aber er hat Ihre Frage nicht beantwortet. Obwohl er Ihr Problem vielleicht gelöst hat, möchte jemand, der diese Frage in der Zukunft liest, vielleicht immer noch die Antwort wissen. Diese Art von Dingen, scheint mir, entmutigt einige davon, eine Antwort zu geben oder zu entwickeln & würde jemanden zwingen, diese Frage zu wiederholen.

Answer 5

Sie können dieses Beispiel anpassen und erweitern. Hier ist der HTML-Code für 200px fest/Flüssigkeitsgehalt/Layout voreingestellt Säule:

<div id="bd"> 
    <div id="yui-main"> 
     <div class="yui-b yui-b1"> 
      <div class="yui-u-main"> 
       <div class="yui-u"> 
        <p>Main column: fluid width</p> 
       </div> 
      </div> 
      <div class="yui-u"> 
       <p>Left column: 200px fixed</b> 
      </div> 
     </div> 
    </div> 
    <div class="yui-b"> 
     <p>Third column: fixed width, follows template preset.</p> 
    </div> 
</div> 

CSS ist einfach wie:

.yui-b1 .yui-u-main { 
    float: left; 
    width: 100%; 
} 
.yui-b1 .yui-u { 
    float: left; 
    /* Width of left column */ 
    width: 200px; 
    margin-left: -100%; 
} 
.yui-b1 .yui-u-main .yui-u { 
    float: none; 
    width: auto; 
    /* Width of left column + 13px margin (default YUI margin) */ 
    margin-left: 213px; 
}