Je vous prie de m'excuser si je ne me trouve pas dans le bon forum. Je suis extrêmement novice en codage HTML et CSS néanmoins j'ai commencé à regarder vos cours en ligne. Actuellement, je cherche un peu d'aide pour habiller mon site web de mariage.
Problématique : je souhaite fixer deux images en bas de ma page, si possible en arrière plan et si possible (ça fait beaucoup de "si") faire en sorte que leur positionnement reste fixe malgré la taille de l'écran du support (navigateur sur ordinateur et écran de smartphone).
Existe-t-il une astuce en codage qui pourrait m'aider s'il vous plaît?
Salut, pour positionner un element de maniere fixe, tu dois utiliser dans le css:
position: fixed;
Ensuite, tu dois dire ou il est positionner via top,right,left, bottom.
top:0;
left:0;
Ici par exemple, l’élément sera fixer tout en haut à gauche. Il faudra faire attention egalement à la superposition avec d'autre element, si tu veux qu'il soit en arrière plan, tu lui met un z-index:0, et aux autres éléments, un z-index supérieur.
Apres en fonction de la taille des écrans, il faut savoir qu'ils seront positionner en fonction de ton top,left... de l'ecran. Pour que les tailles des images s'adaptent à l’écran, il faudra utiliser les media queries ou bien utiliser des unités type viewport (1vw = 1% de la largeur de l’écran, 1vh = 1% de la longueur de l’écran)
un grand merci tout d'abord pour la rapidité de votre réponse. J'ai ajouté des media queries dans ma page CSS, cependant, ça n'a pas l'air de faire effet.
J'utilise safari avec l'affichage "conception adaptative" pour vérifier en aperçu la compatibilité de mon site avec les différents support apple, et j'en possède quelques uns à la maison, donc il est très facile pour moi de vérifier que ça fonctionne.
Sur iPad, Macbook Pro, iMac et iPhone ça fonctionne parfaitement bien. En revanche, sur smartphone type Huawei P30, le réglage "fixed" des images sur sur cette dernière plateforme n'est pas respecté ou compris. En fait le code "position: fixed;" sur mon support Android a le même effet que "absolute" sur les autres supports.
Je suppose donc que le problème vient de mon support Android puisque tous les autres supports que j'ai testés affichent mon site correctement.
Supports physiquement testés : iPhone SE, iPad mini, iMac, Macbook Pro
Je me rends compte également que mon site s'affiche correctement (enfin comme je le voudrais) uniquement sur safari, mais pas sur Firefox ni Chrome par exemple.
Mon souhait d'affichage pour tous les navigateurs confondus : imaginer un A4 avec 4 images au format ping transparent compressées pour le web aux 4 coins de cette feuille, avec du contenu qui défile au milieu tout en maintenant afficher à l'écran de l'utilisateur les 4 images. Sur les produits apple ça fonctionne parfaitement mais pas pour le reste.
Je cherche certainement mal la bonne information mais j'imagine qu'il existe une solution de compatibilité de langage entre les différents navigateurs.
J'espère ne vous avoir pas perdu dans mes explications.
Alors j'ai finalement réussi à trouver la cause de tous mes tracas en ajoutant des modifications à mon code à coup de "-webkit" et tout est rentré dans l'ordre. Un grand merci pour votre aide.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]