Page 1 sur 1

positionner image coin inférieur droit précédente

Posté : 27 avr. 2014, 12:57
par Tempsperdu
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>";

?>

Re: positionner image coin inférieur droit précédente

Posté : 27 avr. 2014, 13:15
par moogli
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



@+

Re: positionner image coin inférieur droit précédente

Posté : 27 avr. 2014, 13:33
par Tempsperdu
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

Re: positionner image coin inférieur droit précédente

Posté : 27 avr. 2014, 13:42
par moogli
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.

@+

Re: positionner image coin inférieur droit précédente

Posté : 27 avr. 2014, 14:47
par yann18
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]