Vidéo: Centrer du contenu grâce aux FLEXBOX en CSS 2024
Dreamweaver vous permet de centrer votre mise en page en utilisant les marges CSS. De nombreuses conceptions de pages Web sont centrées sur la page, de sorte qu'elles semblent flotter entre les côtés de la fenêtre du navigateur, quelle que soit la largeur ou la largeur de la fenêtre. Cela contribue à créer l'illusion que le design remplit la page, même si la fenêtre du navigateur est beaucoup plus large que la conception de la page.
La plupart des conceptions de page Web créées avec CSS réalisent cet effet en créant une balise qui entoure tout le contenu de la page, puis en appliquant un style à cette balise qui inclut une règle de style qui centre cette balise. Comme vous le constaterez dans les instructions étape par étape suivantes, la création d'un style pour centrer un tag n'est pas aussi évidente que vous pouvez l'imaginer, mais est facile à mettre en œuvre.
La pratique courante consiste à utiliser un style ID pour l'étiquette qui centre votre conception, et pour l'appeler #wrapper ou #container.
Si votre page n'est pas déjà configurée avec un tag autour de tout votre contenu, voici un conseil pour en ajouter un. Commencez par cliquer et faire glisser pour sélectionner tout le texte, les images et tout autre contenu sur la page. Choisissez ensuite Insérer → Objets de mise en page → Balise de division. Dans la boîte de dialogue Insérer une balise div, assurez-vous que l'option Wrap around Selection est sélectionnée dans la liste déroulante Insert.
Laissez le reste des champs vides et cliquez sur OK pour ajouter un tag autour de tout le contenu de votre page, et vous êtes prêt pour les étapes suivantes.
Pour centrer une conception de page entière, assurez-vous qu'une étiquette entoure tout le contenu de la page et procédez comme suit:
-
Cliquez sur le signe plus dans le panneau Sélecteurs CSS Designer.
Selon le contenu de la page, un nouveau nom de style ou un champ vide dans lequel vous pouvez entrer un nom de style est ajouté au panneau Sélecteurs.
-
Double-cliquez pour sélectionner le nom que Dreamweaver a ajouté au panneau et remplacez-le par le nom que vous souhaitez pour votre nouveau style, ou cliquez pour sélectionner le champ vide et entrez un nom.
Si aucun nom n'est ajouté, entrez le nom que vous désirez dans le champ vide. Vous pouvez nommer le style comme vous le souhaitez, mais assurez-vous d'entrer une période avant le nom si vous créez un style de classe ou un signe # pour un style d'ID.
-
Dans le panneau Propriétés, spécifiez la largeur, les marges et tous les autres paramètres de mise en forme que vous souhaitez définir.
La largeur de l'étiquette du conteneur est définie sur 980 pixels. Voici l'astuce pour centrer une balise comme ceci: Réglez les marges gauche et droite sur Auto. De cette façon, un navigateur ajoute automatiquement une quantité égale d'espace de marge de chaque côté de la balise, en la centrant effectivement sur la page.
-
Sélectionnez l'ID qui entoure tout le contenu de la page.
Pour vous assurer que vous avez sélectionné la bonne balise, cliquez pour placer votre curseur n'importe où dans la partie principale de la page, puis cliquez sur la balise listée la plus à gauche dans le sélecteur de balise rapide au bas de l'espace de travail.
-
Une fois la balise sélectionnée, sélectionnez le nom du style que vous avez créé dans la liste déroulante ID de l'inspecteur des propriétés.
Les règles de style que vous avez définies lors de la création du style sont automatiquement appliquées à la balise. Dans cet exemple, le résultat est que la taille de l'étiquette est modifiée à 980 pixels de large et que l'étiquette et tout son contenu sont centrés sur la page.
Toutes les fonctionnalités ne fonctionnent pas lorsque Dreamweaver est défini sur Affichage en direct. Bien que l'affichage en direct soit un excellent moyen de prévisualiser l'aspect de vos conceptions de page dans la plupart des navigateurs Web modernes, l'utilisation de la fonctionnalité Affichage en direct rend de nombreux outils d'édition de Dreamweaver inutilisables. Si, par exemple, l'inspecteur des propriétés apparaît grisé lorsque vous souhaitez l'utiliser, assurez-vous que le bouton En direct est désélectionné.
