Discussion :

[scoubi77]

Bonjour à tous,

J'ai une question a vous soumettre, je voudrais pouvoir positionner une image dans une page. Pour cela j'ai trouvé une solution en css comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<span style="position: absolute; top: 160px; left: 500px; width: 455px; heigth: 43px;">
<A href="xxxxxx.htm" target="nav"><IMG src="zzzzzz.jpg" width="455" height="43" border="0"></span>

je peux donc choisir la position au pixel près mais mon soucis et que si je réduit la fenêtre tout se mélange, y-a t'il une solution pour éviter cela ?
en quelque sorte un " resize " merci par avance

[Invité]

Bonjour,
précise ta question : "positionner ... par rapport à quoi ?"
Peux-tu en dire plus sur la mise en page que tu souhaite ?

Le code que tu montres donne la position absolue par rapport au coin haut gauche de la fenêtre.

Tu as manifestement d'autres éléments sur ta page.
- Comment doit se comporter ton image par rapport à ces éléments ?
- quand on redimensionne la fenêtre, que doit faire l'image par rapport au reste de la page ?

[Auteur]

bonjour,

Deux remarques supplémentaires :
- la balise <a> n'est pas fermée
- il est préférable d'écrire les balises en minuscules

Ensuite (peut-être que je me trompe) ce sont généralement des balises conteneur de type block (div) que l'on sort du flux normal de page rarement des balises inline (span).

[scoubi77]

Bonsoir à vous deux,

Pour essayer de répondre dans l'ordre c'est éffectivement un petit morceau de ma page ( elle fonctionne très bien ), Mon soucis vient du fait que toute ma mise en page est pogrammée en fonction de mon écran. Le fait de positionner quelque chose par coordonnées peut-il s'adapter aux différentes résolutions de ceux qui vont visiter ma page ? taille écran ( 16/9 ou 4/3 ) 1024/768 ou 1920/1080 automatiquement ? je me suis sûrement mal exprimé en posant ma question
merci par avance pour vos aides

ps la balise </a> est un oublie de copie

[Kaamo]

récupère alors la taille de l'écran du client qui visite ta page, et place ton image en fonction de ces dimensions..

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// En fonction de chaque navigateur
// La hauteur
pHeight =  window.innerHeight;
pHeight = (pHeight)? pHeight: document.documentElement.clientHeight;
pHeight = (pHeight)? pHeight: document.body.clientHeight;
// La largeur
pWidth =  window.innerWidth;
pWidth = (pWidth)? pWidth : document.documentElement.clientWidth;
pWidth = (pWidth)? pWidth: document.body.clientWidth;
// Si on a "scrollé" la page en hauteur (utilisation de l'ascenceur)
sTop = window.pageYOffset;
sTop = (sTop)? sTop : document.body.scrollTop;
sTop = (sTop)? sTop : document.documentElement.scrollTop;
// Si on a "scrollé" la page en largeur (utilisation de l'ascenceur)
sLeft = window.pageXOffset;
sLeft = (sLeft)? sLeft : document.body.scrollLeft;
sLeft = (sLeft)? sLeft : document.documentElement.scrollLeft;

et donc, une fois que tu as les dimensions de l'écran, tu peux calculer les coordonnées X/Y de ton conteneur. Par exemple si tu veux le centrer :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var posY=(parseInt(pHeight)/2)-(parseInt(height)/2)+parseInt(sTop);
var posX=(parseInt(pWidth)/2)-(parseInt(width)/2)+parseInt(sLeft);

puis tu appliques ces valeurs à ton conteneur. Un truc dans le genre quoi

[scoubi77]

Bonsoir et merci pour cette réponse très fournie,

Je cherche solution sur ce problème, j'ai pensé a la facilitée en créant un dessin avec mes menus et la fonction map , mais j'ai peur du temps de chargement de la page.

Pourais tu m'espliquer une chose comment prévoir toutes les résolutions des internautes qui vont vennir sur cette page !!!
je comprends pas ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
12 var posY=(parseInt(pHeight)/2)-(parseInt(height)/2)+parseInt(sTop);
var posX=(parseInt(pWidth)/2)-(parseInt(width)/2)+parseInt(sLeft);

merci pour ton aide