Gestion de l'ajout facultatif d'un menu dans la page

TACHES

@@ -3,8 +3,6 @@
 
 - trouver une syntaxe pour les fichiers de catégories contenant des éléments
 Par exemple : ### Ma super catégorie ###
-- permettre l'ajout facultatif d'un menu
-  - gérer le fait que le css change si on a un menu ou pas (Cf. dossier exemple avec le(s) fichier(s) patch)
 - rendre la page valide XHTML Strict via validator.w3.org
 - permettre l'ajout de plusieurs CSS dans HEAD
 - permettre l'ajout d'un texte d'introduction au début de la page
@@ -44,3 +42,6 @@ FAITES :
 - ajouter une licence/copyright
 - faire une page d'exemple avec un menu et une feuille de style en noir et blanc
 - faire une page d'exemple sans menu et avec une feuille de style en noir et blanc
+- permettre l'ajout facultatif d'un menu
+  - gérer le fait que le css change si on a un menu ou pas (Cf. dossier exemple avec le(s) fichier(s) patch)
+

makefile

@@ -12,11 +12,13 @@
 ## obligatoires
 DESTINATION = porteail
 INDEX = $(DESTINATION)/index.html
-CSS_DEFAUT = defaut.css
+CSS_DEFAUT = bicolore_sans_menu.css
+CSS_PATCH_AJOUT_MENU = bicolore_ajout_menu.patch
+CSS_NOM = defaut.css
 TITRE = Titre par défaut
 ACCUEIL = Accueil - $(TITRE)
 ## facultatives
-MENU = menu.html
+#MENU = menu.html
 
 # création de tous les fichiers
 all: test index
@@ -32,6 +34,7 @@ test:
 	@test -d style || mkdir style
 	@test -f style/$(CSS_DEFAUT) || exit
 	$(if $(MENU), @test -f $(MENU) || exit, @echo -e "Pas de menu")
+	$(if $(MENU), @test -f style/$(CSS_DEFAUT) || exit)
 	@test -d $(DESTINATION) || mkdir $(DESTINATION)
 	@test -d $(DESTINATION)/image || mkdir $(DESTINATION)/image
 	@echo -e "\t…terminé."
@@ -44,8 +47,9 @@ index:
 	@echo -e "Modification du contenu…"
 	@sed -i "s/TITRE_PORTEAIL/$(TITRE)/g" $(INDEX)
 	@sed -i "s/ACCUEIL_PORTEAIL/$(ACCUEIL)/g" $(INDEX)
-	@cp style/$(CSS_DEFAUT) $(DESTINATION)
-	@sed -i "s#CSS_DEFAUT#./$(CSS_DEFAUT)#g" $(INDEX)
+	@cp style/$(CSS_DEFAUT) $(DESTINATION)/$(CSS_NOM)
+	$(if $(MENU), @patch -u -p0 $(DESTINATION)/$(CSS_NOM) style/$(CSS_PATCH_AJOUT_MENU))
+	@sed -i "s#CSS_DEFAUT#./$(CSS_NOM)#g" $(INDEX)
 	@echo -e "\t…terminée."
 
 # nettoyage des fichiers générés

style/bicolore_ajout_menu.patch

@@ -0,0 +1,25 @@
+--- bicolore_sans_menu.css	2011-02-26 14:56:15.000000000 +0100
++++ bicolore_avec_menu.css	2011-02-26 15:03:12.000000000 +0100
+@@ -47,11 +47,12 @@
+ 
+ div#chapeau {
+ position: relative;
+-margin: 0 auto;
++margin: 0;
+ padding: 0;
+ height: 50px;
+ width: 78%;
+ top: 0;
++left: 1%;
+ background-color: #000000;
+ color: #ffffff;
+ text-align: center;
+@@ -70,7 +71,7 @@
+ 
+ div#corps {
+ position: relative;
+-width: 98%;
++width: 78%;
+ left: 2%;
+ }
+ 

style/bicolore_sans_menu.css

@@ -1,10 +1,10 @@
-body {
+html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
-background-color: #e9ecf4;
-color: #223355;
+background-color: #ffffff;
+color: #000000;
 }
 
 a:link {
@@ -29,7 +29,7 @@ h2 {
 width: 80%;
 padding-left: 2%;
 margin-left: 1%;
-color: #555577;
+color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 10px;
@@ -39,32 +39,39 @@ h3 {
 width: 80%;
 padding-left: 3%;
 margin-left: 1%;
-color: #555577;
+color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 12px;
 }
 
 div#chapeau {
-position: absolute;
-height: 10%;
+position: relative;
+margin: 0 auto;
+padding: 0;
+height: 50px;
 width: 78%;
 top: 0;
-left: 1%;
-background-color: #223355;
-color: white;
+background-color: #000000;
+color: #ffffff;
 text-align: center;
+font-size: 120%;
+line-height: 15%;
 -moz-border-radius-bottomright: 25px;
 -moz-border-radius-bottomleft: 25px;
 }
 
+div#chapeau h1 {
+margin: 0;
+padding: 0;
+height: 50px;
+line-height: 50px;
+}
+
 div#corps {
-position: absolute;
-width: 78%;
-height: 86%;
+position: relative;
+width: 98%;
 left: 2%;
-top: 13%;
-overflow: auto;
 }
 
 div#corps div.ensemble_element {
@@ -74,13 +81,16 @@ min-height: 10em;
 div#corps div.element {
 height: 9em;
 width: 19ex;
-margin-right: 5px;
-margin-bottom: 5px;
+margin: 0 5px 10px 5px;
 float: left;
+border: thin solid #000000;
+-moz-border-radius: 15px;
+-moz-box-shadow: 1px 1px 8px #000000;
+overflow: hidden;
 }
 
 div#corps div.element:hover {
-background-color: #223355;
+background-color: #000000;
 color: #ffffff;
 }
 
@@ -106,15 +116,15 @@ div#corps div.espace {
 
 div#cartable {
 position: absolute;
-height: 88%;
+height: auto;
 width: 20%;
-top: 10%;
+top: 90px;
 right: 0;
-background-color: #223355;
-color: white;
+background-color: #000000;
+color: #ffffff;
 -moz-border-radius-topleft: 25px;
 -moz-border-radius-bottomleft: 25px;
-overflow: auto;
+overflow: hidden;
 }
 
 div#cartable h3 {
@@ -139,7 +149,18 @@ background-color: #aaaabb;
 color: #223355;
 }
 
-div#souliers {
-
+div#soulier {
+position: relative;
+top: 5px;
+right: 5px;
+height: 20px;
+width: 98%;
+color: #000000;
 }
 
+div#soulier p {
+margin: 0;
+padding: 0;
+font-size: 10px;
+text-align: center;
+}