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="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 :

<p>&nbsp;</p>
<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.


 




20/12/2009
2 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 287 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