FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Largeur et taille d'écran

Sauter la navigation

 

 

 1 - Centrer le contenu de la page
 2 - Étirer la page selon taille de l'écran
 

  

1 - Centrer le contenu de la page

Question 1 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? 

Réponse 1 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:
http://www.alsacreations.com/tuto/lire/547-Faire-un-site-pour-toutes-les-resolutions.html 

Et d'autres liens utiles dans la rubrique Couches #5.

Retour au début

2 - Étirer la page selon taille de l'écran

Question 2 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?

Réponse 2 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.

Retour au début