Sujet Précédent Sujet Suivant

Positionnement d'images

Résolu/Fermé
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 - 21 janv. 2010 à 11:52
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 - 22 janv. 2010 à 13:10
Bonjour,

Je voudrais positionner des images en absoolu/relatif !

La page à produire a la structure suivante : 

+---------------------------------------------------+
+
+    zone A (hauteur variable)
+
+---------------------------------------------------+
+---------------------------------------------------+
+ 
+    zone B
+ 
+ +----------------+ 
+ +  image 1   
+ +----------------+
+ 
+       +----------------+  
+       +  image 2    
+       +----------------+ 
+                    
+---------------------------------------------------+


images 1 et 2 sont élaborées par le script PHP qui génère la page et détermine également la position des deux images relativement au coin supérieur/gauche de la zone B (rappelons que la zone A a une hauteur variable qu'il me semble difficile de calculer au niveau du serveur).

J'ai essayé des combinaisons de CSS position absolute/relative sans trouver de solution qui permettent de positionner les deux images.

Merci de votre aide.

5 réponses

Réponse 1 / 5
Bertrand40 Messages postés 1193 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 192
21 janv. 2010 à 12:04
Bonjour,

En css tu as mis quoi pour tes blocks A et B ?
0
Réponse 2 / 5
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
21 janv. 2010 à 12:20
Voici un de mes essais : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="en-fr" />
	</head>
	<body>
<div style="border:1px solid green">
	<img src="images/calendrier.png">
</div>
<div style="border:1px solid red">
	<div style="position:relative;left:0px;top:0px">
		<img src="images/calendrier.png">
	</div>
	<div style="position:relative;left:50px;top:0px">
		<img src="images/calendrier.png">
	</div>
	<div style="position:relative;left:100px;top:0px">
		<img src="images/calendrier.png">
	</div>
</div>
<div style="style="border:1px solid blue">
	<img src="images/calendrier.png">
</div>
<div style="border:1px solid blue">
	<img style="position:relative;left:0px;top:0px" src="images/calendrier.png">
	<img style="position:relative;left:50px;top:0px" src="images/calendrier.png">
	<img style="position:relative;left:100px;top:0px" src="images/calendrier.png">
</div>
0
Réponse 3 / 5
Bertrand40 Messages postés 1193 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 192
21 janv. 2010 à 12:45
Et avec ça ? Sans DIV.

<!-- IMAGE 1 -->
<img src="images/calendrier.png" style="height: 200px; display: block;" alt="calendrier.png" />

<!-- IMAGE 2 -->
<img src="images/calendrier.png" style="height: 200px; display: block; margin-left: 100px;" alt="calendrier.png" />
0
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
21 janv. 2010 à 13:25
Merci,

Ca pourrait fonctionner dans le sens horizontal puisque la zone B est cadrée à gauche.

Par contre, ça ne convient pas dans le sens vertical car la zone B commence à une position variable.
0
Réponse 4 / 5
Bertrand40 Messages postés 1193 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 192
22 janv. 2010 à 09:05
Je comprends pas ton problème
Si le DIV A est de hauteur variable ça ne change rien puisque le DIV B qui suit se déplacera en fonction.
Ensuite tes 2 images sont à placer à l'intérieur de ton DIV B.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
22 janv. 2010 à 13:10
Pour répondre à mon besoi j'ai développé un script Javascript illustré par l'exemple ci-dessous : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="en-fr" />
		<script>
			//	positionne les images contenues dans une div
			//
			//	La position de chaque image est déterminée par l'attribut "position" de la balise <img correspondante
			//	Cet attribut contient une (left et top) ou deux (left puis top) valeurs numériques séparées par une virgule.
			//	Ces deux valeurs définissent la distance en pixels du coin sup./gauche de l'image par rapport au 
			//	coin sup. gauche de la div.
			//	Les paddings de la div sont pris en compte.
			function positionneImages( divName )
				{
				var m = document.getElementById( divName );
				//	paddings de la div --> paddings[]
				var paddings = m.style.padding.split(' ');
				var i = 0;
				for( ; i<4; i++ )		//	for each pas dispo avec Safari
					paddings[i] = parseInt(paddings[i]);

				var maxHeight = 0;
				var maxWidth = 0;
				var idxChild = 0;
				for( ; idxChild < m.childNodes.length; idxChild ++ )		//	for each pas dispo avec Safari
					{	//	loop on nodes in container div
					img = m.childNodes[ idxChild ];
					if( img.nodeType != null && img.nodeType == 1 )
						{
						if( img.nodeName == "IMG" )
							{
							var position = img.getAttribute("position");
							i = position.indexOf( "," );
							var x, y;
							if( i == -1 )
								{
								x = y = parseInt( position );
								}
							else
								{
								x = parseInt( position );
								y = parseInt( position.substr( i+1 ) );
								}
							img.style.position = "absolute";
							img.style.left = m.offsetLeft + paddings[3] + x + "px";
							img.style.top = m.offsetTop + paddings[0] + y + "px";
							var bottom = y + img.height;
							if( bottom > maxHeight ) maxHeight = bottom;
							var right = x + img.width
							if( right > maxWidth ) maxWidth = right;
							}
						}
					}
				m.style.height = maxHeight + paddings[2] + "px";
				m.style.width = maxWidth + paddings[1] + "px";
				}
		</script>
	</head>
	<body onload="positionneImages( 'hieros' )">
		<div style="border:1px solid green">
			<p>Zone A</p>
		</div>
		<div id="hieros" style="padding:10px 20px 30px 40px;border:1px solid blue">
			<img position="0,0" src="images/editButton0100.png">
			<img position ="50,50" src="images/editButton0100.png">
			<img position ="-40,350" src="images/editButton0100.png">
		</div>
	</body>
</html>


Ce point est donc clos.
Merci pour vos messages.
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
tests du greta
yass -
yassir -

9 réponses