none
Placer la partie "info" de mon graphique juste à côté (CSS) RRS feed

  • Question

  • Bonjour, j'affiche un graphique sur une page Html et ce graphique possède une partie "info".

    Vous pouvez voir un exemple ici :

     

    Le problème est que je vroudrais afficher cette partie "info" juste à coté du graphique, mais comme je change de données, le graphique peut varier de taille et alors ma partie "info" vient parfois déborder sur le graphique.

    Voici le css de mon graphique : 

    /*plugin styles*/
    .visualize { border: 1px solid #888; ; background: #fafafa; bottom : 60px; }
    .visualize canvas { ; }
    .visualize ul,.visualize li { margin: 0; padding: 0;}
    
    /*table title, key elements*/
    .visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; ; opacity: 1; }
    .visualize .visualize-title { display: block; color: #333; margin-bottom: 3px;  font-size: 1.1em; }
    .visualize ul.visualize-key { list-style: none;  }
    .visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding- ;}
    .visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px;  ;  margin-  }
    .visualize ul.visualize-key .visualize-key-label { color: #000; }
    
    /*line,bar, area labels*/
    .visualize-labels-x,.visualize-labels-y { ;   list-style: none; }
    .visualize-labels-x li, .visualize-labels-y li { ; bottom: 0; }
    .visualize-labels-x li span.label, .visualize-labels-y li span.label { ; color: #555; }
    .visualize-labels-x li span.line, .visualize-labels-y li span.line {  ; border: 0 solid #ccc; }
    .visualize-labels-x li { height: 100%; }
    .visualize-labels-x li span.label {  margin- }
    .visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
    .visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
    .visualize-labels-y li { width: 100%;  }
    .visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
    .visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
    .visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

    Le css pour la partie "info" est la ligne 

    .visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; ; opacity: 1; left:378px;}

    Quelqu'un a une idée?


    • Modifié jaycee23 jeudi 13 mars 2014 14:23
    jeudi 13 mars 2014 14:21

Réponses

Toutes les réponses