J'ai essayé de le faire sans beaucoup de succès.Faire trois colonnes mise en page, avec fixe avec des barres latérales en utilisant yui-grids
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 ...
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.
Vous pourriez essayer ce liquid layout à la place?
Cela semble être le «vrai» holygrail, je le teste, et il semble fonctionner même dans IE8 Très merci mon ami – Cesar
Vous êtes les bienvenus! Dites moi si vous avez le moindre problème. –
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?
Oh désolé non vous voulez un fluide principal col donc ignorez cette réponse – Pricey
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.
oui, vous avez absolument raison! – Cesar
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;
}
Je cherche aussi une solution en utilisant YUI CSS; J'ai essayé le dessus comme décrit et cela n'a pas fonctionné. J'ai essayé le dessus en utilisant doc3 et yui-t4 (colonne de droite fixe). Cela ressemble à une bonne approche, cependant, la colonne de gauche n'est pas sortie comme prévu; ceci a produit une disposition de 2 colonnes, pas trois. –
je pouvais le faire, mais la chose est que je dois à la fois la barre latérale et Yui-t4 seulement faire la bonne barre latérale – Cesar
Vous ne pouvez pas utiliser les deux en même temps? Que se passe-t-il si vous créez deux divs, l'un avec la classe yui-t1 et l'autre avec yui-t4? Je ne suis pas familier avec YUI. –