Labs - Structure partie Contenu Page catégorie du DizPerso


ACCUEIL <<< DizPerso Labs <<<



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.

 

Capture Page Categorie


Comme dans toutes les pages du Diz Perso, la section principale est nommée "Contenu".
Elle comprend sur cette page :

     
  1.  le titre h3
  2.  
  3.  le bloc article_catégorie
  4.  
  5.  le bloc article_liste_articles
  6.  
  7.  le formulaire de recherche

 

 

La structure HTML de la partie"Contenu" de la page exemple


Structure HTML de cete page

 

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 :


/* ------ 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;
}

 

Mais dans ce texte descriptifvous pouvez insérer des images ou des liens, dont les propriétés destyle seront gérées dans la feuille de style globale par la règle #contenu et ses déclinaison.




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


#article_liste_articles
{
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.


 



19/02/2010
2 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 285 autres membres

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso