Changement inopiné de présentation de pages HTML/CSS

**benkad57** · 24/09/2021, 16h19

Bonjour,
Suite à un arrêt accidentel de mon poste , l'aspect de mes pages a changé: les éléments les composant se présentent dans un sens différent que celui attendu ( Ils se placent les uns à coté des autres au lieu d'être les uns sur autres.)
Il n'y a aucune modification de code que soit sur le HTML, le CSS ou le JS. Je ne vois vraiment pas où est le problème!
Je compte sur vous pour me venir en aide surtout si quelqu'un a déjà eu ce problème.
Merci pour votre sollicitude.
Kader

**jreaux62** · 24/09/2021, 18h30

Bonjour,

comment veux-tu qu'on t'aide, si tu ne montres pas ton site * ?

* ou au moins une page qui montre le problème.

**benkad57** · 24/09/2021, 19h48

Bonsoir ,

Effectivement ma question a été tournée pour attirer l'attention

la je présente un exemple d'écran mais tous les écrans plus d'une trentaine présente le même problème :
j'espère qu'il y a quelqu'un qui a compris ce qui s'est passé , et qu'on pourra m'aider .
Un exemple d’écran

Nom : ecran1.png
Affichages : 79
Taille : 103,6 Ko

Nom : ecran1.png
Affichages : 79
Taille : 103,6 Ko

Voici le code correspondant à cette page , sachant que j’utilise Bootstrap 4 pour l’affichage de mes éléments et qu’avant l’extinction accidentelle de mon ordi l’affichage était correct.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?php 
    require_once (dirname(dirname(__FILE__)).'/PDO/global.php');
        require_once (dirname(dirname(__FILE__)).'/PDO/doc_class.php');
    $documents =  getAllDocListing();
 
?>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gestion des Documents</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="/includes/fontawesome/css/all.css" rel="stylesheet"/>
        <link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/includes/bootstrap/css/dataTables.bootstrap4.min.css">
        <link rel="stylesheet" href="/assets/css/buttons.dataTables.min.css"/> 
        <link rel="stylesheet" href="/includes/select2/css/select2.min.css"/>
        <link rel="stylesheet" href="/assets/css/styles.css"/>
    </head>
 
 
 
    <body class="bg-light">
 
       <header class="pageHeader container-fluid ">
               <nav class="navbar navbar-light">
                    <a class="navbar-brand brand col-2" href="/">
                         <img src="/assets/images/logo1.png" height="100" width="150" alt="logo">
                   </a>
	    <a class="navbar-brand brand" href="/">
	          <div  class="brand-text col-8 offset-2" >
                                <h1 class="text-color"><i class="fas fa-angle-right"></i> Gestion des 
     Documents <i class="fas fa-angle-left"></i>
    </h1>
                        </div>
	    </a>
            </nav>
        </header>
        <div class="main">
            <div class="container">
                <div class="row pb-4">
                    <div class="col new-doc">
                        <a class="btn btn-custom btn-primary float-right" href="./nv_doc.php">
                  <i class="fas fa-file-signature"></i>  Nouveau Document</a>
                    </div>
                </div>
                <section class="listing">
                    <div class="row">
                        <div class="col-12">
                            <table id="example" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Id Document</th>
                                        <th>Intitule Document</th> 
		            <th>Action</th>
                                    </tr>
                                </thead>
                                <?php 
                                  if (count($documents) > 0){  ?>
                               <tbody> <?php
                                                foreach ($documents as $document) {?>
                                   	 <tr>
                                      		  <td><?php echo $document['ID_DOC']; ?></td>
                                        		  <td><?php echo $document['INTITULE_DOC']; ?></td>
				  <td>  <a class="text-color " href="updateDoc.php?document=<?php 
                                                echo $document['ID_DOC'] ?>">Modifier
</a>
  </td>
                                          </tr>
                                	<?php } ?>
                                 </tbody><?php
                                        }else{
                                               echo '<h3 class="text-color text-center p-4">Aucun DOCUMENT</h3>';    
                                       }?>
		</table>
		 <div class="text-center"> 
 
		       <a href="index_init.php" class="btn btn-warning m-4">Retour</a>
           </div>						
      </div>							
     </div>
   </section>
  </div>
 </div>
  <footer>
            <script src="/assets/js/jquery.min.js"></script>
            <script src="/assets/js/jquery.dataTables.min.js"></script>
            <script src="/includes/popper/popper.min.js"></script>
            <script src="/includes/bootstrap/js/bootstrap.min.js"></script>
            <script src="/includes/bootstrap/js/dataTables.bootstrap4.min.js"></script>
            <script src="/assets/js/dataTables.buttons.min.js"></script>
            <script src="/assets/js/buttons.print.min.js"></script>
            <script src="/includes/fontawesome/js/all.min.js"></script>
            <script src="/includes/select2/js/select2.min.js"></script>
            <script src="/assets/js/scripts.js"></script>
    </footer>
    </body>
</html>

**benkad57** · 25/09/2021, 15h46

C'est bon !

J'ai corrigé le bug en réinstallant les différents composants du bootstrap. Le crash du cache a du certainement avoir fait des dégats sur certains fichiers!

Merci Jreaux62 pour ta sollicitude.

Kader

Changement inopiné de présentation de pages HTML/CSS

Conception Web

Discussions similaires

Partager

Partager