Adapter automatiquement à la résolution d'écran

kezou8 · 8 Mars 2013

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 !

spout · 8 Mars 2013

Media queries / Responsive design:
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
http://twitter.github.com/bootstrap/scaffolding.html#responsive

StefouFR · 8 Mars 2013

Bonjour,

renseigne toi sur l'html5, responsive design et le css3.

Cherche quelques templates free css3 web responsive ça te donnera des idées en voyant le code source html et css.

http://www.gacikdesign.com/blog/25-free-responsive-html5-css3-web-templates/
http://html5templates.com/
http://freehtml5templates.com/

kezou8 · 8 Mars 2013

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... :?

kezou8 · 8 Mars 2013

Je précise que je travaille avec Web Acappella...

gordan66 · 4 Novembre 2014

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.

zeb · 4 Novembre 2014

http://www.w3schools.com/cssref/css3_pr_background-size.asp

gordan66 · 5 Novembre 2014

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).

gordan66 · 6 Novembre 2014

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:

zeb · 7 Novembre 2014

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.

gordan66 · 7 Novembre 2014

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.

zeb · 7 Novembre 2014

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;
}...

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

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.

gordan66 · 7 Novembre 2014

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.

gordan66 · 7 Novembre 2014

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.

gordan66 · 7 Novembre 2014

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 ?

gordan66 · 7 Novembre 2014

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...

zeb · 8 Novembre 2014

gordan66 a dit:
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 ?

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.

background-color:#eae8e0;

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.

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.

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é.

gordan66 · 8 Novembre 2014

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.

zeb · 8 Novembre 2014

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.

zeb · 8 Novembre 2014

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).

gordan66 · 8 Novembre 2014

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.

Dragarta · 26 Octobre 2015

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.