Adapter automatiquement à la résolution d'écran

Discussion dans 'Débuter en référencement' créé par kezou8, 8 Mars 2013.

  1. kezou8
    kezou8 WRInaute discret
    Inscrit:
    28 Janvier 2013
    Messages:
    78
    J'aime reçus:
    0
    Bonjour à tous,

    Une petite question bien naïve, existe-t-il un moyen pour que mon site internet s'adapte automatiquement à toutes les résolutions d'écrans. J'ai fouillé un peu partout sur le net mais le message le plus récent date d'il y a 3 ans, peut-être cela a-t-il évolué ?

    Je suis aussi preneur d'une technique (pas trop complexe) à rentrer sur mon site :)

    Merci d'avance !
     
    #1 kezou8, 8 Mars 2013
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    #2 spout, 8 Mars 2013
  3. StefouFR
    StefouFR Guest
    #3 StefouFR, 8 Mars 2013
  4. kezou8
    kezou8 WRInaute discret
    Inscrit:
    28 Janvier 2013
    Messages:
    78
    J'aime reçus:
    0
    Merci des conseils, j'ai essayé de les appliquer mais après un petit test à la FN*C sur le plus grand des iMac et bien mon site ne s'adapte pas du tout. J'ai du manquer quelque chose, mais quoi ?
    Comme je suis un débutant cela ne m'étonne pas trop d'avoir manqué une étape... :?
     
    #4 kezou8, 8 Mars 2013
  5. kezou8
    kezou8 WRInaute discret
    Inscrit:
    28 Janvier 2013
    Messages:
    78
    J'aime reçus:
    0
    Je précise que je travaille avec Web Acappella... :(
     
    #5 kezou8, 8 Mars 2013
  6. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Bonjour,

    Je rencontre la même difficulté que kezou8.

    J'ai réalisé mon site internet grâce à web acappella et j'ignore comment adapter l'image de fond à la résolution de divers écrans.

    Par exemple, sur mon PC, l'image prend la totalité de l'écran alors qu'au bureau, sur mon mac 27 pouces, l'image de fond est toute ridicule avec un énorme encadré blanc.

    Si kezou8 ou quelqu'un d'autre a la réponse, j'en serai infiniment reconnaissant.

    Merci par avance.
     
    #6 gordan66, 4 Novembre 2014
  7. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    #7 zeb, 4 Novembre 2014
  8. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Merci beaucoup Zeb pour ta réponse et ta rapidité.

    Je vais analyser ton lien en essayant de comprendre comment incorporer le scripte dans mon éditeur web acappella (je suis très très novice).
     
    #8 gordan66, 5 Novembre 2014
  9. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Rebonjour Zeb,

    Je suis désolé d'être aussi ignorant mais je ne sais où mettre le script sur web acapella.

    J'ai beau cherché depuis 2 jours, je suis incapable de comprendre comment placer ce code. :roll:
     
    #9 gordan66, 6 Novembre 2014
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    donne l'url de ton site qu'on regarde de quoi il en retourne. le bout de code donné est du CSS cela permet de modifier le style d'un élément, dans le cas présent ton image de background, mais cela peut se trouver a différent endroits bref faut voir.
     
    #10 zeb, 7 Novembre 2014
  11. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Merci Zeb pour ton implication afin de résoudre mon problème.

    Voici le lien vers mon site :

    http://www.koyavocat-perpignan.fr

    Lors de l'utilisation de web acappella, j'ai l'option suivante :

    Propriété de site web > Code html (le code ci-dessous sera placé dans la section HEAD de vos pages web)

    Je pense qu'il faut rentrer le script dans le cadre prévu.

    J'ai tenté une manipulation en entrant le code suivant dans cette case :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    background: url("avocat perpignan.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    }
    </style>

    Peut être le titre qui suit "url" n'est pas le bon ou ai-je manqué une étape ?

    L'objet de ma démarche est de créer un arrière plan intelligent capable de s'adapter sur la totalité de l'écran de chaque utilisateur sans se déformer un peu comme indiqué sur ce lien :

    http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

    Merci d'avance. :p
     
    #11 gordan66, 7 Novembre 2014
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    Bon déjà pas d'espace dans les noms de fichiers sinon c'est la mouise met un signe moins si tu veux vraiment séparer les mots dans un nom de fichier (pas d'accent non plus :wink: )

    il faut ceci sur tes pages, à la place de (je passe à la ligne pour plus de lisibilité) :
    <style type="text/css">
    body{
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    background-image:url('avocat_20perpignan.jpg');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-color:#eae8e0;
    } ...
    tu devrais avoir :

    <style type="text/css">
    body{
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    background-image:url('http://www.koyavocat-perpignan.fr/avocat_20perpignan.jpg');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: 100% 100%;
    background-color:#eae8e0;
    }...

    si tu ne peux pas éditer cette partie mais que, comme tu semble l'indiquer, tu peux ajouter une bloc a tes pages via ton admin tu ajoute juste ceci (la règle qu'il te manque) :
    Code:
    <style type="text/css">
body{background-size: 100% 100%;}
</style>
    Attention toutefois, il se peut que ton image soit déformée avec certains écrans, auquel cas il y a d'autre options mais on verra plus tard.
     
    #12 zeb, 7 Novembre 2014
  13. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Un grand merci Zeb pour ta réponse.

    Je ne suis pas chez moi, je tenterai l'expérience ce soir et je te tiendrai informé du résultat.

    Bonne journée.
     
    #13 gordan66, 7 Novembre 2014
  14. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    J'ai entré le code que tu m'as indiqué. Je constate une modification sur le fond d'écran mais effectivement il y'a des déformations selon les pages et les écrans (ipad, télphone, pc).

    Parfois la photo est étirée avec un décalage et des bords de couleurs.

    Sans vouloir abuser de ta gentille, Zeb, y'a-t-il un moyen d'approcher de la perfection ?

    Par avance merci.
     
    #14 gordan66, 7 Novembre 2014
  15. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    J'ignore également comment rectifier cette ligne :
    background-image:url('http://www.koyavocat-perpignan.fr/avocat_20perpignan.jpg');
    Est-ce que cela à une incidence sur les problèmes d'étirement ou de décalage que je rencontre ?
     
    #15 gordan66, 7 Novembre 2014
  16. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Finalement, j'ai réussi à éditer les codes comme tu me l'as suggéré.
    (j'ai utilisé fillezilla et j'ai édité les fichiers html de toutes les pages avec wordpad).
    Par contre, j'ai toujours en problème de décalage de l'image de fond lorsque l'écran se rétrécit avec apparition d'un fond blanc vers la droite.
    Je pense qu'on approche du but...
     
    #16 gordan66, 7 Novembre 2014
  17. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    Non cela n'a rien a voir avec la taille mais comme je n'ai pas parcouru tout ton site j'ai rectifié l'adresse en ajoutanty le domaine pour éviter que tu ai des soucis de CSS si tu ajoutais des dossier a tes urls. En l'état c'est une adresse absolue (avec le domaine) donc l'image est trouvable par ta page de partout sur le site, dans le cas que tu utilise on dit de cette adresse qu'elle est relative (relative a l'emplacement ou se trouve ta page), si la page est dans un dossier, elle ne trouverait plus l'image.

    ton fond blanc cassé il est là si tu peux modifier prend une couleur plus proche de la couleur de ta photo. Noir ça serait pas mal vue que l'image est sombre (ça trancherais moins que du blanc), ça se code #000000.

    A l'heure ou je visite ton site je ne vois pas le code car tu dois être en train de bidouiller le site, quoi qu'il en soit il faut t'attendre a ce que le navigateur prenne du temps pour effectuer le rendu du fond donc que tu ai des saccades lors d'un redimensionnement. La bonne nouvelle c'est que les internautes ne passent pas leur temps a redimensionner leur fenêtre, la mauvaise c'est que peut être il n'y a pas de solution faut de toute façon faire des calcul pour adapter l'affichage ce n'est pas instantané.
     
    #17 zeb, 8 Novembre 2014
  18. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Merci Zeb pour ta réponse.
    Effectivement, j'étais en train de faire des manipulations sur le site.
    J'ai remis le code dans l'état où tu me l'as proposé.
    L'effet est catastrophique sur ipad, je te laisse découvrir l'image :
    http://www.hostingpics.net/viewer.php?id=950403image964.jpg

    L'image est carrément coupée en deux.
     
    #18 gordan66, 8 Novembre 2014
  19. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    en analysant ta page avec l'outil de dev de firefox je vois apparaitre dans les règles calculées :
    Background-position: -186.5px 0px;
    c'est ça qui décale ton fond qui lui en revanche a la bonne taille mais se retrouve décalé a gauche.

    En revanche et le souci est là "Background-position" n'apparait nulle part dans la page, je cherche d'où ça peu venir.
     
    #19 zeb, 8 Novembre 2014
  20. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    J'arrive pas a voir d'où ça viens, ce que je pense c'est que le style de la balise <body> qui contiens ton background doit être modifié dynamiquement par un javascript quelconque ... Une solution peut être de déporter tous le code lié au fond de site sur la balise <html> (en dessous dans la hiérarchie).
     
    #20 zeb, 8 Novembre 2014
  21. gordan66
    gordan66 Nouveau WRInaute
    Inscrit:
    4 Novembre 2014
    Messages:
    10
    J'aime reçus:
    0
    Merci pour ton implication Zeb.

    je vais tenir compte de tes judicieux conseils afin de porter les rectifications nécessaires même si je dois t'avouer, je suis un véritable débutan dans la création de mon site.
     
    #21 gordan66, 8 Novembre 2014
  22. Dragarta
    Dragarta Nouveau WRInaute
    Inscrit:
    26 Octobre 2015
    Messages:
    1
    J'aime reçus:
    0
    Bonjour, je me permet de déterrer ce sujet, car j'ai un problème. J'utilise le code :

    <style type="text/css">
    body{
    background-image:url("http://zupimages.net/up/15/44/a7yi.jpg");
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: 100% 100%;
    background-color:#eae8e0;
    }

    dans WebAcappella et l'image de fond ne laisse pas apparaitre les différents éléments de ma page : texte, images...
    Avez-vous une solution ? merci d'avance.
     
    #22 Dragarta, 26 Octobre 2015
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - Adapter automatiquement résolution Forum Date
Adapter les noms des catégories dans WP. URL Rewriting et .htaccess 24 Février 2018
adapter site web créer avec webacapella sur différent support Développement d'un site Web ou d'une appli mobile 2 Mai 2017
Adapter le footer en responsive design Développement d'un site Web ou d'une appli mobile 7 Février 2015
Internet mobile : adapter son site ou pas ? Développement d'un site Web ou d'une appli mobile 5 Février 2013
Annuaire Arfooo : adapter un template Wordpress Annuaires et moteurs 11 Avril 2012
Adapter phpBB3 à ma charte graphique Développement d'un site Web ou d'une appli mobile 11 Février 2009
Adapter mon site à l'iphone Développement d'un site Web ou d'une appli mobile 5 Décembre 2008
script php pour repérer les robots google et adapter ma page Crawl et indexation Google, sitemaps 23 Mars 2007
Adapter un site suivant la résolution de l'écran en CSS Développement d'un site Web ou d'une appli mobile 2 Mai 2006
Expression régulière pour adapter une balise URL Développement d'un site Web ou d'une appli mobile 13 Novembre 2005
Annuaire, comment adapter pour google ? Problèmes de référencement spécifiques à vos sites 8 Janvier 2004
Adapter une page pour google.com ou google.fr ? Référencement international (langues, pays) 15 Novembre 2003
détection robot : voici un TB script à adapter Référencement Google 6 Octobre 2003
Comment réserver automatiquement un NDD ? Noms de domaine et référencement 17 Novembre 2021
page qui se recharge automatiquement Développement d'un site Web ou d'une appli mobile 13 Mars 2017
Poster automatiquement sur Groupe Facebook Facebook 27 Septembre 2016
Obtenir un screenshot d'une page automatiquement Développement d'un site Web ou d'une appli mobile 25 Février 2016
Réécrire des articles automatiquement Rédaction web et référencement 23 Février 2016
Google indexe les fichiers PDF qui sont automatiquement sauvegardes? Crawl et indexation Google, sitemaps 12 Janvier 2016
Comment alimenter automatiquement les produits de son site prestashop à partir d'autres si e-commerce 29 Janvier 2015