Objectif : tableau de bord modulable

Options du tableau de bord, pour chaque module :
(Note : les favoris sont un module aussi)

• Afficher sur le dashboard (radio : oui/non)
• Zone d'affichage (select : Zone 1, Zone 2, Zone 3)
• Largeur du module (select : étroit, moyen, large)
• Position dans la zone (input numérique)

Le module est placé dans la zone déterminée par l'utilisateur.

Chaque module est placé (dans l'ordre donné par l'utilisateur)
dans une '<div class="db-box $class">'

$class = en fonction de la largeur choisie par l'utilisateur :

• étroit : db-small
• moyen : db-medium
• large : db-large

Par défaut on a :

• Favoris : zone 1, class="db-box db-large" id="icons"
• Doc dc : zone 2, class="db-box db-small db-dc"
• News dc : zone 2, class="db-box db-medium db-dc"

(Les icônes ont un id spécifique et les modules de dc ont une class spécifique)

Source html

<div id="dashboard-main"><!-- boîte globale du dashboard (sans le menu) -->
 
	<div id="db-z1" class="db-zone"><!-- modules de Zone 1 -->
	</div>
 
	<div id="db-z2" class="db-zone"><!-- modules de Zone 2 -->
	</div>
 
	<div id="db-z3" class="db-zone"><!-- modules de Zone 3 -->
	</div>
 
</div>

CSS pour démarrer

#dashboard-main {
    text-align:center;
    }
.db-zone {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    }
.db-box {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    }
.db-box.db-large {
    width: 100%;
    margin-bottom: 10px;
    }
.db-medium, .db-small {
    margin: 10px;
    min-height: 140px;
    }
.db-medium {
    width: 600px;
    }
.db-small {
    width: 280px;
    }

Commentaire

En principe, si je ne me suis pas plantée on devrait avoir un résultat du genre :
Si je choisis les icônes en medium, le billet rapide en médium, que je les mets
tous les deux dans la zone 1 et que dans la zone 2 je mets les liens vers la doc
(small) et les news (small), la zone 2 se place à côté de la zone 1.

Démo : http://jsfiddle.net/UykqR/7/

(Note : je sais, la zone 2 ne vient pas à côté de la zone 1 et je sais pourquoi. Brainstorming en cours.)