Application pratique
Reprenons le projet de site touristique franc-comtois.
Rappelons le code HTML :
<ul id="menu">
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique Comtois</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1><a href="photos.htm" title="photos de Franche Comté">Bienvenue en Franche Comté</a></h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<a href="photos.htm" title="lien vers photos de Franche Comté"><img src="francheComte.jpg"></a>
<h2>Un patrimoine naturel</h2>
<p>[Paragraphe associé à cet autre sous-titre de niveau 2.]</p>
<p id="pied">Pied de page et <a href="#">Mentions légales</a></p>
Cette page serait bien plus agréable si elle était centrée horizontalement.
Comment procéder ?
Exercice n°7 :
Centrer un document
Pour centrer un document composé de plusieurs éléments (titres, menus, etc.) il faut regrouper ces derniers dans un conteneur <div> global de largeur fixée à 750 pixels dans le cas présent). Il suffit de centrer ce dernier.
On obtient le code HTML suivant :
<body>
<div id="conteneur">
<ul id="menu">
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique de la Franche Comté</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1 id="motif"><a href="photos.htm" title="photos de Franche Comté">Bienvenue en Franche Comté</a></h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<a href="photos.htm" title="lien vers photos de Franche Comté"><img src="francheComte.jpg" alt=""/></a>
<h2>Un patrimoine naturel</h2>
<p>[Paragraphe associé à cet autre sous-titre de niveau 2.]</p>
<p id="pied">Pied de page et <a href="#">Mentions légales</a></p>
</div>
</body>
auquel on associera le style CSS suivant :
#conteneur
{
position:relative;
width: 750px;
margin : 0 auto ;
background-color :
#ccccff;
}
Pour info :
voici l'exemple des règles CSS générant l'effet de la lettrine à observer sur le résultat.
Elles s'applique sur le sélecteur <h2> et le « pseudo-élément : first-letter :
h2:first-letter {
font-weight:bold;
font-size: 2em;
color: #005FA9;
float:left;
}
Ouvrages de références
- « More on CSS » par Eric Meyer
(© CampusPress), 2005.
- « CSS 2 Pratique du design web » par Raphaël Goetter
(© Eyrolles), 2009.
Haut de page
Access®, Excel®, Powerpoint®, Word® & Windows®
sont des produits et marques déposés
propriété de
Microsoft, Inc.
Photoshop® &
Dreamweaver
® sont des produits et marques déposés propriété de
Adobe System. |
