Labs - Structure du menu vertical du DizPerso

 

    ACCUEIL <<< DizPerso Labs <<<


 

Mise en couleur des divers blocs, dans la partie "Menu", pour mieux comprendre les effets des paramètres réglés dans la feuille de style CSS.

Cette partie est une colonne à gauche ou à droite de la page, elle est composée :

en rouge - du grand bloc Menu qui contient tous les autres éléments.

en bleu - les blocs de chaque module activé Articles, Photos, Forum, Newsletter, etc...

- dans chaque bloc module 2 ou 3 autres blocs :
en vert - le Titre
en jaune - les listes contenant les blocs éléments en orange au survol de la souris.
en violet - les formulaires
        

 

Règles de chaque bloc détaillées

        

 

Pour commencer la première règle pour paramétrer la largeur du bloc "Menu" et la couleur du fond.

        
#menu
{
background : red;
width : 210px;
}
                

 

Pour tous les blocs modules et pour les paramètres communs, j'utilise la classe .menu_bloc. C'est une nouvelle possibilité crée par KL au cours de la refonte du code, une division qui permet de traiter le style commun aux blocs modules. Dans d'autres articles vous pouvez voir l'emploi des nouvelles DIVs créées qui permettent de paramétrer séparément chacun de ces blocs.
Dans mon exemple:
- couleur de fond
- largeur
- les marges extérieures, pour détacher(20px) les blocs et les centrer(auto)
    - haut : 20px
    - droite : auto
    - gauche : auto
    - bas : 20px
- les bordures : largeur, style, couleur, pour les 4 côtés

.menu_bloc
{
background : blue;
width : 200px;
margin-top : 20px;
margin-right : auto;
margin-right : auto;
margin-bottom : 20px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}

Le code ci-dessus n'est pas reconnu par l'assistant DizPerso, lisez mes explications dans le descriptif de la catégorie à lire absolument.

        

 

Les blocs "Titre" des modules, paramétrage du fond couleur, de la largeur.
Puis une marge extérieure :
- haute : 10px
- droite : auto (en mettant les marges gauche et droite en auto, le bloc doit se centrer horizontalement)
- gauche : auto
- haute : 10px

#menu h2
{
background : #66CC00;
width : 184px;
margin-top : 10px;
margin-right : auto;
margin-right : auto;
margin-bottom : 10px;
}

 

Les blocs listes, qui contiennent les éléments de la liste, où sont écrits les liens, constituant le menu.
Là également vous pouvez mettre un fond couleur ou image. Pour l'exemple le fond sera de couleur "jaune", centré grâce aux marges extérieures(margin) et encadré d'une bordure,pour une belle présentation les marges intérieures(padding) créeront un espace entre la liste et les bordures.

#menu ul
{
background : #FFFF00;
width : 184px;
margin-top : 10px;
margin-right : auto;
margin-right : auto;
margin-bottom : 10px;
padding-top : 5px;
padding-bottom : 5px;
border-width: 1px;
border-style: solid;
border-color: #000000;
}

 

Pour faire simple, les liens sont uniquement du texte, mais ce sont aussi des blocs, qui peuvent avoir un fond couleur ou image.
Le but de cet article est surtout pour montrer la dispositions de tous les blocs composant les divers menus. Si vous survolez tous les menus avec la souris vous repérerez ainsi tous les liens gérés par les 2 règles ci-dessous, vous remarquerez des liens dans :
- Menu Articles
- Menu Photos
- Menu Forum
- Menu Newsletter
- Menu Sondage
Le menu Partenaires qui n'est pas sur mon menu contient lui aussi une liste de liens.
Pour les statistiques voir plus bas mes explications.

        
#menu ul li a
{
color : #000000;
}
#menu ul li a:hover
{
background : #FF6600;
color : #ffffff;
}
    

 

Les menus Newsletter et Sondage sont composés chacun d'une liste, dont les éléments sont formulaires et liens.
Les liens sont gérés par les 2 règles précédentes et les formulaires par la règles ci-dessous, soit :
- pour le menu Newsletter, le formulaire de saisie "Votre Email ici" et 2 liens, "En savoir plus" et "Archives"
- pour sondage, le formulaire pour répondre au sondage et un lien "Tous les sondages"

#menu ul li form
{
background : #CC33CC;
color : #CCFFFF;
width : 165px;
padding-left: 10px;
margin-top : 5px;
}
        
        

 

Le menu Statistiques, est unique dans sont genre, c'est une liste sans lien, il sera géré par la règle suivante, contenant les paramètres du texte des éléments, ici la couleur et l'espace gauche entre texte et bordure.

        
#menu li
{
color : #009900;
padding-left : 5px;
}

 

A tous les règles énoncées ci-dessus, que vous pouvez compléter, s'ajoute la possibilité de gérer chaque module séparément, voir cet article " CSS des menus Modules en DizPerso " ,donc une grande avancée pour le design de vos blogs. Surtout qu'avec un peu d'imagination, vous pouvez en plus,insérer des images, voir l'article sur la déco de Noël " CSS pour décoration Noël " .

 

Voilà déjà un vaste programme rien que sur une partie de page, d'autres parties seront étudiées, déjà vous pouvez voir cet article sur la partie "Contenu" " CSS dans la partie Contenu du DizPerso " ,donc à suivre...

 

 

 



16/12/2009
0 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