resolution ecran

obtenir ces boutons

Adapter le blog à la résolution de l'écran

Adapter l'arrière-plan à la résolution de l'écran

Il faut que le blog s'adapte à toutes les résolutions d'affichage utilisées par les visiteurs.

Ce n'est souvent pas le cas :
- des blogs sont trop larges et une partie des visiteurs ne peut pas voir la partie droite du blog ;
- d'autres blogs restent sur le côté gauche de l'écran quand on augmente la résolution.


* * * * *
Si un blog est trop large, les visiteurs qui ont une résolution d'écran peu élevée ne peuvent pas voir la partie droite du blog.

La résolution la plus fréquente est actuellement de 1024 x 768 pixels. Il faut donc que le blog occupe tout l'écran avec cette résolution mais pas plus, quitte à s'élargir quand la résolution augmente : voir le point suivant.

La résolution se règle, par exemple sur windows, en cliquant sur :

Démarrer - Paramètres - Panneau de configuration - Affichage - Paramètres.

* * * * *
Le blog doit s'adapter AUTOMATIQUEMENT à toutes les résolution utilisées par les visiteurs.

Il y a deux méthodes pour y arriver.

Première méthode : ne pas changer les dimensions fixes des colonnes (par exemple en pixels : "width:600px;") mais ajouter à gauche et à droite un espace identique, par ce code :

/* Wrapper */

#outer-wrapper {
margin: 0 auto;
...
}


Ce site utilise cette technique.

* * * * *
Deuxième méthode (conseillée) : remplacer les largeurs d'éléments fixes par des largeurs en pourcentage de l'écran (par exemple "width:60%;").

Exemple à 2 colonnes correct :

#outer-wrapper {
margin: 0 auto;
width: 100%;
...
}
#main {
width: 65%;
...
}
#sidebar {
width: 28%;
...
}


TOUTES les instructions qui déterminent une LARGEUR (width, min-width, margin-left, margin-right, padding-left, padding-right) doivent être modifiées et ne contenir que des valeurs en %.

Exemple de template utilisant cette technique : cliquer ici .

* * * * *
Comme pour cette page, on peut aussi AJOUTER UN ARRIÈRE-PLAN QUI S'ADAPTE AUTOMATIQUEMENT A LA RÉSOLUTION DE L’ÉCRAN.

Pour obtenir ce résultat, consulter cette page.

11 commentaires:

Alcidejet a dit…

Bonsoir,

Sur mon blog, template simple, la 1ère solution ne fonctionne pas et je n'ai pas vu de /* Wrapper */ dans le code (je l'ai donc inséré mais rien n'y fait...)

Une idée svp ?

Meiser a dit…

Bonjour.

1) Ce n'est qu'un exemple. Les noms des "boîtes" dépendent des auteurs et sont arbitraires.

2) Ce qui compte c'est de repérer toutes les largeurs fixes (en général en px : pixels) et de mettre des pourcentages.

3) Pour ajouter une "boite extérieure", exemple :

[div id='content-wrapper-ext']
[div id='content-wrapper']
....
[/div]
[/div]

Remplacer [] par <>.


Alcidejet a dit…

C'est un peu compliqué, je manque de bases, mais j'essaye de prendre ne main ces détails.
J'ai trouvé cet extrait, est-ce suffisant à changer ou dois chercher ailleurs ? (là ça ne donne pas de résultat satisfaisant) or else what? :
[/b:skin]

[b:template-skin]
[b:variable default='960px' name='content.width' type='length' value='1030px'/]
[b:variable default='0' name='main.column.left.width' type='length'/]
[b:variable default='310px' name='main.column.right.width' type='length' value='320px'/]

Meiser a dit…

Il faut rechercher (ctrl+F) les autres width, margin-left, margin-right, padding-left, padding-right s'il y en a dans ce template.

A tester de préférence dans un autre blog test. Quand cela fonctionne, copier-coller le template après avoir coché la case "Développer les modèles de gadgets".


Alcidejet a dit…

Ca ne fonctionne pas :'( tant pis...

Meiser a dit…

Vérifier qu'il n'y pas de "min-width" plus loin dans le code.

Sinon, utiliser un autre template comme par exemple :

http://exemple-de-template.blogspot.com/


Christian Leclercq a dit…

Bonjour a vous toutes et tous

Je ne comprends pas ou je dois mettre cette manipulation.
Je regarde dans le code HTML du blog et je ne trouve pas !
Puis-je savoir comment dois-je faire ?
Je suis sur blogger.
Je te remercie beaucoup.

Salutations.

Meiser a dit…

Bonjour.

La résolution se règle, par exemple sur windows, en cliquant sur :

Démarrer - Paramètres - Panneau de configuration - Affichage - Paramètres.


Thomas a dit…

Bonjour,

Je cherche à avoir des images sur les côtés du blog, de manière à avoir le corps sur fond neutre et mon image sur les bords.

Pour cela j'ai besoin d'une image de fond et des colonnes qui s'adaptent aux écrans (pour ne pas qu'ils se chevauchent selon les résolutions).
Je souhaite également que mon image de fond défile avec les messages.

Mon problème est que je ne trouve pas où entrer vos codes pour mettre les largeurs en pourcentages.

J'ai voulu utiliser votre template, mais celui-ci rend la personnalisation très fastidieuse (on ne pas utiliser l'outil blogger).

Bref, je suis perdu !!! HELP !! :)

moncefox ben a dit…

merci pour cette lecon mais ou je dois enrigistrer ce cede ; /* Wrapper */ #outer-wrapper { margin: 0 auto; ... } ????????????

Ley Mayza a dit…

Bonjour, j'ai un peu parcouru votre blog qui comporte pas mal de tutos pour Blogger. Je voulais vous faire savoir que pour des personnes en quête de réponse clair, votre blog explique très mal les choses à faire. Il faudrait que vous soyez plus clair dans vos explications et que vous ne fonctionnez pas qu'avec des exemples.
Bonne continuation.