Essayez ces tutoriels avec Dreamweaver
Créez des pages web modernes en responsive design.
Centrage d’un site web
Apprenez à centrer un site web au moyen des langages HTML et CSS.
Ce qu'il vous faut
Télécharger des fichiers exemples
ZIP, 3,4 Mo
Reportez-vous aux tutoriels Manipulation de mises en page HTML et Mise en page web avec CSS pour de plus amples informations sur une mise en page web en HTML et CSS.
Lorsque vous créez une page web, son contenu se positionne à gauche par défaut. Or, une présentation centrée, bien souvent plus esthétique, attirera davantage l’attention. Il importe donc de structurer correctement la page en HTML, puis de lui appliquer des feuilles de style CSS pour la centrer dans le navigateur.
Avant de commencer
Téléchargez et enregistrez les fichiers du projet. Ouvrez center-website.html dans Dreamweaver et affichez le code source en mode Fractionner.
Insérez des balises
entre deux balises de manière à délimiter leur contenu. La balise
« englobant » la totalité du contenu, attribuez à la balise
un id « wrapper ». N’oubliez pas la balise
de fin !L’insertion de balises
de part et d’autre du contenu sur une page facilite l’application de feuilles de style CSS régissant intégralement cette partie. Ici, nous allons utiliser du code CSS pour centrer la totalité du contenu.
HTML
(contenu)
Ouvrez style.css et localisez la section /* Start Here */.
Choisissez Affichage et désélectionnez Fractionner verticalement. Vous superposez ainsi l’affichage du code et l’affichage en direct, ce qui permet de contrôler plus facilement le centrage du contenu.
Ajoutez une propriété margin: au sélecteur #wrapper correspondant à l’id de la balise
en HTML.
La propriété margin accepte 4 valeurs pour top, right, bottom, left respectivement. La feuille de style CSS complète serait margin:0 auto 0 auto; mais étant donné que les valeurs top et bottom sont égales et que les valeurs left et right le sont aussi, vous pouvez tout simplement écrire :
margin: 0 auto;
Les valeurs supérieures et inférieures sont égales à 0 puisqu’on ne laisse d’espace ni en haut, ni en bas. Les marges gauche et droite sont réglées sur auto, de manière à répartir équitablement l’espace entre les deux. Votre mise en page est ainsi centrée !
CSS
#wrapper {
...
margin: 0 auto;
}
Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez visualiser le résultat.
Vous devrez enregistrer vos fichiers pour voir les modifications.
