Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de CSS qui ne s'actualise plus

    11 juin 2019 à 11:54:56

    Bonjour a vous,

    Je vous expliquer brièvement mon problème :

    Ce matin en voulant continuer le développement de mon projet web je me suis rendu compte que mon CSS ne s'actualiser plus, bizarrement certaine modification sont revenu a leur état initial puis depuis plus moyen de les modifier.

    Alors j'ai effectuer une sauvegarde puis mis a part avant de tout remettre a zéro et tout reprendre au propre avec les bon itinéraires de sauvegarde mais rien n'y fait 

    Est-ce une erreur de ma part ou un problème logiciel pour moi la question reste entière >.< 

    J'utilise :

    WAMPP serveur pour le localhost

    NetBeansIDE 8.2 pour le code

    Voici une partie de mon code HTML :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <title>ACCUEIL</title>
        <meta charset="utf-8">
        <link rel="icon" href="images/favicon.ico">
        <link rel="shortcut icon" href="images/favicon.ico" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/slider.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/jquery-migrate-1.1.1.js"></script>
        <script src="js/superfish.js"></script>
        <script src="js/jquery.equalheights.js"></script>
        <script src="js/tms-0.4.1.js"></script>
        <script src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
        <script src="js/jquery.ui.totop.js"></script>
        <script>
          $(window).load(function(){
    		  $('.slider')._TMS({
    			show:0,
    			pauseOnHover:false,
    			prevBu:'.prev',
    			nextBu:'.next',
    			playBu:false,
    			duration:800,
    			preset:'fade',
    			easing:'easeOutQuad', 
    			pagination:true,//'.pagination',true,'<ul></ul>'
    			pagNums:false,
    			slideshow:8000,
    			numStatus:false,
    			banners:'fade',
    			waitBannerAnimation:false,
    			progressBar:false
    		  })  
          });
          
    	  $(window).load (
    		 function(){$('.carousel1').carouFredSel({auto: false,prev: '.prev1',next: '.next1', width: 960, items: {
    			 visible : {min: 4, max: 4},
    		  }, 
    		  responsive: false, 
    		  scroll: 1, 
    		  mousewheel: false,
    		  swipe: {onMouse: false, onTouch: false}});
    	  });      
    
        </script>
         <!--[if lt IE 8]>
           <div style=' clear: both; text-align:center; position: relative;'>
             <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
               <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
             </a>
          </div>
        <![endif]-->
         <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <link rel="stylesheet" media="screen" href="css/ie.css">
        <![endif]-->
    </head>
    <body>
    <!--==============================header=================================-->
    <header>
        <div class="container_12">
    	<div class="grid_12">
                <h1>
                    <a href="index.html"><img src="images/logo.png" alt="GIEQ"></a>
                </h1>
    	</div>
        </div>
        <nav>
            <div class="container_12">
                <div class="grid_12">
                    <ul class="sf-menu">
                        <li class="current"><a href="index.html">ACCUEIL</a></li>
                        <li><a href="index-1.html">A Propos</a>
                        	<ul>
                                <li><a href="#">NOS MÉTIERS</a></li>
                            </ul>
                        </li>
                        <li><a href="index-2.html">PROJETS</a></li>
                        <li><a href="index-3.html">SERVICES</a></li>
                        <li><a href="index-4.html">CONTACTS</a></li>
                    </ul>
                <div class="clear"></div>
              </div>
            </div>
        </nav>
    </header>
    
    <!--=======content================================-->
    <div id="content">
        <div class="slider-relative">
            <div class="slider-block">
                <div class="slider">
                    <ul class="items">
                        <li><img src="images/slider-1.jpg" alt="">
                            <div class="banner">Coffreur bancheur</div>
                        </li>
                        <li><img src="images/slider-2.jpg" alt="">
                            <div class="banner">Maçon</div>
                        </li>
                        <li><img src="images/slider-3.jpg" alt="">
                            <div class="banner">Canalisateur</div>
                        </li>
                        <li><img src="images/slider-4.jpg" alt="">
                            <div class="banner">Ouvrier des voiries et reseaux</div>
                        </li>
                        <li><img src="images/slider-5.jpg" alt="">
                            <div class="banner">Ravaleur / Peintre ravaleur</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container_12">
            <div class="box-1">
                <div class="wrap">
                    <h2 style="margin-bottom: 50px;">Qui sommes nous ?</h2>
                </div>
                <p><img src="images/page1-img9.jpg" alt="" width="200" style ="margin-right: 25px; margin-bottom: 100px; margin-top: 5px;">Le GEIQ est une association de Groupement d'Employeur pour l'Insertion et la Qualification. Il permet à des personnes de pouvoir retrouver un emploi tout en bénéficiant en même temps d'une formation qualifiante ou dîplomante dans différents types de métiers recherchés.
                    Ce sont des contrats de professionnalisation ou d'apprentissage de 6 mois à 24 mois, qui dans 65% des cas se transforment, à l'issue, en CDI. Il faut aimer le travail en équipe, être ponctuel, ne pas avoir le vertige (travail sur échafaudage), écouter les consignes données,
                    avoir un bon relationnel, ne pas craindre ni le froid, ni le chaud. Le BTP offre de nombreux métiers, selon ses préférences. Il regroupe des entreprises très différentes implantées partout en France. On peut travailler près de son domicile ou dans une autre région, dans une
                    petite ou grande entreprise, en plein air ou en intérieur, être chef d'entreprise ou salarié.
                </p>
    	</div>
            <div class="clear"></div>
        </div>
        <div class="bg-1">
            <div class="container_12">
                <div class="grid_12">
                	<div class="carousel">
                    <a href="#" class="prev1"></a>
                    <a href="#" class="next1"></a>
                        <div class="carousel_div">
                            <ul class="carousel1">
                                <li>
                                    <img src="images/page1-img1.jpg" alt="">
                                    <h4>Coffreur bancheur</h4>
                                        <p align="justify">
                                            Le coffreur bancheur travaille dans le gros oeuvre du batiment. Il est chargé de dresser les murs en béton armés en suivant des plans précis qu'il faut savoir décrypter et appliquer.
                                            Une foisqu'il a recu le béton, le coffreur le coule dans les banches (panneaux métalliques) dressés à l'avance et équipés des armatures en fer. 
                                            Ce procédé requiert une bonne précision et surtout une planification rigoureuse. Une fois le béton sec, il retire le moule afin de vérifier la qualité du travail.
                                        </p>
                                    <a href="#" class="btn" style="margin-top: 125px;">En savoir plus</a>           
                                </li>
                                <li>
                                    <img src="images/page1-img2.jpg" alt="">
                                    <h4 style="margin-left: 80px;">Maçon</h4>
                                        <p align="justify">
                                            La maçonnerie est un des domaines le plus porteurs du BTP. Accesible dès le CAP, le métier de maçon conduit à construire des murs en béton, pierre, mortier, plâtre ...
                                            Etre maçon demande une bonne condition physique afin de porter de lourdes charges. Il faut aussi savoir lire un plan, dresser des banches, effectuer des coffrages, prendre des mesures pour l'emplacement des portes, fenêtres ou canalisations.
                                            C'est un métier extrêmement porteur à condition d'être motivé.
                                        </p>
                                    <a href="#" class="btn" style="margin-top: 125px;">En savoir plus</a>    
                                </li>
                                <li>
                                    <img src="images/page1-img3.jpg" alt="">
                                    <h4 style="margin-left: 40px;">Canalisateur</h4>
                                        <p align="justify">
                                            Le poseur de canalisations se charge de la construction ou de la réparation des réseaux d'eaux et de gaz. Travaillant à la pose de tuyaux pvc ou en béton armé, il intervient dans les tranchées et stabilise le terrain après le raccordement des canalisations.
                                            Il s'attache aussi à remettre la voirie en état après le chantier. Le canalisateur exerce un métier dans le domaine des travaux publics, il doit posséder une bonne conduition physique et de bonnes notions en manutention et normes techniques.
                                        </p>    
                                    <a href="#" class="btn" style="margin-top: 107px;">En savoir plus</a>    
                                </li>
                                <li>
                                    <img src="images/page1-img4.jpg" alt="">
                                    <h4>Voiries et reseaux</h4>
                                        <p align="justify">
                                            L'ouvrier VRD (Voiries et Reseaux Divers), réalise tout ou partie des ouvrages liés à la construction ou à la réfection de routes, de chausées comme l'enrobé, des voies férées et de leurs dépendances (bordures, trottoirs et canivaux) le tout
                                            selon les règles de sécurité. Dans le cadre de son travail, il peut conduire des engins de travaux publics. Cette actiité s'exerce après des études dans une spécialité du gros oeuvre ou des travaux publics. Dans certain cas, un Certificat d'Aptitude
                                            à la Conduite En Sécurité (CACES) conditionné par une aptitude médicale à renouveler périodiquement peut être requis. 
                                        </p>
                                    <a href="#" class="btn" style="margin-top: 52px;">En savoir plus</a>    
                                </li>
                                <li>
                                    <img src="images/page1-img5.jpg" alt="">
                                    <h4>Peintre ravaleur</h4>
                                        <p align="justify">
                                            Que ce soit en extérieur ou en intérieur, le métier de ravaleur est une activité multitâche, qui nécessite des connaissances et des techniques bien particulières. Le ravaleur travaille sur des batiments neufs ou anciens, du sol au plafond, avec pour objectif de
                                            remettre en état des murs, des sols ou des plafonds endommagés. Le travail du ravaleur se fait en grande partie en extérieur et très souvent sur des échafaudages. C'est un métier souvent en lien avec la peinture; on parle alors de peintre ravaleur.
                                            Il peut être amené à travailler également en équipe selon l'ampleur et le délai du travail à effectuer. Et il doitrespecter nombres de mesures de sécurités
                                        </p>
                                    <a href="#" class="btn">En savoir plus</a>           
                                </li>
                                <li>
                                    <img src="images/page1-img10.jpg" alt="">
                                    <h4>Et beaucoup d'autre</h4>
                                    <p align="justify">
                                        Vous voulez en savoir plus ? Il suffit de contacter votre agence GIEQ BTP LOIRET par téléphone ou par mail, toutes les informations nécessaires sont déjà disponibles sur la page contact.
                                    </p>
                                    <a href="index-4.html" class="btn" style="margin-top: 278px;">Contacter nous</a>           
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
    </div>
    	<!--==============================footer=================================-->
    <footer>
        <div class="container_12">
    	<div class="grid_8">
                <span>GIEQ BTP LOIRET &copy; 2019</span>
    	</div>
        </div>
    </footer>
    </body>
    </html>

    Et le code de ma partie CSS :

    @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
    @import "../css/reset.css";
    @import "../css/grid.css";
    @import "../css/superfish.css";
    
    html {width: 100%;}
    
    a[href^="tel:"] {color: inherit;text-decoration:none;}
    * {-webkit-text-size-adjust: none;}
    
    body {
    	font: 12px/19px  Arial, Helvetica, sans-serif;
    	color:#6f6f6f;
    	position:relative;
    	min-width: 1025px;
    	background: #E50044;
    	text-align: justify;
    }
    .ic {
    	border:0;
    	float:right;
    	background:#fff;
    	color:#f00;
    	width:50%;
    	line-height:10px;
    	font-size:10px;
    	margin:-220% 0 0 0;
    	overflow:hidden;
    	padding:0
    }
    h1, h2, h3, h4, h5, h6 {
    	font-weight: normal;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color:#E50044; /* Couleur titre h1 ... */
    }
    h2 {
    	font-size: 32px;
    	line-height: 1em;
    	text-transform:uppercase;
    }
    h4 {
    	font-size: 18px;
    	line-height: 1em;
    	color: #E50044;
    	text-transform:uppercase;
            margin-bottom: 25px;
    }
    p {margin-bottom: 19px;}
    .text-info {color:#000;}
    .lead {font-size:14px; color:#fe8948;}
    p.lead {margin-bottom:10px;}
    
    ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    ul.list li{
    	background: url(../images/marker.gif) 0 6px no-repeat;
    	color: #6f6f6f;
    	font-size:13px;
    	margin-top:7px;
    	padding-left: 27px;
    }
    ul.list li a{color: #6f6f6f;
    ul.list li a:hover{color: #fd6e43;}
    /*links*/
    
    a {
    	text-decoration: none;
    	color: #fe8948;
    	outline: none;
    	transition: 0.5s ease;
    	-o-transition: 0.5s ease;
    	-webkit-transition: 0.5s ease;
    }
    
    a:hover {color: #16445c;}
    
    
    a.btn {
    	background:#A60027;
    	display: inline-block;
    	font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'Times, serif;
    	font-size:14px;
    	line-height:1em;
    	padding: 11px 30px 12px 30px;
    	color: #fff;
    	text-transform:uppercase;
    	margin-top: 33px;
    }
    
    a.btn:hover {
    	background:#A60027;
    	color:#fff;
    }
    
    .clear {clear: both;}
    .wrap {overflow:hidden;}
    .indent-1 {padding:88px 0 35px 0;}
    .indent-2 {padding:70px 0 25px 0;}
    
    .top-1 {padding-top:91px;}
    .bot-1 {padding-bottom:85px;}
    
    /*----------- Back to top --------------*/
    #toTop {
      display: none;
      width: 49px;
      height: 48px;
      overflow: hidden;
      background: url(../images/totop.png) 0 0 no-repeat;
      position: fixed;
      margin-right: -600px !important;
      right: 50%;
      bottom: 80px;
      z-index: 999;
    }
    #toTop:hover {
    }
    #toTop:active,
    #toTop:focus {
      outline: none;
    }
    /*header*/
    
    header {
    	display: block;
    	padding: 39px 0 0;
    	z-index: 999;
    	background:#EDEDED;
    }
    
    header h1 {
    	float: none;
    	text-align:center;
    	display:block;
    	position: relative;
    	z-index: 999;
    	margin:0;
    }
    header h1 a {display: inline-block;}
    header h1 a img {display: block;}
    
    nav {background:#E50044; margin-top:41px; padding:23px 0 21px 0;}
    nav .grid_12 {text-align:center;}
    
    /*******content********/
    #content {background:#EDEDED;} /* Fond index-1 */
    
    .bg-1 {border-top:#c8cece 1px solid; border-bottom:#e0e0e0 1px solid; background: #EDEDED;}
    .bg-2 {background: #f1f1f1;}
    .bg-3 {border-top:#dddddd 1px solid; border-bottom:#e2e2e2 1px solid;}
    .border-1 {padding-right:200px; padding-bottom:91px;}
    
    .box-1 {margin-top:121px; margin-bottom:84px;}
    .box-1 {margin-right:auto; margin-left: auto; }
    .box-1 img {float:left;}
    .box-1 h4 {overflow:hidden; padding-top:22px;}
    .box-1 .wrap {padding-bottom:18px;}
    
    .box-2 img {float:left; margin-right:20px;}
    
    .list-news li {margin-top:45px;}
    .list-news li:first-child {margin-top:0px;}
    .list-news .wrap {padding-bottom:11px;}
    .list-news .badge { background:#16445c; float:left; width:60px; padding:8px 0 8px 0; text-align:center; font-size:18px; line-height:1em; color:#fff; text-transform:uppercase; margin-right:20px;}
    .list-news .badge span {display:block; font-size:10px;}
    
    .list-people {margin-left:-20px; margin-top:-18px;}
    .list-people li {float:left; margin-left:20px; margin-top:18px;}
    
    .lists {overflow:hidden; margin-top:19px;}
    .lists>div {float:left; width:160px;}
    
    .list-project li {margin-top:91px;}
    .list-project h4 {margin:39px 0 30px 0;}
    
    .list-work li {margin-top:15px;}
    .list-work li:first-child {margin-top:0px;}
    
    /****************/
    .carousel {padding-top:91px; padding-bottom:91px; position:relative;}
    
    .carousel1 {
    	cursor: default !important;
    	overflow:hidden;
    }
    .carousel1 li {float: left; width:220px !important; margin-right:20px;}
    
    .carousel_div {
    	width: 960px;
    	margin: 0 auto;
    	
    }
    .carousel1 li h4 {color:#000; margin:39px 0 30px 0;}
    a.prev1, a.next1 {
    	width: 29px;
    	height: 29px;
    	top: 43px;
    	position: absolute;
    	display: block;
    	z-index: 999;
    	background:#3b708c;
    }
    a.next1 {
    	right: 0px;
    	background:url(../images/next.png) 0 0 no-repeat #A60027;
    }
    a.prev1 {
    	right: 34px;
    	background:url(../images/prev.png) 0 0 no-repeat #A60027;
    }
    a.next1:hover {background-color:#16445c;}
    a.prev1:hover {background-color:#16445c;}
    
    /*****************/
    .map {padding-top:35px}
    .map iframe {
      width: 100%;
      height: 462px;
      border: none;
    }
    
    address {font-size:14px; font-style:normal; margin-top:22px}
    address dl {float:left; width:220px;}
    address dl+dl {margin-left:20px;}
    address dl dt {margin-bottom:19px;}
    address dl span {display:inline-block; width:100px;}
    
    /****Form****/
    
    #form {padding-top: 30px; position:relative;}
    #form .text-info {padding-bottom:3px;}
    #form input {
    	background:#fff;
    	color:#6f6f6f;
    	border: 1px solid #e5e5e5;
    	padding: 6px 14px 7px 14px;
    	width: 100%;
    	height: 30px;
    	float:left;
    	font: 12px/15px  Arial, Helvetica, sans-serif;
    	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    }
    
    #form textarea {
    	background:#fff;
    	color:#6f6f6f;
    	height: 273px;
    	overflow: auto;
    	border: 1px solid #e5e5e5;
    	padding: 6px 14px 7px 14px;
    	width: 100%;
    	position: relative;
    	resize:none;
    	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	float:left;
    	font: 12px/15px  Arial, Helvetica, sans-serif;
    	margin: 0;
    }
    #form label {
    	position:relative;
    	display: block;
    	min-height: 45px;
    	width: 220px;
    	float: left;
    }
    #form label .title {font-size:16px; padding:12px 0 9px; display:block;}
    #form .error, #form .empty {
    	color: #FF0000;
    	display: none;
    	font-size: 10px;
    	line-height:12px;
    	width:auto;
    	position: absolute;
    	z-index: 999;
    	right: 5px;
    	bottom: -12px;
    	float:left;
    }
    #form .error-empty {
    	display:none;
    	float:left;}
    #form .message {width: 100%;}
    
    
    #form .success {
    	display: none;
    	position: absolute;
    	width: 100%;
    	font-size: 16px;
    	background: #fff;
    	border: 1px solid #e3e3e3;
    	text-align: center;
    	padding: 20px 10px;
    	z-index: 999;
    	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    }
    
    #form .btn {cursor:pointer;}
    
    
    /************Footer***********/
    
    footer {
    	font-size: 12px;
    	color: #FFFFFF;
    	text-transform:uppercase;
    	padding:21px 0 18px 0;
    }
    footer span {display:block; margin-top:6px;}
    footer a {color: #6398a2;}
    footer a:hover {color: #16445c;}
    .soc-icon {display:block;}
    .soc-icon li {display:inline-block; float:right; margin-left:13px;}
    .soc-icon li a {display:block;}
    .soc-icon li a img {opacity:0.46;}
    .soc-icon li a:hover img {opacity:1;}
    

    Je sais que certaine partie ne sont pas dans les règles de l'art mais je fais de mon mieux et j'espère trouver une solution avec votre aide ou de moi même si je trouve d'ici la 

    Merci par avance :p



    • Partager sur Facebook
    • Partager sur Twitter
      11 juin 2019 à 13:42:19

      Bonjour, avant même de penser au code à tu testé un

      ctrl + F5

      Histoire de vider le cash de ton navigateur, de même à tu testé le comportement de ta page une fois modifier sur un autre navigateur ?

      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

        11 juin 2019 à 13:42:39

        Bonjour,

        Tu as essayé de vider le cache de ton navigateur ?

        • Partager sur Facebook
        • Partager sur Twitter
        Développeur FrontEnd | Site CV / Site PRO
          11 juin 2019 à 13:58:45

          Bon ce doit être à 99% le cache. Pour ça appuie sur les touches "Ctrl" + "h". Tu fais nettoyer le cache, coche la dernière case.

          • Partager sur Facebook
          • Partager sur Twitter
            11 juin 2019 à 15:44:03

            Non c'est vrai que je n'y avais absolument pas penser a vider le cache, du coup vu que j'aime me compliquer la tache je suis reparti sur un tout nouveau dossier et sans vraiment savoir pourquoi mon problème a été résolu :p

            Maintenant je penserai a regarder aussi la cache :p

            Merci quand même d'avoir pris le temps de me répondre 

            Bonne journée a vous tous :magicien:

            • Partager sur Facebook
            • Partager sur Twitter
              11 juin 2019 à 16:31:34

              Oui de la même manière si tu fais un nouveau fichier.css et que tu le lie à ton html tu auras des nouvelles modifs pour faire court le cache va sauvegarder le design du site pour éviter de recharger tout le site à chaque fois en gros c'est pour gagner du temps .
              • Partager sur Facebook
              • Partager sur Twitter
                11 juin 2019 à 16:57:47

                Et bien d'accord merci pour l'info :)
                • Partager sur Facebook
                • Partager sur Twitter

                Problème de CSS qui ne s'actualise plus

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown