[RESOLU] positionner image coin inférieur droit précédente

27 avr. 2014, 12:57

bonjour

je voudrais positionner une image n°2 à partir du coin inférieur droit d'une image n°1
sachant que les dimensions de l'image n°1 sont des variables
(l'image n°1 , transparente, me sert en fait de "vecteur" pour positionner l'image n°2)

le code ci-dessous (avec des div imbriqués) ne fonctionne pas
y-a-t-il un solution ? (avec js par exemple)

<?php 

echo "<html>";
echo "<body>" ;

echo "<style>
div.image_1 {
	position:absolute;
	border:1px solid red;
	}
div.image_2 {
	position:relative;
	width=100px;
	height=100px;
	border: 1px solid blue;
	}	
</style>";

echo "<div class='image_1'>"; // début div image_1

$x=400;
$y=400;
echo "<img src='toto' width=$x height=$y alt=''>";

echo "<div class='image_2'>"; // début div imbriquée image_2
echo "<img src='toto' width=100 height=100 alt=''>";
echo "</div>";	// fin div image_2 	

echo "</div>"; // fin div image_1

echo "</body>";
echo "</html>";

?>

27 avr. 2014, 13:15

Modération :
Afin d'obtenir plus de réponses, le sujet a été déplacé dans un forum plus approprié.

Salut,

C'est parce que tu n'utilise les bonnes infos css
- z-index pour indiquer qui sera au dessus de l'autre
- bottom et right pour indiquer la position.

De tuto sur la chose
http://www.alsacreations.com/actu/lire/ ... solue.html

@+

27 avr. 2014, 13:33

réponse un peu l'emporte-pièce ...
j'ai évidemment déjà testé avec z-index, bottom, right,... mais ça ne marche évidemment pas
car le pbm posé est d'une autre nature, probablement pas résoluble avec css seul

27 avr. 2014, 13:42

réponse un peu l'emporte-pièce ...

ben tiens

j'ai évidemment déjà testé avec z-index, bottom, right,... mais ça ne marche évidemment pas

ce n'est ni dans le code proposé ni dans ton message je ne peu pas deviner ce que tu as pu tester.

Syntaxe: [ Télécharger ] [ Masquer ] [ Sélectionner ] [ Réduire ]
Code php
<?php

echo "<html>";
echo "<body>" ;

echo "<style>
div.image_1 {
position:absolute;
border:1px solid red;
}
div.image_2 {
position:relative;
width=100px;
height=100px;
border: 1px solid blue;
}
</style>";

echo "<div class='image_1'>"; // début div image_1

$x=400;
$y=400;
echo "<img src='toto' width=$x height=$y alt=''>";

echo "<div class='image_2'>"; // début div imbriquée image_2
echo "<img src='toto' width=100 height=100 alt=''>";
echo "</div>"; // fin div image_2

echo "</div>"; // fin div image_1

echo "</body>";
echo "</html>";

?>

car le pbm posé est d'une autre nature, probablement pas résoluble avec css seul

la vérité viendra ""d'ailleurs"" ....

donc

je voudrais positionner une image n°2 à partir du coin inférieur droit d'une image n°1

=> positionnement absolu d'un conteneur par rapport à un autre

sachant que les dimensions de l'image n°1 sont des variables

aucun problème.

LA solution c'est
top: hauteur de l'image 1;
left : largeur de l'image 1;

je suis partie sur bottom et right, parce que tu as indiqué une taille à la div et j'ai pensé que l'image avait cette taille.

@+

27 avr. 2014, 14:47

en js il suffit de récupérer la largeur(width) du bloc contenant l'image1.la largeur récupérée permettra d'appliquer une margin à gauche du bloc contenant l'image 2


<div class='bloc1'>
    <img src="" />   <!--image 1 -->
 </div>

<div class='bloc2'>
    <img src="" />   <!--image 2 -->
 </div>

[javascript]
//avec jquery
var width=$( '.bloc1' ).outerWidth();
$('.bloc2').css('margin-left',width+'px');
[/javascript]

[RESOLU] positionner image coin inférieur droit précédente

Qui est en ligne