Labs - Structure partie Contenu Article du DizPerso
Mise en couleur des différentes DIVs, dans la partie "Contenu" emplacement de vos articles. Ne tenez pas compte de mon choix des couleurs, c'est uniquement pour faciliter le repérage.
Cette partie "Contenu", ici sur cette page, en couleur orange, contient tout ce qui est en rapport avec votre article
Soit trois divisions :
- le bloc article contenant le corps de l'article, en jaune sur cette page
- le bloc article_commentaires, en gris sur cette page
- le bloc article_liens, en vert sur cette page
Comme vous pouvez le voir sur la structure HTML ci-dessous...
- la DIV "article" contient le nom de l'article,
- la DIV "article_commentaires" contient un formulaire de saisie des commentaires et les commentaires viendront s'y rajouter
- la DIV "article_liens" contient le lien de retour à la catégorie, à la page d'impression et les liens de partage
La structure HTML de la partie "Contenu"
<div id="article">
<h3></h3>
</div>
<div id="article_commentaires" class="contenu_commentaires">
<h3>Commentaires</h3>
<form action="" method="post">
<fieldset id="commentaire">
</fieldset></form>
</div>
<div id="article_liens">
<h3>Liens</h3>
</div>
</div>
Le code CSS créé pour mettre en couleur les diverses DIVs de cette page :
<style type="text/css">
#contenu
{
background : #FF9900;
padding-top :30px;
border:1px solid #C9C9C9;
}
#article
{
background:#FFFF00;
margin : 20px;
padding : 10px;
color:#663300;
border:1px solid #C9C9C9;
}
#article_commentaires
{
background:#CCCCFF;
width : 95%;
margin : 20px auto;
padding : 10px;
color:#663300;
border:3px ridge #FFCC00;
}
/* form */
#commentaire
{
background:#0033CC;
width:95%;
margin: 10px auto;
padding : 10px;
color:#FFFFFF;
border:3px inset #FFCC00;
}
#message
{
background:#99FFFF;
color:#000000;
}
/* les liens */
#article_liens
{
background:#009900;
width : 95%;
margin : 20px auto;
padding : 10px;
color:#FFFF00;
border:3px ridge #FFCC00;
}
#article_liens a
{
background:99FF99;
color:#000000;
}
#article_liens a:hover
{
background:#000000;
color:#99FF99;
}
/* liens partage */
#articles_lien_partage
{
background:#009900;
color:#000000;
margin-top:10px;
}
#articles_lien_partage a
{
background:#FFFFFF;
color:#000000;
}
#articles_lien_partage a:hover
{
background:#000000;
color:#FFFFFF;
}
</style>
Si des attributs sont oubliés dans ces règles, par héritage les règles des parties parents qui seront les paramètres retenus par le système.
Deux règles seront utilisées pour les articles :
- #contenu pour l'ensemble qui contient les sections, article, commentaires et liens.
- #article pour le corps des articles
A ces 2 règles vous pouvez mettre les attributs comme indiqués dans mon article créé avant le rajout de la DIV #article, concernant la partie "Contenu" du Diz Perso.
La section "commentaire" très importante avec le formulaire est étudiée dans cet article lien.
