Rechercher
recherche interne en savoir plus!
Les 6 dernières pages de Cours et Dossiers ajoutées
- (17/05/2009) - Utilitaires - Testeur de REGEX
- (08/11/2008) - Trucs et Astuces - Insérer un copyright sur une image avec la librairie GD
- (01/11/2008) - Trucs et Astuces - Créer des titres en image PHP avec la librairie GD
- (05/10/2008) - PHP - La Librairie GD (Redimensionnement d'une image)
- (04/10/2008) - PHP - La Librairie GD (Ouverture et dimensions d'une image)
- (28/09/2008) - PHP - La Librairie GD (Les textes et polices)
Informations Générales
Chargement en cours...
Nombre de Visites 
[ 1 036 256 ]Votre IP
[ 38.107.191.117 ] 
Vous êtes ici :
Imprimer le document
Informations Générales [425] Posts sur le forum [453] Membres inscritsIl y a en ligne :  0 Membre 3 Invités Membre en ligne:Aucun Partenariat
 Publicité Nos Partenaires
|
 |
 Réalisation du site en XHTML avec CSS (partie 2)Etape 2 - Les CouleursNous allons mettre un peu de couleur à ce site, qui pour le moment est un peu fade.
Nous les insérons dans notre fichier "style.css":
html, body {margin: 0;padding: 0;}
#container {position: relative;width: 600px;margin: 4px auto;}
#header {position: relative;height: 90px;{noir}background-color: #0068B4;{/noir}}
#menu {float: left;width: 120px;height: 350px;{noir}background-color: #88C065;{/noir}}
#page {float: right;width: 480px;height: 310px;{noir}background-color: #AFD394;{/noir}}
#footer {float: right;width: 480px;height: 40px;{noir}background-color: #CDBCA3;{/noir}}
Cliquez ici pour Voir l'aperçu Etape 3 - Les TextesAprès avoir créé les zones et les avoir remplies par nos couleurs, nous allons mettre en forme nos textes. Nos polices que nous allons employer, sont:
Ouvrez le fichier "style.css" et tapez ceci:
html, body {{noir}font: 12px Arial;{/noir}margin: 0;padding: 0;}
#container {position: relative;width: 600px;margin: 4px auto;}
#header {position: relative;height: 90px;background-color: #0068B4;}
#menu {float: left;width: 120px;height: 350px;background-color: #88C065;}
#page {float: right;width: 480px;height: 310px;background-color: #AFD394;}
#footer {float: right;width: 480px;height: 40px;background-color: #CDBCA3;}
{noir}.style {margin: 4px;}
.titre {position: absolute;top: 30px;left: 20px;font-size: 24px;color: #FFFFFF;}
.nav {font-size: 13px;}{/noir}
Ouvrez le fichier "index.html" et tapez ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mon premier site en XHTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
{noir}<div class="style">
<span class="titre">Mon premier site en XHTML avec CSS</span>
</div>{/noir}
</div>
<div id="menu">
{noir}<div class="style">
<span class="menu"><strong>MENU :</strong></span>
<ul class="nav">
<li> Rubrique 1</li>
<li> Rubrique 2</li>
<li> Rubrique 3</li>
<li> Rubrique 4</li>
</ul>
</div>{/noir}
</div>
<div id="page">
{noir}<div class="style">
<p>Contenu de site web</p>
</div>{/noir}
</div>
<div id="footer">
{noir}<div class="style">
<span>2005 Copyright by Moi</span>
</div>{/noir}
</div>
</div>
</body>
</html>
Cliquez ici pour Voir l'aperçu Passons à l'étape suivante Suite du Cours [0] commentaire - Voir/Editer |
|
Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
