Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

possible en CSS?

5 réponses
Avatar
J-F Portala
Bonjour,
j'affiche un tableau de données, chaque colonne représente une case avec
une quantité et un pourcentage de remplissage.

Pour améliorer l'efficacite du tableau, j'avais pensé ajouté une cellule
dans chaque colonne dans laquelle une partie serait colorée, cette partie
colorée étant proportionnelle
au remplissage (0 à 100%).

Je sais qu'il est possible d'utiliser des bibbliothèques graphiques jpgraph
phplot pour réaliser un bargraph, mais avant de partir là dessus, je voulais
être sur que ce n'était pas possible
autrement (CSS - javascript).

Je travaille en PHP sous windows (WAMP)

Merci de votre aide

Jeff

5 réponses

Avatar
SAM
Le 11/10/08 8:29 AM, J-F Portala a écrit :
Bonjour,
j'affiche un tableau de données, chaque colonne représente une case avec
une quantité et un pourcentage de remplissage.

Pour améliorer l'efficacite du tableau, j'avais pensé ajouté une cellule
dans chaque colonne dans laquelle une partie serait colorée, cette partie
colorée étant proportionnelle
au remplissage (0 à 100%).



CSS :
====
table td div { position: relative; height: 100px; width: 4em; }
table td div span { display: block; position: absolute; width: 100%;
left:0; background: lime; top: auto; bottom: 0px; }
table td { text-align: center; border: 1px solid; background: #ddd; }

PHP:
===
function barre( $quantite, $pourcent ) {
return 'tt<td><div><span style="height:'
.$pourcent.'%"></span></div>'.$quantite.'</td>n';
}

echo '<table>nt<tr>';
foreach { $datas as $data }
barre( $datat[0], $data[1]);
echo 't<tr>n<table>';



Je sais qu'il est possible d'utiliser des bibbliothèques graphiques jpgraph
phplot pour réaliser un bargraph, mais avant de partir là dessus, je voulais
être sur que ce n'était pas possible autrement (CSS - javascript).



si tu as le php tu n'as pas besoin du JS

exemple de résultat en CSS :
<http://cjoint.com/?lknY2nseay>

Je travaille en PHP sous windows (WAMP)



Tant pis ! ;-)


Merci de votre aide

Jeff


Avatar
Olivier Miakinen
Le 10/11/2008 13:56, SAM a écrit :

exemple de résultat en CSS :
<http://cjoint.com/?lknY2nseay>



Bravo ! J'avais essayé mais n'étais arrivé qu'à un piètre résultat. Du
coup je n'ai pas besoin de chercher davantage...
Avatar
J-F Portala
J'avoue que j'avais posé la question sans grande conviction sur le fait de
trouver une solution hors des lib graphiques.

Encore bravo et merci

Jeff

PS : est ce qu'il y a une "bible" sur les CSS à consulter sans modération?
Avatar
SAM
Le 11/10/08 5:11 PM, J-F Portala a écrit :
J'avoue que j'avais posé la question sans grande conviction sur le fait de
trouver une solution hors des lib graphiques.

Encore bravo et merci



Sinon pour les graphiques il y a Google (en +/- javascript)
<http://code.google.com/apis/chart/>
et c'est hyper rapide !
(je ne sais quelles vitamines prennent leurs ordis et serveurs !!!)

PS : est ce qu'il y a une "bible" sur les CSS à consulter sans modération?



asm ou SAM ? :-)

Non ! non !

Faut farfouiller !
(alsacreation, playcss, openweb, pompage, w3c, la-grange, etc...)

Mettre en bouton-favori-signet-bookmark de barre perso d'outils :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
qui mène à toutes les CSS2
Et pour celles CSS2.1, en pas français :
<http://www.w3.org/TR/CSS21/indexlist.html>

Après il faut prendre qques habitudes et parfois (souvent ?) user d'un
peu de jugeote
(détourner les UL/LI ou DL/DT/DD par exemple et dont d'aucuns diront que
ce n'est que de la sémantique normale (un menu n'est q'une liste de
liens, un album photo n'est qu'une suite de définitions : image et
légende). En tous cas éviter les tables et ne les employer que pour les
données tabulées, le graphe là dans un table est limite limite
syntaxiquement parlant, du moins si j'ai compris ce que ça voulait dire)

<http://www.la-grange.net/w3c/>

<http://openweb.eu.org/css> (débuttant, confirmé, gourou)
sans oublier :
<http://openweb.eu.org/accessibilite>

<http://www.pompage.net/pompe/pieds/>
<http://www.pompage.net/pompe/>

<http://www.cssplay.co.uk/layouts/body5.html>
<http://www.cssplay.co.uk/layouts/>
<http://www.cssplay.co.uk/menus/>

<http://css.alsacreations.com/>

<http://css.maxdesign.com.au/listamatic/horizontal01.htm>
<http://css.maxdesign.com.au/listamatic/>

<http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable>
et la même chose par Nicholls :
<http://www.cssplay.co.uk/layouts/background.html>

On se revoit dans 3 mois ;-)
--
sm
Avatar
J-F Portala
ok! Je me plonge dedans.
Merci

Jeff