IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

progress bar HTML/CSS/JS


Sujet :

CSS

  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 19
    Par défaut progress bar HTML/CSS/JS
    bonjour,
    j'aimerai réaliser un progress bar qui progresse étape par étape suite a la décision de l'utilisateur, et cet avancement sera sauvegardé dans une base de donnée. Pour l'instant j'ai réaliser une maquette (pièce jointe) mais j'ai aucune idée par quoi je dois commencer à développer. mercii d'avance
    Nom : tt.PNG
Affichages : 1153
Taille : 31,2 Ko

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 561
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 561
    Par défaut
    la maquette est une image ou bien vous l'avez déjà faite en HTML ?

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 19
    Par défaut
    nope.. la maquette n'est qu'une image

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    alors commence par écrire le HTML + CSS.

    • Ca peut être une <table>, ou autre chose (display:table ou flex, en CSS,...)
    • Il y a de la rotation (CSS3) pour le texte, mais tu pourrais aussi mettre simplement le chiffre DANS le rond (et mettre "étape xx" en tooltip, par exemple)
    • ajouter une classe "current" (ou "active") sur l'étape en cours, une classe "done" sur les étapes terminées,...

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 19
    Par défaut
    merci pour la réponse.
    Mettre des classes done ou active par exemple, comment je peux les rentrer dans la base de données et aussi je dois rependre le suivi (cette page) avec la dernière étape qui a été validé. Est-ce que c'est faisable?

  6. #6
    Invité
    Invité(e)
    Par défaut
    Oui c'est faisable.
    Mais commence par le début.
    AVANT de coder quoi que ce soit, la toute première étape est la CONCEPTION : là, il faut réfléchir.

    Pour l'enregistrement en Bdd, il faut en effet SAVOIR ce que tu vas enregistrer pour CONCEVOIR correctement la structure de la table.

    • nombre d'étapes
    • étape en cours (numéro)
    • et puis... c'est à peu près tout, non ?

  7. #7
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 19
    Par défaut
    en gros dans ma bdd j'ai des fiches et chaque fiche contient 9 étapes qui seront validés une par une à la suite ou indépendamment.
    Donc une fois que l’utilisateur a validé une étape j’aimerai mettre "true" comme valeur pour l’attribut "flag" dans la table Etape_etudiant, et lorsqu'on cherche une fiche par exemple j'aimerai affiché l’étape la plus élevée qui a été validé.Nom : Capture.PNG
Affichages : 716
Taille : 6,9 Ko

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    attention ne mélange pas tout !

    Traite séparément tes problèmes et revient nous voir pour la mise en oeuvre de la présentation finale.

  9. #9
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Citation Envoyé par zb1230 Voir le message
    en gros dans ma bdd....
    Maintenant que tu as défini "en gros", il va falloir étudier ça plus en détails.

    Ne compte pas sur nous pour :
    • réfléchir à ta place
    • concevoir à ta place
    • coder à ta place

    On est là pour t'aider sur une question précise, sur un point (de code) précis.

    Par conséquent, il faut t'armer d'un stylo dans une main et de patience dans l'autre, et gribouiller du papier.

Discussions similaires

  1. [Débutant] Convertir des fichier HTML en image (jpeg,png et gif) avec une progress bar
    Par hsoussi dans le forum Développement Windows
    Réponses: 4
    Dernier message: 07/04/2014, 12h35
  2. Barre de progression html/CSS et VBScript
    Par Scartof dans le forum VBScript
    Réponses: 6
    Dernier message: 11/03/2011, 15h02
  3. [HTML/CSS] scroll bar
    Par Pe04 dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 20/02/2006, 11h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo