Labs - Structure partie Contenu Page catégorie du DizPerso
Dans cet article je prends pour exemple la page catégorie DizPerso Labs, comme elle évoluera, j'ai fait une capture au momentde la rédaction de ce Lab.
Comme dans toutes les pages du Diz Perso, la section principale est nommée "Contenu".
Elle comprend sur cette page :
- le titre h3
- le bloc article_catégorie
- le bloc article_liste_articles
- le formulaire de recherche
La structure HTML de la partie"Contenu" de la page exemple
Le titre, balise h3 qui est géré par la règle #contenu h3 de la feuille de style, base.css.
Le descriptif de la catégorie dans la DIV nommée id "article_categorie", lui sera géré par une nouvelle règle :
#article_categorie
{
background : #FFCC66;
width : 90%;
margin : 10px auto;
padding : 10px 20px;
color : #CC0000;
font-size : 12pt;
font-family : Comic sans MS;
position : relative;
}
La liste des articles de la catégorie, dans la DIV nommée #article_liste_articles,qui n'est pas une liste à puces mais une succession de paragraphes,chaque paragraphe contenant le lien donnant accès à l'article.
Les pages des catégories sur Diztest, à l'instant où j'écris cet article, se compose de :
Quatre règles :
#article_liste_articles, pour gérer le style de la section en général
- j'ai mis un fond couleur, dimensionné la largeur et mis des marges.
.article_lien, pour chaque paragraphe
- un fond avec une petite image positionnée à gauche, ce qui implique une marge intérieure gauche pour que le texte laisse voir l'image. Puis une bordure sur les 4 côtés ce qui change complétement la présentation de la page.
#article_liste_articles a, pour les liens
- vous pouvez mettre unepolice de caractère différente, la taille et la couleur pour uneapparence différente des autres liens de votre blog.
#article_liste_articles a:hover, pour les liens au survol
- là aussi modifier le texte
{
background : #993333;
width : 90%;
padding : 10px 20px;
margin : 10px auto;
}
.article_lien
{
background : #FFFFCC;
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/art_doc.gif);
background-repeat: no-repeat;
background-position: 5px 50%;
margin-top: 5px;
padding-left: 20px;
border: 2px ridge #FFCC00;
}
#article_liste_articles a
{
color : #993333;
text-decoration : none;
margin : 2px 5px;
padding : 3px 5px;
display : block;
}
#article_liste_articles a:hover
{
color : #FF6600;
font-style : italic;
text-decoration : underline;
}
Le code CSS complet créé pour les éléments de la page exemple :
/* -- Spécifique - Page Catégorie -- */
/* -- Liste de tous les articles --- */
/* --------------------------------- */
/* ------- Style du descrriptif ---- */
#article_categorie
{
background : #FFCC66;
width : 90%;
margin : 10px auto;
padding : 10px 20px;
color : #CC0000;
font-size : 12pt;
font-family : Comic sans MS;
position : relative;
}
/* ------ Liste des articles ---- */
#article_liste_articles
{
background : #993333;
width : 90%;
padding : 10px 20px;
margin : 10px auto;
}
.article_lien
{
background : #FFFFCC;
}
#article_liste_articles a
{
color : #993333;
text-decoration : none;
line-height : 20px;
margin : 5px;
padding : 3px 5px;
display : block;
}
#article_liste_articles a:hover
{
color : #FF6600;
font-style : italic;
text-decoration : underline;
}
/* --- Formulaire Recherche -- */
#article_recherche form
{
background: #E6C646;
color: #009900;
padding: 10px;
border: 3px inset #CCCC99;
}
Le formulaire de recherche de cette page exemple est celui actuellement sur tout mon blog DizTest, les paramètres sont dans ma feuille de style globale, mais j'ai mis la règle dans le code ci-dessus, pour pouvoir le mettre sur les pages "Catégorie" et "Liste des articles".
Mais si vous souhaitez créer un formulaire spécifique, j'ai tout expliqué dans un article sur les champs dynamiques de la page d'accueil, à voir lien. Pour que le formulaire soit uniquement sur les pages "Catégories" et "Liste des articles", il faut remplacer dans le nom des règles :
#dynamique_recherche par #article_recherche
Suite à quelques modifications sur DizTest, la présentation des pages avec liste d'articles, est légèrement différente, faîtes la comparaison en visualisant la capture de la page exemple lien et celle-ci lien.
Voilà encore quelques modifications réalisables sur Blog4ever... et ce n'est pas fini... à suivre.
