Bonjour à tous,
Sur mon site (HTML & PHP) je souhaite maintenir une bande horizontale en haut de l'écran, même quand l'utilisateur scroll la page (un peu à la manière de ce qu'on peut voir sur allociné). pour ce faire, j'utilise le code suivant (dans mon fichier style.css) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
#header{
	position: fixed;
	top: 0;
	background-color: rgb(248,240,153);
	text-align :center;	
	margin-left:10%;
}
Naturellement dans ma page HTML, j'ai le code ci-dessous :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<Table width = "80%" id=" header" >

Plus bas dans ma page HTML, je souhaite mettre une petite animation pour attirer l'oeil du visiteur.
Dans mon fichier CSS j'ai donc le code suivant :
Code : 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
.actu {
	text-align: center;
	border-style: solid;
	border-width: 4px;
	border-radius : 7px;
	border-color: white;
 
  -webkit-animation-name: tada;
  animation-name: tada;
  animation-iteration-count: 3;
  -webkit-animation-duration: 1s ;
  animation-duration: 1s ;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
 
.actu :hover {	
	border-style: none ;
	background-color:white;
}
 
  @-webkit-keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
 }
Dans mon fichier HTML, "j'appelle" cette animation par le code suivant :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<table class="actu" >

Le problème, c'est que mon tableau qui contient cette petite animation passe "au dessus" de ma bannière et du coup le rendu n'est pas très chouette.
(ATFU mon site est accessible sur ce lien)

J'ai bien essayé de remplacer mes <table> par des <div> mais rien ne change.

Quelqu'un saurait comment je pourrai résoudre ce problème ?

Merci d'avance pour votre aide et vos conseils