Faire trois colonnes mise en page, avec fixe avec des barres latérales en utilisant yui-grids

Question

J'ai essayé de le faire sans beaucoup de succès.

Comment puis-je, en utilisant yui-grids faire un modèle comme yui-t1 (celui avec une barre latérale de 160px dans la gauche), mais avec également une barre latérale à la droite de la même largeur?

La colonne centrale doit être liquide ...

Answer 1

Selon this page, une barre latérale 180px à l'échelle de droite a la classe par défaut Yui-t4. Je suppose que vous pourriez aller dans le CSS et changer cette valeur de pixel à 160.

Answer 2

Vous pourriez essayer ce liquid layout à la place?

Answer 3

Avez-vous essayé d'utiliser les grilles YUI layout http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

mais en ajoutant une classe supplémentaire à la 2ème Yui-u appelé .main ou une classe de .last à la 3e Yui-u.

Vous pouvez ajouter le style ci-dessous de l'écrasement

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

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

pour obtenir 3 CLO largeurs 19/59/19

que toute utilisation pour vous?

Answer 4

Vous avez choisi la réponse de Matthew mais il n'a pas répondu à votre question. Bien qu'il ait peut-être résolu votre problème, quelqu'un qui lira cette question à l'avenir voudra peut-être connaître la réponse. Ce genre de chose, me semble-t-il, décourage certains de donner ou de développer une réponse qui obligerait quelqu'un d'autre à répéter cette question.

Answer 5

Vous pouvez adapter et étendre cet exemple. Voici le code HTML pour 200px fixe/contenu fluide/layout colonne prérégler:

<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 est simple:

.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; 
}