[RollOver]Bandeau images multiples
Bonjour,
J'ai un bandeau pour un site web, qui est composé d'images découpées que j'assemble les unes à la suite des autres.
Sur 6 images que j'assemble, j'en ai 3 qui sont "dynamiques", c'est à dire qui changent au survol de la souris (images de même taille)
J'ai farfouillé sur le net, j'ai trouvé pas mal de trucs sympahiques, mais il s'est posé toujours le même problème.
Quoi que je fasse, j'ai les images qui se mettent les unes en dessous des autres, et je comprends pas pourquoi, ( je pense qu'il me manque quelques notions en CSS )
Donc voilà mon code CSS
Code:
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
| #page
{
display:block;
width:1024px;
height:800px;
margin:0 auto 0 auto;
border:1px solid #868;
background:url(../images/background.png);
padding:5px;
}
div#bandeau {
height:75px;
text-align:center;
background:transparent;
}
div#survol a {
position:relative;
display:inline;
float:left;
width:64px;
height: 62px;
background-image:url(../images/Header/btann.gif);
}
div#survol a:hover{
background-image:url(../images/Header/o_btann.gif);
}
div#survol2 a {
position:relative;
display:inline;
float:left;
width:64px;
height: 62px;
background-image:url(../images/Header/btann.gif);
}
div#survol2 a:hover{
background-image:url(../images/Header/o_btann.gif);
}
img{
border:0;
} |
Et mon code HTML :
Code:
1
2
3
4
5
6
| <div id="page">
<div id="bandeau">
<div id="survol"><a href="#"></a></div>
<div id="survol2"><a href="#"></a></div>
</div>
</div> |
Donc si quelqu'un sait pourquoi les images se mettent les unes en dessous des autres, et comment y remedier?
J'ai essayé de mettre les diplay en block et de changer les float dans tous les sens, rien y fait, j'ai pas réussi
Je suis sous IE7
Merci
