Mon css ne s'applique pas totalement

fructueux97 Messages postés 8 Statut Membre -  
fructueux97 Messages postés 8 Statut Membre -
Bonjour,
j'ai fais une barre de progression css dans l'index de mon code mais depuis juste une partie du css réponds mais tout le reste ne marche plus. qui a une idée du pourquoi merci

5 réponses

  1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Sans voir ton code ... impossible de te répondre !

    NB: Pour poster ton code sur le forum, tu devras utiliser les balises de code en y précisant le langage.
    Explications ( à lire entièrement !! ) disponibles ici :
    https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

    .
    0
  2. fructueux97 Messages postés 8 Statut Membre
     
                    
    <!DOCTYPE html>
    <html lang="fr">
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
     <title>ProgressBar</title>
    </head>
    <body>
        <!DOCTYPE html>
    <html lang="fr">
    
    
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" >
        <meta name="author" content="Shreethemes">
        
        <link rel="shortcut icon" href="images/index.png">
       
    
        <title> AXA BANK</title>
    <link href="css/style1.css" rel="stylesheet">
    
    
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins" rel="stylesheet">
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Magnificpopup Css -->
        <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    
        <!-- Bootstrap core CSS -->
        <link href="css/materialdesignicons.min.css" rel="stylesheet">
        <link href="css/fontawesome.css" rel="stylesheet">
        <link href="css/pe-icon-7-stroke.css" rel="stylesheet">
    
        <!--Slider-->
        <link rel="stylesheet" href="css/owl.carousel.min.css"/> 
        <link rel="stylesheet" href="css/owl.theme.css"/> 
        <link rel="stylesheet" href="css/owl.transitions.css"/>
        <link rel="stylesheet" href="css/slick.css"/> 
        <link rel="stylesheet" href="css/slick-theme.css"/>  
    
        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/menu.css" rel="stylesheet">
        <link href="css/default.css" rel="stylesheet">
        
        
    </head>
    
        <body>
            <!-- Loader -->
            <div id="preloader">
                <div id="status">
                    <div class="spinner">
                        <div class="double-bounce1"></div>
                        <div class="double-bounce2"></div>
                    </div>
                </div>
            </div>
    
            <!-- Navigation Bar-->
            <div class="tagline hidden-md">
                <div class="container">
                    <div class="float-left">
                        <div class="phone">
                            <i class="fas fa-phone"></i> +1 123 456 78 90
                        </div>
                    </div>
                    <div class="float-right">
                        <ul class="top_socials">
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                            <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fab fa-pinterest"></i></a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            
            <!-- Navigation Bar-->
            <header id="topnav" class="defaultscroll fixed-top navbar-sticky sticky">
                <div class="container">
                    <!-- Logo container-->
                    <div>
                        <!--<p><br><b><h2>AXA BANQUE</b></h2></p>-->
                        
                        <a href="#" class="logo">
                            <img src="images/logo.png" alt="missing_logo" height="20">
                        </a>
                        
                    </div>
                    <!-- End Logo container-->
                    <div class="menu-extras">
                        <div class="menu-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </div>
                    </div>
    
                    <div id="navigation">
                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">
                            <li class="has-submenu">
                                <a href="#">ACCUEIL</a><span class="menu-arrow"></span>
                                    
                            </li>
                               
    
                            <li class="has-submenu">
                                <a href="javascript:void(0)">PROCESSUS</a><span class="menu-arrow"></span>
                                
                            </li>
    
                            <li class="has-submenu">
                                <a href="javascript:void(0)">CONTACT</a>
                                <span class="menu-arrow"></span>
                                
                            </li>
                              
                            <li class="dropdown d-none d-md-inline-block">
                                <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
                                    aria-haspopup="false" aria-expanded="false">
                                    <i class="fas fa-search noti-icon"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-search">
                                    <div>
                                        <form role="search" class="navbar-form">
                                            <input type="text" placeholder="Search..." name="s" class="form-control search-bar">
                                            <a href="#" class="btn-search"><i class="fa fa-search"></i></a>
                                        </form>
                                    </div>
    
                                </div>
                            </li>
                        </ul>
                        <!-- End navigation menu-->
                    </div>
                </div>
            </header>
            <!-- End Navigation Bar-->
            
            <!-- HOME START-->
       <section class="bg-home">
                <div class="bg-overlay"></div>
                <div class="home-center">
                    <div class="home-desc-center">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <div class="title-heading text-center">
                                        <p class="p-header">SUIVEZ VOTRE TRANSFERT EN LIGNE EN TOUTE SECURITE</p>
                                        <img src="images/welcome.gif">
                                        <p class="text-white-50 mx-auto">Ici, vous pouvez verifier en temps reel le statut de votre transfert en ligne</p>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
    
            
           <section class="section-two bg-light">
                <div class="container">
    
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="feature">
                               
                                <div class="fe-head" style="text-align: center;">
                                    <p>Montant du tranfert: </p>
                                    <p>Nom et Prenom(s) du beneficiare</p>
                                    <p>Nom de la banque beneficiaire</p>
                                    <p>Numero du compte bancaire</p>
                                    <p>BIC/SWIFT: </p>
                                    <p>Destination:</p>
                                    <p>IBAN</p>
                                    <p>BIC/SWIFT:</p>
                                    <p>Statut: <i style="color: blue">Validate</i></p>
                                    <p>ETAT DE LA SURVEILLANCE DU TRANSFERT EN LIGNE</p>
                                                      
                                </div>
    
                                
                                
    
                            </div>
                        </div>
         
                    </div>
      <souligne> <div class="meter animate">
      <span style="width: 90%"><span></span></span><i>90%</i>
    </div>
    
           <!-- <label for="file">Downloading progress:</label>
            <progress  value="90" id="file" max="100">90% </progress><i>90%</i>-->
                   
                </div>
                    
            </section>
    
           
    
      
    
            <!-- Back to top -->    
            <a href="#" class="back-to-top" id="back-to-top"> 
                <i class="mdi mdi-chevron-up"> </i> 
            </a>
            <!-- Back to top --> 
    
            <!-- js placed at the end of the document so the pages load faster -->
            <script src="js/jquery.min.js"></script>
            <script src="js/popper.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <!-- Portfolio -->
            <script src="js/jquery.magnific-popup.min.js"></script>
            <script src="js/isotope.js"></script>
            <script src="js/portfolio-filter.js"></script> 
            <!-- Carousel -->
            <script src="js/owl.carousel.min.js"></script>
            <script src="js/owlcarousel.init.js"></script>
            <script src="js/slick.min.js"></script> 
            <script src="js/slick.init.js"></script> 
            <!-- VIDEO ICON -->
            <script src="js/magnific.init.js"></script>
            <!-- COUNTER -->
            <script src="js/counter.init.js"></script>
            <!--custom script-->
            <script src="js/app.js"></script>
    
    
    
        </body>
    
    
    <!--  42:23-->
    </html>
    
    


    
    .meter { 
      height: 20px;  <em>/* Can be anything */</em>
      position: relative;
      background: #555;
      border-radius: 25px;
      padding: 10px;
      box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    }
    
    
    .meter > span {
      display: block;
      height: 100%;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgb(43,194,83);
      background-image: linear-gradient(
        center bottom,
        rgb(43,194,83) 37%,
        rgb(84,240,84) 69%
      );
      box-shadow: 
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;
    }
    
    
    .meter > span:after {
      content: "";
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, .2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .2) 50%, 
        rgba(255, 255, 255, .2) 75%, 
        transparent 75%, 
        transparent
      );
      z-index: 1;
      background-size: 50px 50px;
      animation: move 2s linear infinite;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      overflow: hidden;
    }
    
    
    .meter > span:after, .animate > span > span {
    
    }
    
    
    
    @keyframes move {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 50px 50px;
      }
    }
    
    
    
    .meter > span::after, .animate > span > span {
      animation: move 2s linear infinite;
    }
    

    </code>
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Ok
      et donc, en quoi ton css ne s'applique pas ?
      As tu bien vidé le cache de ton navigateur ?
      As tu essayé avec un autre navigateur ?
      Quel navigateur as tu essayé ?
      0
  3. fructueux97 Messages postés 8 Statut Membre
     
    oui j'ai bien vider le cash
    oui oui
    j'ai essayé avec chrome et opéra
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      et donc, en quoi ton css ne s'applique pas ?
      0
  4. fructueux97 Messages postés 8 Statut Membre
     
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. fructueux97 Messages postés 8 Statut Membre
     
    le css que j'ai envoyé doit agir sur la barre de progression mais ce qui n'est pas le cas juste une partie a agir deçu cest ça qui a donné ce rendu
    0