Utilisation du framework CSS jQuery.UI pour le style DIV

Question

Un projet sur lequel je travaille actuellement utilise le framework d'interface utilisateur jQuery pour certains de ses widgets. Pour donner à l'utilisateur un aspect global, je voudrais utiliser le framework également pour son contenu css.

Je suis en train d'implémenter une page d'accueil semblable à un tableau de bord, où l'utilisateur peut voir l'état général de ses données. Ce tableau de bord est constitué de quelques divs qui doivent être alignés dans une disposition de grille.

J'essaie de style les divs aiment suit

<div class="ui-widget"> 
    <div class="ui-widget-header">Box Header</div> 
    <div class="ui-widget-content"> 
    Content of the Box 
    </div> 
</div> 

Plus tard, je voudrais mettre en œuvre certaines fonctionnalités draggable et triables.

Le problème auquel je fais face en ce moment est que les boîtes ne sont pas correctement alignées.

Quelqu'un at-il un indice sur l'utilisation de jQuery.UI pour ce genre de travail CSS? J'ai étudié la documentation du framework CSS sur jqueryui.com mais il n'y a pas beaucoup d'informations.

meilleures salutations,

Gordon

Answer 1

j'ai essayé votre exemple et il fonctionne. Je n'ai rien vu de mal ... Quel navigateur utilisez-vous? Si vous utilisez IE par n'importe quelle chance qui pourrait être le problème. Même si c'est supposé être cross-browser ... Je n'utilise pas IE donc je ne peux pas vérifier ça, désolé. Essayez-le avec un autre navigateur et voir si cela est corrigé. Assurez-vous également d'inclure les fichiers ui-core et ui-theme. N'incluez aucun autre fichier CSS et voyez si cela est corrigé. Je vous recommande d'utiliser firebug (dans firefox) pour voir comment les styles sont appliqués.

Vérifiez comment le CSS est appliqué dans this page. Vous pourriez le trouver utile. Pouvez-vous donner un exemple où cela ne fonctionne pas pour vous?

Answer 2

Peut-être que vous chargez votre propre CSS après avoir chargé jQuery-UI-css et écrasé quelque chose.

Answer 3

Si votre zone de contenu et la zone d'en-tête ne s'alignent pas, cela est probablement dû à un remplissage différent dans la css, essayez de définir le remplissage de la zone de contenu comme le remplissage de la zone d'en-tête. Cela a réglé le problème quand je l'ai rencontré.