Labs - Essai du CSS des menus Modules en DizPerso

Cet article pour tester les nouvelles possibilités, du paramétrage de style, dans les modules du menu vertical.

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

Pour réaliser ce test, j'ai mis des couleurs différentes, ne tenez pas compte de mon choix,j'utilise mes fonds dégradés des générateurs de DIZ.

La structure HTML du menu vertical gauche

<div id="menu">
<div id="menu_articles" class="menu_bloc">
<h2>Articles</h2>
</div>
<div id="menu_photos" class="menu_bloc">
<h2>Photos</h2>
</div>
<div id="menu_forum" class="menu_bloc">
<h2>Forum</h2>
</div>
<div id="menu_newsletter" class="menu_bloc">
<h2>Newsletter</h2>
</div>
<div id="menu_sondage" class="menu_bloc">
<h2>Sondage</h2>
</div>
<div id="menu_partenaires" class="menu_bloc">
<h2>À découvrir</h2>
</div>
<div id="menu_stats" class="menu_bloc">
<h2>Statistiques</h2>
</div>
</div>

Cette structure avec les IDs permet de paramétrer chaque "bloc module" dans un style personnalisé,ceci en créant une nouvelle règle pour chaque ID, en utilisant les attributs employés dans DizPerso,connus par ceux qui ont fait le pas d'ouvrir l'onglet "Modification directe du DizPerso". Evidemment toutes les propriétés CSS peuvent être ajoutées si vous les connaissez.

Quelques précisions avant de commencer, dans le CSS les règles peuvent être appliquées sur :

- les sélecteurs HTML la règle commence par son nom body, a, p,ul,li, etc...

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

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

Pour exemple voici les règles du premier module "Articles"

La classe .menu_bloc est commune à tous les blocs, on y mettra tous les attributs communs à tous les blocs, en l'occurrence, la largeur, les marges extérieures pour garantir un alignement, les bordures éventuellement pour éviter des répétitions. Ceci en sachant que l'on peut modifier individuellement les valeurs en les mettant dans les règles de chaque identifiant (#).Vous avez l'exemple margin-top :20px dans la class.menu_bloc donc pour tous les blocs menus modules, puis dans la règle #menu_articles cette marge extérieure haute n'a pas besoin d'être aussi grande donc margin-top :5px,ainsi vous pouvez mettre des espaces différents entre les blocs modules.

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

La règle #menu_articles est uniquement sur la DIV avec l'identifiant id="menu_articles"et comme dans DizPerso, il faut également créer les règles sur tous les éléments que ce bloc contient, les listes, les liens, le titre.

#menu_articles
{
margin-top:5px;
}
#menu_articles ul
{
background-image:url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/turquoise/fd_3a.png);
background-repeat:repeat-y;
border-width: 3px;
border-style :groove;
border-color : #000000;
}
#menu_articles ul li a
{
background : #;
color:#660000;
}
#menu_articles h2
{
background-image:url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/turquoise/fd_2.png);
background-repeat:repeat-x;
margin-top : 2px;
}

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.

Vous avez certainement remarqué, que le bloc"Annonces", n'a pas d'ID, il est géré par Google pour la pub dans les versions gratuites.

Pour tous les blocs modules vous pourrez en faire autant, mettre des couleurs ou des images différentes,pour attirer l'attention sur un module. A l'occasion du concours de Noël, je ferai certainement un articlequi sera l'application idéale pour tester tous ces paramétrages.

CSS gérant tous les menus de cette page.


/* ----------------- style commun aux différents blocs --------------- */
.menu_bloc
{
width : 182px;
margin : 20px auto;
border: 1px solid #FFF;
}


/* --------- style partiellement commun aux différents blocs --------- */
#menu_articles h2, #menu_photos h2, #menu_forum h2
{
width : 184px;
}
#menu_newsletter h2, #menu_sondage h2, #menu_partenaires h2, #menu_stats h2
{
margin-left : 2px;
}


/* --------------- particularités de chaque bloc de menu ------- */

/* --- menu articles ----- */
#menu_articles
{
margin-top:5px;
}
#menu_articles ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/turquoise/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px groove #000000;
}
#menu_articles ul li a
{
background : #;
color: #660000;
}
#menu_articles h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/turquoise/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
}


/* --- menu photos --- */
#menu_photos ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/orange/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px ridge #FFFFFF;
}
#menu_photos ul li a
{
background : #;
color: #660000;
}
#menu_photos h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/orange/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
color:#336600;
}


/* --- menu forum --- */
#menu_forum ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/bleu/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px inset #FFFFFF;
}
#menu_forum h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/bleu/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
color:#FF9900;
}


/* --- menu newsletter --- */
#menu_newsletter ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/jaune/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px outset #000000;
}
#menu_newsletter h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/jaune/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
color:#009900;
}


/* --- menu sondage --- */
#menu_sondage ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/vert/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px ridge #FFFFFF;
}
#menu_sondage h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/vert/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
}


* --- menu partenaires --- */
#menu_partenaires ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/roserouge/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px inset #FFFFFF;
}
#menu_partenaires h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/roserouge/fd_2.png);
background-repeat: repeat-x;
margin-top : 2px;
}


/* --- menu stats --- */
#menu_stats ul
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/gris/fd_3a.png);
background-repeat: repeat-y;
width:180px;
border:3px outset #FFFFFF;
}
#menu_stats h2
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/gris/fd_2.png);
background-repeat: repeat-x;
color : #FFFFFF;
margin-top : 2px;
}