Positionnement d'une balise <img> sous un div flottant [Résolu]

[briceparmentier]

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 :

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
#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;
}

Et voici le code html associé :

Code :

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>

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 ?
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

[NoSmoking]

Bonsoir,
tes 2 liens ont une largeur de 50%, width: 50%;, donc 2 x 50% = 100%, il n'y a plus de place pour la DIV qui va donc à la ligne.

[briceparmentier]

Oui, mais ils sont en float, donc normalement sont censés "survoler" ma balise img non ? Ca marche bien de la même manière avec le div contenant le img...

[briceparmentier]

Bonsoir !

En fait, pour simplifier l'explication de mon phénomène, dans le div que j'ai intitulé "cadre_image" (dans le code de mon message initial), j'ai deux <a> en float, et un <div> (intitulé "image").

Ce div "image" ne bouge pas (donc reste bien sous les balises <a> qui sont en float), mais c'est son contenu qui est décalé vers le bas... Son contenu étant une balise <img>. Avant de mettre cette balise <img> je remplissais mon div "image" avec un autre div, et tout fonctionnait parfaitement. Ce n'est que depuis que j'ai mis cette <img> que le dysfonctionnement est apparu.

C'est parfaitement visible avec Firebug, le div "image" est bien à sa place, mais son contenu <img> est décalé en dessous des <a> flottants...

Merci.
Brice

[NoSmoking]

montres nous comment tu insères cette image, ou le code HTML final

[Candygirl]

Envoyé par briceparmentier

Ce div "image" ne bouge pas (donc reste bien sous les balises <a> qui sont en float), mais c'est son contenu qui est décalé vers le bas... Son contenu étant une balise <img>. Avant de mettre cette balise <img> je remplissais mon div "image" avec un autre div, et tout fonctionnait parfaitement. Ce n'est que depuis que j'ai mis cette <img> que le dysfonctionnement est apparu.

Ce que tu décris n'est pas un dysfonctionnement mais le comportement normal en présence d'éléments flottants. Le div "image" se positionne à l'endroit du flux, son contenu s'écoule normalement en tenant compte des flottants (s'il en a la place, à côté, sinon, au-dessous).

A quel résultat final souhaites-tu exactement parvenir ?

[briceparmentier]

Salut et merci pour vos réponses

Pour te répondre NoSmoking, j'aspire au résultat suivant :

Code :

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"><img src="blablabla" height="xxxpx" width="xxxpx" /></div>
	<div class="cleaner"></div>
</div>

Cette balise <img> est insérée par une fonction javascript résultante de mon appel AJAX, avec un peu de jQuery ça donne ça :

Code :

$("#image").html("<img alt=\""+infos[2]+"\" height=\""+infos[3]+"px\" src=\""+infos[2]+"\" width=\""+infos[4]+"px\" />");

(les "infos[x]" étant générés via un split( ) javascript de la chaine reçue)


@Candygirl : je souhaite que mon image (celle insérée donc par le javascript) reste à sa place dans le div "image", donc SOUS les deux <a> flottants. Et non décalée vers le bas comme si elle effectuait automatiquement un clear: both;

Le résultat est visible ici : http://beta.briceparmentier.com/?page=images&g=8 (en cliquant sur une des miniatures). Si vous utilisez Firebug, vous verrez aisément que le div "image" reste bien à sa place alors que l'image qui est censée être dedans est plus bas...

Je me doute que ce doit être une minuscule connerie, mais c'est un truc que je ne dois pas connaitre...

Merci encore pour votre aide
Brice

[briceparmentier]

Bon, je suis un boulet... En relisant ton message Candygirl je me suis aperçu de mon erreur.

Effectivement c'est normal que mon image se décale vers le bas... La solution est simplement de retirer l'attribut float de mes liens et de les positionner en "absolute"... Le pire c'est que je me suis déjà fait avoir avec ça...
En fait au début ça marchait parce que je mettais mon image en background du div "image"... Donc forcément vu qu'il n'y avait pas de contenu ça n'allait pas à la ligne

C'est tout bon ça marche... Désolé pour le dérangement, j'espère que ma bêtise pourra aider quelqu'un

Merci pour votre aide !
Brice

[Candygirl]

Envoyé par briceparmentier

Le résultat est visible ici : http://beta.briceparmentier.com/?page=images&g=8 (en cliquant sur une des miniatures). Si vous utilisez Firebug, vous verrez aisément que le div "image" reste bien à sa place alors que l'image qui est censée être dedans est plus bas...

Je me doute que ce doit être une minuscule connerie, mais c'est un truc que je ne dois pas connaitre...

Au risque de me répéter, ce comportement est tout à fait normal. Si tu ne donnais pas de hauteur à ton div tu verrais qu'il se terminerait naturellement au bas de ton image et qu'elle se trouve donc bien à l'intérieur du div. Par contre, l'image, comme tout contenu ne va logiquement pas venir recouvrir les flottants... Seule une image en background du div image resterait là où tu estimes être "sa place".

Pourquoi ne positionnes-tu pas plutôt tes flèches en absolute par-dessus ton image ?

Au passage, cela n'a pas de sens d'utiliser des fractions de pixels.

EDIT: je n'avais pas vu ton nouveau message ci-dessus

[briceparmentier]

Envoyé par Candygirl

Au passage, cela n'a pas de sens d'utiliser des fractions de pixels.

Je suis tout à fait d'accord, mais je n'ai pas fait dans la finesse pour l'instant, c'est juste un calcul effectué pour garder mon rapport de proportionnalité entre l'image originale et sa dimension à afficher dans la visionneuse
Comme il est fait niveau PHP, il me suffirait simplement de faire un ceil ou floor un truc comme ça et hop

Merci encore !