Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2930 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Creer une barre de remplissage

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Creer une barre de remplissage

n°1099124
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 10:09:41  profilanswer
 

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

mood
Publicité
Posté le 27-05-2005 à 10:09:41  profilanswer
 

n°1099131
denzz
huhuuuuu ! (désolé )
Posté le 27-05-2005 à 10:12:56  profilanswer
 

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...

n°1099132
gatsusat
Posté le 27-05-2005 à 10:13:02  profilanswer
 

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

n°1099136
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 10:15:47  profilanswer
 

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 ;)

n°1099212
gatsusat
Posté le 27-05-2005 à 10:56:20  profilanswer
 

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

n°1099274
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 11:23:40  profilanswer
 

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 ;)

n°1099319
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 11:52:45  profilanswer
 

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

n°1099340
plainsofpa​in
Pingouino's lover
Posté le 27-05-2005 à 12:01:54  profilanswer
 

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
n°1099347
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 12:04:29  profilanswer
 

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 :(

n°1099361
gatsusat
Posté le 27-05-2005 à 12:08:19  profilanswer
 

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

mood
Publicité
Posté le 27-05-2005 à 12:08:19  profilanswer
 

n°1099447
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 13:13:57  profilanswer
 

merci beaucoup ;)

n°1099456
masklinn
í dag viðrar vel til loftárása
Posté le 27-05-2005 à 13:22:11  profilanswer
 

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
n°1099461
plainsofpa​in
Pingouino's lover
Posté le 27-05-2005 à 13:30:46  profilanswer
 

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
n°1099467
antp
Super Administrateur
Champion des excuses bidons
Posté le 27-05-2005 à 13:34:16  profilanswer
 

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
n°1099471
masklinn
í dag viðrar vel til loftárása
Posté le 27-05-2005 à 13:36:33  profilanswer
 

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
n°1099473
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 27-05-2005 à 13:38:09  profilanswer
 

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

n°1099474
plainsofpa​in
Pingouino's lover
Posté le 27-05-2005 à 13:38:29  profilanswer
 

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
n°1099476
antp
Super Administrateur
Champion des excuses bidons
Posté le 27-05-2005 à 13:40:29  profilanswer
 

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
n°1099478
masklinn
í dag viðrar vel til loftárása
Posté le 27-05-2005 à 13:42:44  profilanswer
 

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
n°1099485
bixibu
Ca ... c'est fait!
Posté le 27-05-2005 à 13:45:27  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Creer une barre de remplissage

 

Sujets relatifs
meilleur log pour creer site waibe ???Je recherche un tuto pour creer une galerie photos
un petit coup de main pour créer un Buttonbarre de progress
Firefox Barre d'outils[Partage CSS/HTML] Petite barre de notation 'quivabien'
[CSS/HTML ?] Barre de défilement horizontale gênanteCode html pour créer un scroll
[Résolu] Créer des contrôles dynamiquement sur une formcreer un fichier
Plus de sujets relatifs à : Creer une barre de remplissage


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR