Bonsoir !
Je suis confronté à un petit souci.
Je créé une sorte de visionneuse d'images dynamique avec chargement des infos via ajax.
Pour ce faire j'ai un div principal pour ma visionneuse qui a une taille fixe, dans lequel j'ai deux balises <a> en float qui me servent de boutons de navigation (suivant / précédent). Suite de ces deux <a> j'ai un div qui va recevoir (via une fonction javascript en réponse à ma requête ajax) une balise <img> contenant.... beeeen l'image à afficher :p
Voici le css :
Et voici le code html associé :
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 #cadre_image { background: #333333; margin: 0px auto; padding: 5px 0px; position: relative; } #lien_prev, #lien_next { margin-top: 1px; position: relative; width: 50%; z-index: 2; } #lien_prev { float: left; } #lien_next { float: right; } #lien_prev:hover { background: url('../images/fleche_gauche.png') no-repeat center left; } #lien_next:hover { background: url('../images/fleche_droite.png') no-repeat center right; } #image { background: #000000; border: 1px solid #555555; margin: auto; position: relative; z-index: 1; } .cleaner { clear: both; }
Mon souci est donc le suivant : l'image est automatiquement positionnée vers le bas sous mes deux <a> "boutons" comme si elle faisait un "clear: both;" toute seule... Est-ce un comportement normal ou bien y a-t-il une erreur dans mon code ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div id="cadre_image" style="width: 800px;"> <a href="javascript:void(0);" id="lien_prev"></a> <a href="javascript:void(0);" id="lien_next"></a> <div id="image"></div> <div class="cleaner"></div> </div>
Cela fonctionnait très bien sans la balise <img>...
J'ai beau retourner le truc dans tous les sens avec Firebug, rien à faire... Je précise également que le problème est présent de la même manière sous IE et Chrome.
Merci.
Brice
PS : j'ai tenté de mettre un clear: none (même sur la balise <img> elle-même, c'est vous dire...), mais toujours rien![]()
Partager