Verwendung des jQuery.UI CSS Frameworks zur Gestaltung von DIVs

Question

Ein Projekt, an dem ich derzeit arbeite, verwendet das jQuery UI-Framework für einige seiner Widgets. Um dem Benutzer ein globales Aussehen und Gefühl zu bieten, möchte ich das Framework auch für seine CSS-Elemente verwenden.

Ich implementiere derzeit eine Dashboard-ähnliche Startseite, auf der der Benutzer einen Gesamtstatus seiner Daten sehen kann. Dieses Dashboard besteht aus einigen Divs, die in ein Rasterlayout ausgerichtet sein sollten.

Ich versuche, die Divs wie folgt zu stylen:

  Box Header

    Inhalt der Box

Später möchte ich einige Funktionen für das Ziehen und Sortieren implementieren.

Das Problem, mit dem ich derzeit konfrontiert bin, ist, dass die Boxen nicht ordnungsgemäß ausgerichtet sind.

Hat jemand einen Tipp zur Verwendung von jQuery.UI für diese Art von CSS-Arbeit? Ich habe die CSS-Framework-Dokumentation auf jqueryui.com studiert, aber es gibt nicht so viele Informationen.

Mit freundlichen Grüßen,

Gordon

Answer 1

Ich habe dein Beispiel ausprobiert und es funktioniert. Ich habe nichts Falsches gesehen ... Welchen Browser benutzt du? Wenn Sie zufällig den IE verwenden, könnte das das Problem sein. Obwohl es eigentlich für verschiedene Browser gedacht ist ... Ich benutze keinen IE, also kann ich das nicht überprüfen, tut mir leid. Versuchen Sie es mit einem anderen Browser und sehen Sie, ob das behoben ist. Stellen Sie außerdem sicher, dass Sie die ui-core- und ui-theme-Dateien einbinden. Schließen Sie keine anderen CSS-Dateien ein und sehen Sie, ob das behoben ist. Ich empfehle Ihnen, Firebug (in Firefox) zu verwenden, um zu sehen, wie die Styles angewendet werden.

Überprüfen Sie, wie das CSS auf dieser Seite angewendet wird. Das könnte hilfreich sein.

Answer 2

Kannst du ein Beispiel angeben, wo es für dich nicht funktioniert?

Vielleicht lädst du dein eigenes CSS nach dem Laden des jQuery-UI-CSS und überschreibst etwas.

Answer 3

Wenn Ihre Inhaltsbox und Kopfzeilenbox nicht ausgerichtet sind, liegt dies wahrscheinlich an unterschiedlichem Padding im CSS. Versuchen Sie, das Padding Ihrer Inhaltsbox auf dieselbe Weise wie das Padding Ihrer Kopfzeilenbox einzustellen. Dies hat das Problem behoben, als ich darauf gestoßen bin.