YUI Grid CSS für 100% Breite Seite mit benutzerdefinierten Vorlage Breite

Question

Ich benutze Yahoo UI Grids, um die meisten meiner Seiten zu strukturieren. Eine meiner Seiten ist eine Google Map und ich brauche eine linke Spalte mit etwa 400 Pixeln, um die Informationen zur Kartenlegende in die Karte einzufügen. YUI Grids bietet jedoch nur 3 Spalten für ihre 100% Seitenlayouts, nämlich 160px, 180px und 300px.

Gibt es einen Weg, dass ich ihre 'Vorlage 3' anpassen kann, die die 300px Spalte bietet, um meine 400px Spalte zu bekommen, die ich brauche?

Answer 1

Ich habe bestimmt, wie man das macht. Kudos für Nate in den YUI-Foren, die mich in die richtige Richtung weisen.

Um eine feste linke Spalte festzulegen, müssen Sie die Spaltenpixelbreite durch 13 teilen, um die Ems für alle Nicht-IE-Browser zu bestimmen. Für IE dividiere die Spaltenbreite durch 13,3333

z.B. eine feste 480px Breite zu wollen, 480/13 mich 36.9231em für Nicht-IE gibt und 480/13.33 ist genau 36em für IE

Mit Vorlage 3 ist die CSS:

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

Auch, wenn Sie wollen um den Rand zu optimieren z Null-Marge, können Sie so etwas wie tun:

#doc3 { 
    margin: auto 0; 
} 

Grids derzeit in YUI 3 veraltet ist - ein bisschen ein Schock, als ich sah, dass. Es wird einige Browser geben, die die A-Kategorie im Juli fallen lassen und als Ergebnis werden Grids überarbeitet, da einige der ursprünglichen Design-Entscheidungen natürlich auf älteren Browsern basieren.

Answer 2

Es gibt definitiv einen Weg. Ich denke, es ist nur eine Frage der Optimierung des CSS, um entweder eine weitere 400px-Spalte hinzuzufügen oder eine vorhandene Spalte an Ihre Bedürfnisse anzupassen. Wenn Sie eine weitere Spalte hinzufügen, achten Sie darauf, dass Sie die zusätzliche Breite (plus Rand) berücksichtigen und entweder die Breite anderer Elemente verringern oder die Breite des enthaltenden Elements erhöhen.

Wenn das Layout eine Breite von 100% des Browsers verwendet, ist die Breite möglicherweise kein Problem, aber wenn Ihr Inhalt in ein Containerelement mit allen Spalten eingepackt ist, müssen Sie die vorhandenen Elemente anpassen für die Größe Ihrer neuen Spalte.

EDIT: Auch wenn Sie mit 100% Breite Layouts beschäftigen, ist es wahrscheinlich besser, Ihre Spalten mit Prozent statt einer festen Pixelgröße zu bemessen. Da das containing-Element für Ihre Spalten der Bildschirm des Benutzers ist, sollten Sie die Spaltengröße bei Verwendung von Prozent relativ zu ihrer Auflösung/Fenstergröße anpassen.

Wenn die neue Spalte links von den anderen Spalten angezeigt werden soll, wird sie normalerweise vor den anderen Spalten in Ihrem Markup platziert und die Eigenschaft "float: left" angewendet. Sehen Sie sich aber an, wie die anderen Spalten im YUI-CSS eingerichtet sind, und folgen Sie deren Methode.

Ich hoffe, dass hilft.

Acorn