Labs - Essai du CSS dans la partie Contenu du DizPerso

 

 

Cet article pour tester les nouvelles possibilités, du paramétrage de style, dans la partie "Contenu".

 

Les DIVs des blocs de la partie "Contenu" avec leurs IDs et leur Class.

 

Très intéressant dans cette partie, pouvoir paramétrer de façon différente :
 - le bloc article
 - le bloc article_commentaires
 - le formulaire de saisie (j'y reviendrai en détail)
 - le bloc article_liens
 Tous ces blocs sont dans la partie "Contenu", donc dans le bloc(ID) #contenu , qui est géré dans le DizPerso.

 

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>

 

Dans l'onglet "Modification directe du DizPerso", vous pouvez créer les règles pourchaque identifiant (ID) ou classe (CLASS) et ajouter les attributs qui modifieront la présentation de cettepartie. Cependant je vous conseille de lire le descriptif de la catégorie , pour voir comment employer ce CSS complémentaire.

 

Petit rappel, dans le CSS les règles peuvent être appliquées sur :

 - sur des identifiants (id) la règle commence par lesigne dièse #

 - sur des classes (class)la règle commence par unpoint  .

 - les sélecteurs HTML peuvent être également paramétrés, mais ils seront précédés par l'identifiant.

 

 

Exemples :

#article a
#article a:hover
#article p
#article ul
#article li

 

 

Le code CSS créé pour les éléments de la partie "Contenu", de cette page :

/* --------------------------  Article */
#article
{
background:#FFFFCC;
color:#663300;
border:3px inset #FFCC00;
}

/* --------------------------  Commentaires  */
#article_commentaires
{
background:#FFFF00;
color:#009900;
border:3px ridge #FFCC00;
}

/* --------------------------  Liens  */
#article_liens
{
background:#CC9900;
color:#FFFF00;
}

#article_liens a
{

background:#FFFF00;
color:#CC9900;
}

#article_liens a:hover
{
color:#FFFFFF;
}

 

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.

 

 



03/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 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

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