Positionnement d'images

Résolu

croy -

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.

Configuration: Mac OS X, Safari et Firefox
mysql, Php et Apache en local pour développement

Afficher la suite

5 réponses

Réponse 1 / 5
Bertrand40
Bonjour,

En css tu as mis quoi pour tes blocks A et B ?

0

Réagir

croy Auteur

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>

Réponse 3 / 5
Bertrand40
Et avec ça ? Sans DIV.


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


<img src="images/calendrier.png" style="height: 200px; display: block; margin-left: 100px;" alt="calendrier.png" />

0

Réagir
1. croy Auteur
  
  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éagir
Réponse 4 / 5
Bertrand40
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

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

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

croy Auteur

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.

Positionnement d'images

5 réponses

Discussions similaires

Newsletters