|
Page 8 sur 10
Le fichier template_css.css
Pour le démarrage, créez le fichier template_css.css à l'aide de Notepad++, en insérant dedans le code suivant :
div {
padding:0;
margin:0;
}
#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}
Dans ce fichier, on a définit pour chaque bloc <div> via son identifiant «id», la largeur (width), la couleur d’arrière plan (background-color), et le positionnement dans le flux des blocs (float).
Par défaut un nouveau bloc <div> vient s'insérer en dessous du bloc précédent. En effet, pour un flux de blocs <div>1, <div>2 ... <div>n déclaré dans cet ordre dans votre fichier php, les <div> seront affichés, par défaut, l'un en dessous de l'autre: <div>1 situé au niveau le plus haut et <div>n au niveau le plus bas de la page. Pour modifier ce comportement, on utilise la proprièté de style css " float" qui spécifie de quel côté du conteneur, le bloc <div> doit s’aligner. "float:left" pour un alignement à gauche et "float: right" pour un alignement à droite. La proprièté "clear" permet d'annuler l'alignement de float.
Si vous n’êtes pas encore familiarisés avec toutes ces notions, reportez vous au tutoriel sur le langage css qui donne des conseils bien adaptés. Pour la proprièté float, consultez l'article sur le Positionnement css qui traite un cas pratique et fournit des informations plus détaillées qui vous seront d'une grande utilité.
Une fois que vous avez sauvegardé votre fichier template_css.css nouvellement créé, rafraichissez l’écran de votre navigateur pour votre site "http://localhost/MonSitePerso/". Le résultat affiché montre dès le départ l’apport du fichier css :
Pour centrer l’ensemble de vos blocs, ajouter un bloc conteneur. Le corps de votre fichier index.php devient (modifications en gras) :
<div id= "conteneur">
<div id="haut">CONTENU BANNER</div>
<div id="gauche">CONTENU GAUCHE</div>
<div id="centre">CONTENU PRINCIPAL</div>
<div id="droit">CONTENU DROIT</div>
<div id="bas">CONTENU PIED DE PAGE</div>
</div>
Rappelez vous bien que le corps est entre les balises <body> et </body>.
Modifier le fichier template (modifications en gras) :
div {
padding:0;
margin:0;
}
#conteneur {
width:800px;
margin: 0 auto;
}
#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}
La même fenêtre Notepad++ va vous servir pour l’édition des deux fichiers index.php et template_css.css; un onglet par fichier. Vous sauvegardez l’ensemble après modifications et rafraichissez la page sur votre navigateur pour voir le résultat : page bien centrée, cette fois ci.
En fait, "margin: 0 auto" définit les marges du bloc "conteneur" : une valeur nulle pour le haut et le bas et auto (une même valeur calculée automatiquement) pour la droite et la gauche. Ce qui permet de centrer l'ensemble dans la page.
Dans la suite, vous allez afficher du contenu fourni en standard avec l'installation de joomla.
|
