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
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
A voir également:
- Positionnement d'images
- Images gratuites - Guide
- Google images - Guide
- Images enregistrées - Forum Gravure
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? - Forum Photoshop
- Superposez les images à télécharger avec le logiciel de votre choix. quel animal apparaît ? ✓ - Forum Photo numérique
5 réponses
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
21 janv. 2010 à 12:04
Bonjour,
En css tu as mis quoi pour tes blocks A et B ?
En css tu as mis quoi pour tes blocks A et B ?
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
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>
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
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" />
<!-- 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" />
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
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.
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.
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
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.
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
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
22 janv. 2010 à 13:10
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.