Creer une barre de remplissage

Creer une barre de remplissage - HTML/CSS - Programmation

Marsh Posté le 27-05-2005 à 10:09:41    

Bonjour
 
Je souhaiterais creer sur une page WEB, une simple barre de remplissage qui changerais d'aspect en fonction de 3 variables :
 
la 1ere variable defini la longueur de la barre
la 2eme defini la longueur d'une plus petite zone a l'intérieur
et la 2eme encore une plus petite..
 
Je voudrais donc une barre de remplissage (une sorte de diagramme en fait) ayant 3 couleurs différentes pour chaques zones
 
Un petit dessin pour mieu me faire comprendre :
http://bixibo.free.fr/jpgbarreremp.jpg
 
En fait mon premier probleme et que je ne sais pas exactement quel language utiliser pour faire cette barre..
Je sais seulement que je recupererais les valeurs des 3 variables grace a php/MySQL
 
Avez vous des idées? est ce possible en PHP (jouer sur la largeur de  div en fonction des variable? ca va etre chiant) ou javascript?
 
merci bcp

Reply

Marsh Posté le 27-05-2005 à 10:09:41   

Reply

Marsh Posté le 27-05-2005 à 10:12:56    

bah, ca dépend de quelle manière tu veux mettre ta page a jour....
si tu peux repasser par le serveur, faire ca via PHP me paraît le plus simple.. (sachant que tu n'est pas obligé de jouer sur un div mais simplement sur des largeurs de 'TD' dans une table à une seul ligne)
sinon, jscript...

Reply

Marsh Posté le 27-05-2005 à 10:13:02    

si tu veux ke ce soit dynamique et en live pour le client ben JS
 
sinon en PHP ca se fait les doigts dans le nez

Reply

Marsh Posté le 27-05-2005 à 10:15:47    

Salut a vous ;)
 
Aucun probleme pour le dynamique.. dans le contexte de mon appli ca ne servirait a rien.. JE recupere juste les 3 variable au chargement de la page et ca roulz !
 
Donc selon, l'idée de jouer sur les largeurs de <div> (ou <table> mais un div ne serait il pas plus propre?) est elle la bonne et la plus simple a mettre en place?
 
Si oui je vois a peu pres comment faire ;)

Reply

Marsh Posté le 27-05-2005 à 10:56:20    

heuu je t'ai fais ca. Si ca te dit :
 
http://gatsu.ftp.free.fr/html/test [...] ession.htm

Reply

Marsh Posté le 27-05-2005 à 11:23:40    

Merci c'est top
 
mais j'ai reussi de mon coté a faire un ptit truc tout simple en php, la barre de progression est une super idée mais ca collera pas avec le site que je fait
Par contre je m'en reservirais ;)

Reply

Marsh Posté le 27-05-2005 à 11:52:45    

#conso {  
    background-color:#FE0000;
    width:<? echo ($conso_pourcent.'%'); ?>;
    }
 
c'est autorisé un truc comme ca ? ^^

Reply

Marsh Posté le 27-05-2005 à 12:01:54    

c'est pas autorisé, et ca ne marchera pas ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 27-05-2005 à 12:04:29    

Ok donc pour changer la valeur width de mon ma div (donc modif le css), je suis bien obligé de passer par le javascript?
 
meme un
<div id="conso" width="<? echo ($conso_pourcent.'%'); ?>">&nbsp
ne marche pas :(

Reply

Marsh Posté le 27-05-2005 à 12:08:19    

<div id="conso" style="width:<? echo ($conso_pourcent.'%'); ?>">&

Reply

Marsh Posté le 27-05-2005 à 12:08:19   

Reply

Marsh Posté le 27-05-2005 à 13:13:57    

merci beaucoup ;)

Reply

Marsh Posté le 27-05-2005 à 13:22:11    

plainsofpain a écrit :

c'est pas autorisé, et ca ne marchera pas ...


 [:mlc]  
 
Bien sûr que si c'est autorisé, où est le problème? [:johneh]


Message édité par masklinn le 27-05-2005 à 13:24:39

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 27-05-2005 à 13:30:46    

c'est autorisé de mettre du php DANS la CSS ?


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 27-05-2005 à 13:34:16    

plainsofpain a écrit :

c'est autorisé de mettre du php DANS la CSS ?


 
Si ta page CSS est générée par PHP, pourquoi pas :
http://antp.be/main.css
http://antp.be/main.css?c=red
http://antp.be/main.css?c=green
etc.
:D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 27-05-2005 à 13:36:33    

plainsofpain a écrit :

c'est autorisé de mettre du php DANS la CSS ?


Tu génère ta CSS avec du PHP [:spamafote]  
 
Un fichier PHp ça sort jamais que du texte hein, après tu dis au browser de l'interpréter, donc si tu veux faire

<link rel="stylesheet" type="text/css" href="dynamicCSS.php?profile=chocolat" />


rien ne t'en empêche [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 27-05-2005 à 13:38:09    

antp => Tu as demandé à ton serveur Apache que php traite les CSS ?  

Reply

Marsh Posté le 27-05-2005 à 13:38:29    

Ah ben je savais pas ça ...
 
C'est quand meme un truc que j'éviterai, je trouve que c'est deja assez le bordel de devoir parfois foutre du php dans le code html, si en plus on en met dans les CSS ..
 
 :pt1cable:


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 27-05-2005 à 13:40:29    

The-Shadow a écrit :

antp => Tu as demandé à ton serveur Apache que php traite les CSS ?


 
Le vrai non du fichier est main.css.php, mais sur les serveurs d'OVH on peut ommetre l'extension (un des mods apache, je ne me souviens plus duquel, ça permet aussi d'avoir par ex index.fr.php, index.en.php, etc. et que le serveur prenne le bon selon la langue définie dans le navigateur de l'utilisateur)
Il ne faut évidemment pas oublier de préciser le bon type MIME, parce que Mozilla n'aime pas recevoir une page CSS envoyée comme du HTML ;)


Message édité par antp le 27-05-2005 à 13:52:31

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 27-05-2005 à 13:42:44    

antp a écrit :

Il ne faut évidemment pas oublié de préciser le bon type MIME, parce que Mozilla n'aime pas recevoir une page CSS envoyée comme du HTML ;)


C'est le moins qu'on puisse dire [:dawa]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 27-05-2005 à 13:45:27    

Re ;)
 
Bon ma barre marche bien, mais est ce que quelqu'un aurait une astuce pour pouvoir centrer juste audessus de chaque hangement de couleur la valeur qui appartient a chaque fois (comme sur mon dessin dans mon premier post)
 
voila le code actuel :

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  .conteneur { width:500px;}
  5.  #conso, #engag, #tot_libre{
  6.    float:left;
  7.    height:15px;}
  8.  #conso { background-color:#FE0000;}
  9.  #engag {background-color:#FF7C34;}
  10.  #tot_libre {background-color: #00FF01;}
  11.  .clearall { clear:both;
  12.     height:0;}
  13.  br.clearall {clear: left;
  14.     height:0;}
  15. </style>
  16. </head>
  17. <body>
  18.  <?
  19.   $heur_tot = 140;
  20.   $heur_engag = 120;
  21.   $heur_conso = 30;
  22.   $conso_pourcent = (int) ($heur_conso*100/$heur_tot);
  23.   $engag_pourcent = ((int) ($heur_engag*100/$heur_tot)) - $conso_pourcent;
  24.   $tot_pourcent = 100 - $engag_pourcent - $conso_pourcent;
  25.  ?>
  26.   <div class="conteneur">
  27.    <div id="conso" style="width:<? echo ($conso_pourcent.'%'); ?>">&nbsp
  28.    </div>
  29.    <div id="engag" style="width:<? echo ($engag_pourcent.'%'); ?>">&nbsp
  30.    </div>
  31.    <div id="tot_libre" style="width:<? echo ($tot_pourcent.'%'); ?>">&nbsp
  32.    </div>
  33.   </div>
  34. </body>
  35. </html>


 
je test des trucs de mon coté mais javoue que je galere

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed