Discussion :

[Kikies]

Salut,

Je cherche à afficher deux images à des positions verticales fixes indépendament de la résolution d'écran de l'internaute. L'une sur le haut de l'écran et l'autre en bas. Je pensais pensais avoir trouvé mon bonheur en utilisant:

<div style="position:absolute; top:10%<img src="image_haut.jpg"></div>

et :

<div style="position:absolute; bottom:10%<img src="image_bas.jpg"></div>

mais malheureusement, et bien que l'alignement vertical fonctionne, je n'arrive plus à aligner ces images horizontalement au centre de l'écran tel qu'obtenu avec :

<p style="text-align:center"><img src="image_centre.jpg"></p>

Y a-t'il un moyen de combiner les deux, ou me suis-je échoué sur une voie qui ne mêne à rien ?

[giminik]

je pense que tu as dû faire une erreur de copier coller dans l'énoncé de ton problème...
sinon il faut ajouter left:50% qui va placer ton image au centre horizontalement.
le centrage en positionnement est toujours délicat, car le point positionné est le coin supérieur gauche et non le centre de l'image...

Code :

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

<div style="position:absolute; top:10%; left:50%;"><img src="image_haut.jpg></div>

[Ricou13]

Salut,

il existe plusieurs solutions selon ce que tu veux obtenir.
pour l'image du haut, si le body a des marges à 0, tu peux tout simplement mettre

Code :

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

<div style="text-align:center;"><img src="flower.jpg"></div>

Si tu dois le positionner en absolute :

Code :

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

<div style="border:1px solid red; text-align:center;position:absolute; top:10%; width:100%;"><img src="flower.jpg"></div>

N'oublies pas que le fait de mettre en absolute fait sortie l'élément du flux. De fait ce qui suit sera positionné dérrière l'image.

[Kikies]

Merci de m'avoir répondu si vite,

Giminik, j'avais bien essayé de mettre left:50%, mais comme tu le dis, c'est le coin suppérieur gauche qui est centré, et dans le cas de mon image le résultat n'est pas satisfaisant.

Ricou13, t'es trop fort, j'avais bien essayé de mettre text-align:center, mais je n'avais pas mis width:100%. Du coup cela n'avait aucun effet.

Maintenant ça marche pile poil comme je voulais et je tâcherai de me souvenir de cette grossière erreur.

Merci à vous deux et bonne nuit.

[Ricou13]

Attention cependant. Le width: 100% n'est pas la panacé universelle.

Sous IE, cela peut te poser des soucis si le conteneur ne fait pas 100% de la page.

Mais, si cela te convient, un petit s'impose alors...

[giminik]

sinon tu peux faire comme ça :
puisque le positionnement se fait à partir du bord supérieur gauche, il faut donner une marge négative de largeur / 2.

il faut que width soit égal à la largeur de l'image.

Code :

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

<div style="position:absolute; top:10%; left:50%; width:200px; margin-left:-100px; padding:0;"><img src="image_haut.jpg></div>