1 -Comment adapter une page Web à tous les types
d'écran ?
2 -Centrer le contenu de la page
3 -Étirer la page selon taille de l'écran
1 - Comment adapter une page Web à tous les types d'écran ?
J’ai
préparé un nouveau site qui fonctionne très bien sur un écran
d’ordinateur. Mais, il est difficile à utiliser sur un portable (texte
trop petit, barres de défilement horizontales…) Que puis-je faire ?
Sur un mobile, les
pages sont souvent plus aérées, plus sobres, de façon à s’adapter à la
taille de l’écran et à la navigation tactile. Autrefois, on suggérait
d’avoir deux sites différents, un pour les grands écrans, un autre pour
les petits. Heureusement, ce n’est plus le cas.
La
technique du « responsive design » ou « site Web adaptatif » permet
d’ajuster automatiquement l’apparence du site selon la largeur de
l’écran du visiteur (téléphone, tablette ou grand écran). Cette
technique utilise simplement les feuilles de styles pour modifier la
position et la taille de certains éléments selon la largeur de l’écran.
Vous trouverez ici un excellent tutoriel :
https://www.w3schools.com/html/html_responsive.asp
2 - Centrer le contenu de la page
Je n'arrive pas à centrer
mes page correctement. L'affichage est très différent d'un ordinateur à
l'autre. Parfois ma page semble alignée tout à gauche. Comment faire pour
qu'elle reste centrée dans toutes les résolution d'écran?
Le
principe pour centrer tout le contenu de la page avec des styles est celui-ci:
1. le contenu dans la balise body est aligné au centre;
2. à l'intérieur de la balise <body>, utiliser une balise <div> principale
ayant une largeur déterminée et un alignement à gauche (dans l'exemple plus
bas, celle-ci est appelée #container);
3. les marges à gauche et à droite de la division principale sont "auto";
4. une largeur est fixée pour la division principale.
Voici un exemple de styles donnant ce résultat:
body {
text-align: center;
}
#container {
text-align: left;
margin-right: auto;
margin-left: auto;
width: 900px;
}
Dans Expression Web et SharePoint Designer, ces pages peuvent être créés
facilement avec le menu Fichier, Nouveau, Page, Dispositions CSS.
Au besoin, les styles sont ensuite modifiés à partir du volet Gérer
les styles:
cliquer avec le bouton droit sur le nom du style #container, choisir Modifier le style,
sélectionner Encadré, décocher l'option Margin tous identiques, puis choisir
margin right auto, margin left auto.
Le résultat peut être vérifié dans un navigateur en réduisant puis en augmentant
la taille de la fenêtre.
Ici, vous trouverez des infos pour des pages s'adaptant à différentes résolutions:
https://www.alsacreations.com/tuto/lire/547-Faire-un-site-pour-toutes-les-resolutions.html
Et d'autres liens utiles dans la rubrique
Couches #5.
3 - Étirer la page selon taille de l'écran
Pour mon site, l'idéal
serait de pouvoir afficher les pages proportionnellement à la taille de
l'écran sur lequel elles s'affichent. Avez-vous une idée du code à utiliser
pour réaliser une telle prouesse?
Pour
avoir une taille qui s'ajuste à tous les écrans, il suffit de fixer à 100%
la largeur de la balise <div> principale, celle qui englobe les autres (dans
les modèles fournis par Expression Web, il s'agit souvent de la balise #container):
#container {
width: 100%;
}
Si vous préférez figer la largeur de la page, il faudra lui donner une taille
fixe. Le contenu sera alors affiché à gauche, sans dépasser la largeur fixée.
Et pour choisir de le centrer pour les visiteurs ayant un écran plus large,
voir la question précédente.