Nous allons travailler un peu différemment que dans le tutoriel n°5. Les caractéristiques de mise en page se trouvent répétées dans les 7 parties (7 DIVs) de notre centre de page. Essentiellement, nous aurons deux types de mise en page : les 3 premières bandes (dernier article publié, dernière brève publiée, dernier article modifié) et les 4 blocs de listes (les derniers articles publiés, les derniers articles modifiés, les derniers posts du forum phpBB, les derniers articles syndiqués des sites référencés).

Une touche graphique

Nous avons décidé d’agrémenter notre corps de page de gros icônes. Le projet Tango présente l’avantage de proposer leurs icônes dans un format vectoriel. Un simple export en format Bitmap de 100pixels de large convient tout à fait à ce que nous souhaitons faire.

Les logos communs

Parmi les 5 icônes choisis, certains vont de retrouver à plusieurs endroits similaires :

	dernier article publié	liste des derniers articles publiés
	dernier article modifié	liste des derniers articles modifiés
	dernière brève
	les derniers posts du forum phpBB
	les derniers articles syndiqués

/* ****************************** */
/*                                */
/* Les listes de la page sommaire */
/*                                */
/* ****************************** */

/* les logos */
div#dernier_article, div#liste_derniers_articles, div#derniere_breve, div#liste_forum, div#derniere_modif, div#liste_dernieres_modifs, div#liste_sur_web {
background-repeat: no-repeat;
}

div#dernier_article, div#derniere_modif, div#derniere_breve {
	background-position: 0 0.3em ;
}

div#liste_derniers_articles, div#liste_forum, div#liste_dernieres_modifs, div#liste_sur_web {
	background-position: right 0.3em ;
}


div#dernier_article, div#liste_derniers_articles {
background-image: url(../images/article.png);
}

div#derniere_breve {
background-image: url(../images/breve.png);
}

div#liste_forum {
background-image: url(../images/forum.png);
}

div#derniere_modif, div#liste_dernieres_modifs {
background-image: url(../images/miseajour.png);
}

div#liste_sur_web {
background-image: url(../images/web.png);
}

Les 3 premières bandes d’accroche

Voici tout simplement le code CSS des 3 premières bandes d’accroche :

/* dernier article */
div#dernier_article {
	text-align: center;
	padding: 0.77em 0.77em 0.77em 0.77em;
	min-height:105px;
	height:auto !important;
	height:105px;

}

div#dernier_article a {
	font: small-caps bolder 2.5em sans-serif;
	text-decoration: none;
}

div#dernier_article a:hover {
	}	

div#dernier_article div.texte {
	font-family: cursive;
	font-style:italic;
}

/* derniere modif */

div#derniere_modif {
	text-align: center;
	padding: 0.77em 0.77em 0.77em 0.77em;
	min-height:102px;
	height:auto !important;
	height:102px;

}

div#derniere_modif a {
	font: small-caps bolder 2.5em sans-serif;
	text-decoration: none;
}

div#derniere_modif a:hover {
	}	

div#derniere_modif div.texte {
	font-family: cursive;
	font-style:italic;
}

/* derniere breve */


div#derniere_breve {
	padding: 0.77em 0.77em 0.77em 0.77em;	
	text-align: center;
	min-height:80px;
	height:auto !important;
	height:80px;

}

div#derniere_breve a {
	font: small-caps bolder 2.5em sans-serif;
	text-decoration: none;
}

div#derniere_breve a:hover {
}	

(Note : une petite modification de l’affichage a été faite pour la dernière brève publiée, cette modification a été portée au fichier /squelettes/sommaire.html)

Les 4 blocs de listes

Tout d’abord un travail sur les dates pour les faire apparaître dans une image. L’image n’est autre que l’icône de la dernière brève à laquelle nous avons retiré la date du "31" qui était inscrite et nous l’avons légèrement réduite. Toutes ces manipulations sur l’image ont été faites avec le logiciel The Gimp.

/* Dates des 4 encarts */

dl.date_list {
	clear:both;
	display:block;
}

dl.date_list dt {
	clear:both;
	padding-top:7px;
	line-height:13px;
	float:left;
	text-align:center;
	height:60px;
	width:60px;
	background:url(../images/blocnotes.png) no-repeat;
	font-weight:bold;
	font-size:10px;
}

dl.date_list dt small {
	display:block;
	font-weight:bold;
	font-size:13px;
}

dl.date_list dd {
	padding-left:5px;
	padding-top:8px;
	padding-bottom:2px ;
	min-height:60px;
	height:auto !important;
	height:60px;
	position:relative;
}

Enfin, le style d’affichage des 4 encarts sera identique pour chacun d’entre eux :

/* Les 4 encarts de la page sommaire */

div#liste_derniers_articles, div#liste_forum, div#liste_dernieres_modifs, div#liste_sur_web  {
	padding: 0.65em 0.65em 0.65em 0.65em; 
}

div#liste_derniers_articles h2, div#liste_forum h2, div#liste_dernieres_modifs h2, div#liste_sur_web h2 {
	font-family: sans-serif;
	text-align: center;
	font-size: 1.6em;
	padding-bottom: 1.5em;
}

div#liste_derniers_articles a, div#liste_forum a, div#liste_dernieres_modifs a, div#liste_sur_web a {
	text-decoration: none;
	font-size: 1.4em;
}

div#liste_derniers_articles a:hover, div#liste_forum a:hover, div#liste_dernieres_modifs a:hover, div#liste_sur_web a:hover {
}

La mise en couleurs du site

La dernière couche de peinture fera l’objet du prochain tutoriel...