YUI Grille CSS pour 100% largeur de page avec largeur de modèle personnalisé

Question

J'utilise les grilles d'interface utilisateur de Yahoo pour structurer la plupart de mes pages. Une de mes pages est une carte Google et j'ai besoin d'une colonne à gauche fixe de 400 pixels pour y mettre des informations de légende de carte. Cependant, YUI Grids propose seulement 3 colonnes pour leurs mises en page 100%, à savoir 160px, 180px et 300px.

Est-il possible de personnaliser leur 'modèle 3' qui fournit la colonne 300px pour obtenir ma colonne 400px dont j'ai besoin?

Answer 1

J'ai déterminé comment procéder. Bravo à Nate dans les forums YUI pour m'avoir indiqué la bonne direction.

Pour définir une colonne de gauche fixe, vous devez diviser la largeur de pixel de la colonne par 13 pour déterminer les em pour tous les navigateurs non-IE. Pour IE, divisez la largeur de colonne par 13,3333

par ex. voulant une largeur fixe 480px, 480/13 me donne 36.9231em pour non-IE et 480/13,33 est exactement 36em pour IE

Utiliser modèle 3, le CSS est:

.yui-t3 .yui-b { 
    float: left; 
    width: 12.3207em; *width: 12.0106em; 
} 

.yui-t3 #yui-main .yui-b { 
    margin-left: 36.9231em; *margin-left: 36em; 
} 

Aussi, si vous voulez pour tordre la marge par exemple zéro marge, vous pouvez faire quelque chose comme:

#doc3 { 
    margin: auto 0; 
} 

Grids est actuellement dépréciée dans YUI 3 - un peu un choc quand je vis. Il y aura quelques navigateurs qui déposeront la catégorie A en juillet et par conséquent, les grilles seront retravaillées étant donné que certaines des décisions de conception initiales étaient basées sur des navigateurs plus anciens bien sûr.

Answer 2

Il y a certainement un moyen. Je pense que c'est juste une question de peaufiner le CSS soit ajouter dans une autre colonne de 400px, ou modifier une colonne existante pour répondre à vos besoins. Si vous ajoutez une autre colonne, assurez-vous de prendre en compte la largeur supplémentaire (plus la marge) et réduisez la largeur sur les autres éléments, ou augmentez la largeur de votre élément conteneur. Si la mise en page utilise 100% de largeur du navigateur, la largeur peut ne pas être un problème, mais si votre contenu est enveloppé dans un élément conteneur qui contient toutes vos colonnes, veillez à ajuster les éléments existants pour compenser pour la taille de votre nouvelle colonne.

EDIT: Aussi, si vous avez affaire à des mises en page de 100% de largeur, il est probablement préférable de dimensionner vos colonnes en utilisant le pourcentage, au lieu d'une taille de pixel fixe. Étant donné que l'élément contenant pour vos colonnes sera l'écran de l'utilisateur, si vous utilisez le pourcentage, les tailles de colonnes doivent être ajustées en fonction de la résolution/taille de la fenêtre. Si vous souhaitez que votre nouvelle colonne apparaisse à gauche des autres colonnes, vous la placerez généralement avant les autres colonnes de votre balisage et appliquerez une propriété "float: left". Mais, regardez comment les autres colonnes sont configurées dans le CSS YUI, et suivez leur méthode.

J'espère que cela aide.

Acorn