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 !
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 841
    J'aime reçus:
    249
  3. StefouFR
    StefouFR Guest
  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... :?
     
  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... :(
     
  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.
     
  7. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
  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).
     
  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:
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    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.
     
  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
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    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.
     
  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.
     
  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.
     
  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 ?
     
  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...
     
  17. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    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é.
     
  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.
     
  19. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    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.
     
  20. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    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).
     
  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.
     
  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.
     
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
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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice