Positionnement d'images
Résolu
croy
Messages postés
457
Statut
Membre
-
croy Messages postés 457 Statut Membre -
croy Messages postés 457 Statut Membre -
Bonjour,
Je voudrais positionner des images en absoolu/relatif !
La page à produire a la structure suivante :
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.
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.
A voir également:
- Positionnement d'images
- Des images - Guide
- Logiciel positionnement gratuit - Guide
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
- Extraire images pdf - Guide
- Images enregistrées ✓ - Forum Bluetooth
5 réponses
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>
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" />
<!-- 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" />
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Pour répondre à mon besoi j'ai développé un script Javascript illustré par l'exemple ci-dessous :
Ce point est donc clos.
Merci pour vos messages.
<!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.
