Discussion :

[bitardo]

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 :

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
#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 :

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

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

[bitardo]

Bon, ben en fait je suis passé par des listes pour gérer ça, maintenant ça marche...

J'ai juste un souci, c'est que j'aimerais que ma bannière soit centrée au milieu, alors que là elle est sur la gauche.
Si quelqu'un connait un moyen sans passer par le position:relative + left : x px;
Merci

[buzeeg]

Salut,

listes ou tableau c'est le moyen le meilleur pour faire ça, et je crois que ce n'est pas possible sans

sinon, pour ton nouveau problème redonne ton nouveau code s'il te plait.

pourquoi tu met un float:left; dans tes survols ? et sinon je suis pas sur que les display: inline; et display: block; servent.

pour ton problème, le text-align: center; devrait suffire. Il y a autre chose qui le fait planter je pense.

les margin: 0 auto 0 auto; ça sert à rien : ça doit mm pas être reconnu, je n'ai jamais vu ça nulle part

voila

[bitardo]

Merci buzeeg, j'ai modifié ce que tu me disais, et ça marche bien maintenant

[buzeeg]

ok pas de problème