positionner une image aléatoire

01 août 2017, 14:41

Bonjour à tous,
Je n'y connais rien en PHP et, à passé 77 ans, je n'ai plus le temps d'aller à l'école.
J'utilise du PHP dans mes programmes, mais sans pouvoir modifier les fonctions.
J'ai une routine qui fonctionne parfaitement pour afficher jusqu'à 20 images de 1000x600 pixels en fond d'écran.
Mais !!!! je voudrais modifier la position d'affichage pour décaler l'image vers la droite. Après moult essais, j'ai cru comprendre que l'image aléatoire est centrée sur la css body

Est-il possible de changer la liaison pour changer la position ?
mon code source

<style type="text/css">
body { height: 100%; width: 100%; text-align: center; background-image: url(fond_cisalpin-region.png); line-height: 20%; }
fond_page { position: fixed; top: auto; height: 600px; width: 1000px; text-align: center; }
</style>
</head>

<body>
<?php
$nbimages=10;
$nomimages[1]="bg_1.jpg";
$nomimages[2]="bg_2.jpg";
$nomimages[3]="bg_3.jpg";
$nomimages[4]="bg_4.jpg";
$nomimages[5]="bg_5.jpg";
$nomimages[6]="bg_6.jpg";
$nomimages[7]="bg_7.jpg";
$nomimages[8]="bg_8.jpg";
$nomimages[9]="bg_9.jpg";
$nomimages[10]="bg_10.jpg";
srand((double)microtime()*1000000);
$affimage=rand(1,$nbimages);
?>
<div id="fond_page">
<img src="image/<?echo $nomimages[$affimage];?>" border=0 width=500 height=300 alt="Image aléatoire">
</div>
</body>

Un champion en PHP peut-il me dire si ce que je voudrais est réalisable facilement ?
M'indiquer ce que je dois modifier !

Merci d'avance de vos réponses

01 août 2017, 16:23

Bonjour,

Il faut que tu appliques une propriété CSS sur ton image pour y appliquer les transformation graphique que tu veux.
Le plus propre avant toute chose est de donner une class à ton image, par exemple "mesimages" :

Code : Tout sélectionner

<img src="image/<?echo $nomimages[$affimage];?>" border=0 width=500 height=300 alt="Image aléatoire">

devient

Code : Tout sélectionner

<img src="image/<?echo $nomimages[$affimage];?>" class="mesimages" alt="Image aléatoire">

Et ensuite dans le CSS, c'est à dire dans les balises <style>, il faut rajouter les propriétés que tu veux :

<style>
// code CSS précédent
.mesimages{ 
     border-width: 0px;
     width: 500px;
     height: 300px;
}</style>

Après pour décaler ton image, il faut prendre en compte que le parent de tes images est la div fond_page et encore au dessus body or pour ceux-ci il est explicitement demandé à ce que leur contenu soit centré avec la propriété text-align:center (qui aligne le texte et les images aussi).
Donc il faudrait en savoir davantage sur ce que tu entends par décaler à droite car si une image est centrée elle ne peut pas être décalée à droite, donc:
- soit on l'aligne à gauche avec text-align:left; et on peut mettre une marge avec margin-left:5%; par exemple
- soit on l'aligne à droite avec text-align:right; et on peut mettre une marge à droite avec margin-right:5%;

01 août 2017, 16:26

Bonjour,

Je suis pas sur d'avoir tout compris.

soit l'image doit être sur le bords droit donc text-align: center; peut devenir text-align: right;
soit le décalage doit être plus précis, et la je conseillerai text-align: left;padding-left:400px; en jouant sur la bonne valeur de padding-left.

soit @rthur a raison et sa solution peut te convenir aussi

01 août 2017, 18:29

Merci à tous pour vos promptes réponses,
une vue est plus explicite qu'un long discours,
mes pages actuelles affichent ce style de vue

en modifiant l'affichage du tableau à gauche
en remplaçant text-align:center; par text-align:right; dan la css body
et en augmentant la largeur de la photo, j'obtiens un positionnement ok à gauche.
Ce que je voudrais obtenir, c'est que la photo soit à une marge de 5 mm à droite pour avoir un affichage conforme à la vue suivante

c'est la marge de 5mm à droite qui me pose problème.
Est-ce possible à programmer ?

01 août 2017, 20:47

Le problème que je vois c'est que tu développes uniquement pour ta taille/résolution d'écran, mais si quelqu'un consulte ton site sur une tablette ou sur un écran plus grand, il faut que tu en tiennes compte je pense.
Voici par exemple à quoi ressemble ta page sur mon ordi qui a une résolution de 1920x1080px :

Il faut voir comment tu veux faire l'affichage mais ça pourrait être utile de mettre une taille en pourcentage plutôt qu'en pixels afin que ça s'adapte aux différentes tailles d'écrans.
Et tu peux mettre des indication min-width/max-width en pixels cette fois ci pour éviter d'avoir le menu par exemple trop petit sur des écrans de mobile par exemple

01 août 2017, 20:59

Après avoir tiré la langue et pianoté avec 2 doigts, je suis arrivé à ce que je voulais.

Merci beaucoup à vous tous. Je regrette d'être nul à ce point, mais la création de site est une occupation récente.

Voilà ce que j'obtiens :

C'est parfait pour moi, je vais passer du temps à réécrire tout ça !!!!!

Merci encore beaucoup

01 août 2017, 21:07

sur cet écran en particulier.
sur mon écran, petit, l'image est trop large donc les liens sont dessus, pas dramatique.

il suffit de redimensionner la taille de son navigateur pour voir ce qu'il se passe quand c’est plus petit.

02 août 2017, 12:02

Bonjour à tous et merci encore de vos conseils,
Mon problème, c'est que je suis plutôt novice en programmation et j'ai beaucoup de mal à mémoriser les astuces qui simplifie la vie.
Mais comme beaucoup de "vieux" du siècle dernier, je veux toujours des trucs bien spéciaux que, ma grammaire informatique étant déficiente, j'ai bien des problèmes pour trouver ce que je cherche dans les nombreux bouquins que je possède.

Je me suis parfaitement rendu compte du problème posé par la non utilisation des % pour les positionnements, mais, je n'arrive pas à régler totalement cet affichage.

positionner une image aléatoire

Qui est en ligne