Pied de page commun à plusieurs pages

**awalter1** · 04/03/2023, 15h43

Bonjour.
J'ai un pied de page affichant un copyright et un lien vers FB. Le code est identique dans 2 fichiers html (index.html et page1.html, le premier fichier appelant le 2ème.
Le fichier css est commun aux deux (il est appelé par <link rel="stylesheet" href="style.css"> dans le <head> des 2 fichiers).

Pourtant, le comportement est différent :
Dans la page gérée par index.html : j'ai le comportement attendu.
Dans la page gérée par page1.html : le formatage est correct, j'ai le copyright mais pas le lien FB.
C'est trés étrange!

code html dupliqué à l'identique :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
  <footer>
    <div id="copyrightEtIcons">
      <div class="copyright">
        <span>© Alain Walter; 2023</span>
      </div>
      <div class="icons">
        <a href="http://www.facebook.com/groups/Groupe.Anthony.Chambaud"><i class="fa fa-facebook"></i></a>
      </div>
    </div>
  </footer>

Code CSS :

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
 
/* ******************* FOOTER ******************** */
#copyrightEtIcons {
  display: flex;
  background-color: #524A3A;
  width: 100%;
  color: #FFFAE1;
  height: 1.5em;
}
.copyright {
  float: left;
  padding-left: 5%;
  color: #FFFAE1;
  width: 200px;
}
.icons {
  padding-left: 20%;
}
.icons a {
  font-size: 1.3em;
  color: #FFFAE1;
}
.icons i:hover {
  transform: scale(1.5);
  transition: 0.1s;
}

Merci de votre aide

**awalter1** · 04/03/2023, 16h38

Avec l'inspecteur, je vois que sur la 2ème page j'ai une largeur de 0, ce qui explique pourquoi le champ n'est pas visible, mais quelle directive peut provoquer cela, les deux fichiers html ayant le même css.
Sur la première page, l'inspecteur m'indique une largeur de 11,8.

**awalter1** · 04/03/2023, 16h42

J'ai trouvé :
Dans le deuxième fichier html je ne faisais pas l'import du fichier <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> qui définit des fontes, notamment pour le caractère de facebook. Je pense que la classe "fa fa-facebook" y est défini.

Pied de page commun à plusieurs pages

HTML

Vue hybride

Discussions similaires

Partager

Partager