Rechercher : dans
Par :

Problème barre de progression inanimé

Dernière réponse le 22 jun 2009 à 20:09:17 vins94, le 20 jun 2009 à 18:04:16 
 Signaler ce message aux modérateurs

Bonjour,
Je suis depuis peu responsable d'un site qui utilise nuked clan que j'ai créé pour ma guilde sur world of warcraft, et j'ai trouvé sur un site http://www.guilde-enrage.com une barre de progression que je trouve assez sympa et j'aimerais faire la même chose. Malheureusement, avant d'avoir recours à ce forum j'ai jeté un œil sur pas mal d'autre et à chaque fois je me retrouve confronté à quelque chose que je ne comprend pas.

Un ami m'a dit "Pour la barre de progression, il faut hélas passer par du javascript :p . Je ne sais pas comment marche le JS, mais pour faire le code, c'est une boucle qui compte de 0 à 100, et tu n'as qu'à afficher un bloc dont la taille dépend du i : à 0, le bloc n'est pas visible, mais à 100 il a sa taille complète. Le HTML te permettras juste d'afficher un bloc, mais pas de "l'animer".

Je crois avoir compris ce qu'il veut dire grâce a ce site http://cssglobe.developpez.com/tutoriels/css/barre-progression-animee/ mais je ne serais pas le faire. C'est pour cela que je fais appel a vous.

Je ne souhaite pas que ma barre soit "animer". J'aimerais qu'elle ressemble à ça : http://www.gazetteonline.com/graphics/progress_bar.gif et que de 0 à 25 % elle soit rouge, de 25 à 50 % orange, de 50 à 75 % jaune et de 75% à 100% vert. Je dois utiliser un block html mais je ne sais pas les lignes à écrire ni comment faire en sorte que cette barre soit visible.
Je vous remercie d'avoir lu mon problème.

Configuration: Windows XP
Firefox 3.0.11

Meilleures réponses pour « problème barre de progression inanimé » dans :
Insérer une barre de progression sous PowerPoint VoirINSERER UNE BARRE DE PROGRESSION Pour permettre de visualiser l'avancement d'un exposé, une barre de progression peut être affichée en bas du diaporama. Voici comment procéder: Une fois le diaporame réalisé, allez dans Outils, Macro et Visual...
Les programmes actifs ne sont pas dans la Barre des tâches VoirPréambule Note Première méthode (plus simple) Deuxième méthode (plus difficile) Avertissement Résolution du problème Cette méthode m'a fait perdre mes raccourcis dans la barre des tâches Préambule Sous Windows, il arrive que les...
Tester ses barrettes de RAM avec MemTest VoirTester sa RAM avec MemTest Il existe un logiciel fonctionnant sur n'importe quel PC permettant de tester à fond ses barrettes de mémoire, il s'agit de MemTest86 : http://www.memtest86.com http://www.memtest.org/ Pour l'utiliser il suffit de...
Windows 7 - Barre des tâches et menu démarrer VoirLA BARRE DES TACHES ET LE MENU DEMARRER Cet élément clé du Bureau de Windows est situé en bas de l’écran, sur toute sa largeur. C’est l’un des aspects du système qui a le plus évolué entre Windows Vista et Windows 7. Pour commencer, elle est plus...

1

Alkaaran, le 22 jun 2009 à 08:47:47

Re, c'est ton sauveur dévoué ^^

Ta barre de progression tu la veut animée ou pas finalement par ce que j'ai pas tout compris à ta demande :p

Plus encore, compte-tu que sa progression change souvent, ou la changera tu manuellement ?

Répondre à Alkaaran

2

vins94, le 22 jun 2009 à 08:59:43

Coucou ^^ merci =) alors je souhaite pas qu'elle soit annimé, et je veux la changer manuellement.
Par exemple il faut tuer 17 boss dans une instance, je prendrais mon pourcentage par rapport a quel boss j'en suis et je l'indiquerait. Je trouve que c'est plus jolie avec une barre de progression. Tu vois ce que je veux dire ou pas ?
Je vais passer mon bac français, a toute à l'heure :) Toujours prêt à aider.

Répondre à vins94

3

Alkaaran, le 22 jun 2009 à 10:17:23
  • +2

Alors pour cela tu mettra un <span> dans un autre

<span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span>

Pour changer la progression tu mettras width avec ton pourcentage et ce que tu m'a dit plus tot pour l'id :
de 0 a 25 : progress0
de 25 a 50 : progress25
de 50 a 75 : progress50
de 75 a 100 : progress75

ensuite ca devient du css :

span.progressbar {
border:solid 1px #666;
background:white;
height:20px;
width:160px;
}

span.inner_progressbar {
background-image:url("../img/bg50.png");
background-repeat:repeat-x;
}

span#progress0 {
background:#f00;
}

span#progress25 {
background:#fc0;
}

span#progress50 {
background:#ff0;
}

span#progress75 {
background:#0f0;
}


Il faut que tu mette cette image http://img31.yfrog.com/img31/4465/bg50.png pour que ca fasse un peu plus "stylé", tu la met dans /themes/wow_horde/img

Répondre à Alkaaran

4

 vins94, le 22 jun 2009 à 20:09:17

Haaaaa ça me rend fou, j'arrive a rien :/
j'ai mit <span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span> dans un autre block html.
Ensuite j'ai été dans /themes/wow_horde/img et j'ai mit ton image bg50 et mon image progress_bar.gif
Ensuite j'ai été dans thèmes/wow_horde/style/style.css et j'ai collé tes lignes rien ne se passe.
Si tu veux esseyé je te passe mon ftp Toujours prêt à aider.

Répondre à vins94