Adapter automatiquement à la résolution d'écran

K

kezou8

WRInaute discret
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 !
 
K

kezou8

WRInaute discret
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... :?
 
G

gordan66

Nouveau WRInaute
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.
 
G

gordan66

Nouveau WRInaute
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).
 
G

gordan66

Nouveau WRInaute
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

zeb

WRInaute accro
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.
 
G

gordan66

Nouveau WRInaute
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
 
zeb

zeb

WRInaute accro
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)
Cliquez pour agrandir...
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.
 
G

gordan66

Nouveau WRInaute
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.
 
G

gordan66

Nouveau WRInaute
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.
 
G

gordan66

Nouveau WRInaute
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 ?
 
G

gordan66

Nouveau WRInaute
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

zeb

WRInaute accro
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 ?
Cliquez pour agrandir...
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;
Cliquez pour agrandir...
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.
Cliquez pour agrandir...
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é.
 
zeb

zeb

WRInaute accro
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

zeb

WRInaute accro
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).
 
G

gordan66

Nouveau WRInaute
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.
 
D

Dragarta

Nouveau WRInaute
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.
 
Vous devez vous connecter ou vous inscrire pour répondre ici.

Discussions similaires

rédac cabanes
Adapter les noms des catégories dans WP.
Réponses
7
Affichages
1K
rédac cabanes
rédac cabanes
T
adapter site web créer avec webacapella sur différent support
Réponses
1
Affichages
2K
Madrileño
Madrileño
S
Adapter le footer en responsive design
Réponses
9
Affichages
5K
seseba
S
P
Internet mobile : adapter son site ou pas ?
Réponses
9
Affichages
2K
JanoLapin
J
M
Annuaire Arfooo : adapter un template Wordpress
Réponses
17
Affichages
7K
Sicilien94
S
OTP
Adapter phpBB3 à ma charte graphique
Réponses
38
Affichages
3K
YoyoS
Y
J
Adapter mon site à l'iphone
Réponses
6
Affichages
7K
bproductiv
B
P
script php pour repérer les robots google et adapter ma page
Réponses
8
Affichages
2K
bertimus
B
S
Adapter un site suivant la résolution de l'écran en CSS
Réponses
16
Affichages
31K
Nandy89
N
sunnmagic
Expression régulière pour adapter une balise URL
Réponses
7
Affichages
4K
Borower
B
S
Annuaire, comment adapter pour google ?
Réponses
15
Affichages
4K
Longuard
L
A
Adapter une page pour google.com ou google.fr ?
Réponses
7
Affichages
4K
EricD
E
B
  • Fermé
détection robot : voici un TB script à adapter
Réponses
2
Affichages
4K
Mirgolth
M
O
Comment réserver automatiquement un NDD ?
Réponses
0
Affichages
541
Olaf83
O
E
page qui se recharge automatiquement
Réponses
3
Affichages
4K
elji
E
P
Poster automatiquement sur Groupe Facebook
Réponses
6
Affichages
3K
Pm76
P
OTP
Obtenir un screenshot d'une page automatiquement
Réponses
8
Affichages
3K
spout
spout
manoa.ratefiarison
Réécrire des articles automatiquement
Réponses
11
Affichages
4K
Koxin-L.fr
Koxin-L.fr
FortTrafic
Google indexe les fichiers PDF qui sont automatiquement sauvegardes?
Réponses
9
Affichages
2K
FortTrafic
FortTrafic
C
Comment alimenter automatiquement les produits de son site prestashop à partir d'autres si
Réponses
9
Affichages
2K
CVFlashJob
C
Haut