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_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>Partenaire</h2>
</div>
<div id="menu_stats" class="menu_bloc">
<h2>Statistiques</h2>
</div>
<h2>Annonces</h2>
</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.
{
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.
{
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;
}
Commentaires
site/blog
le 10-12-2009 à 15:05:40
s v p je voudrai savoir comment placer un gif animé ou une image dans le menu de gauche
merci
le 10-12-2009 à 22:18:37
Merci de visiter mon blog, mais pour ce genre de question le forum d'aide de Blog4ever est mieux adapté et plusieurs blogueurs peuvent répondre.
Les petits gifs animés peuvent être mis dans le nom de la catégorie ou d'un article à côté du texte.
Exemple : Nom catégorie <img src=" adresse image sur le WEB" border="0" />
Il y a d'autres possibilités de positionner des images, regardes bien sur ce blog.
Bonne pioche
site/blog
le 27-01-2010 à 03:12:59
Tu es un GENIE!!!!
Merci!!!!!!!!!!
site/blog
le 06-02-2010 à 20:05:16
En bref... t'es un génie comme a dit noelle :p
merciiiiii
site/blog
le 29-05-2010 à 19:21:41
site/blog
le 14-05-2011 à 15:32:10
J'ai lu dans tes exemples qu'il y avait moyen de rajouter une rubrique dans le menu vertical.
1.Je suis super novice, je voudrais rajouter après le titre article un titre Classement avec le même principe de lien que les article (newletters etc) peut-tu m'aider S.T.P car j'ai difficile à comprendre la programmation.
2. j'ai un calendrier perpétuel en bas de page, j'aimerais le mettre au-dessus à droite et qui ne bouge pas en faisant défilé la page.
Un grand merci d'avance
le 15-05-2011 à 19:48:51
Tu veux rajouter un module dans le menu de gauche, j'ai tout expliqué dans cet article:
h ttp://diztest.blog4ever.com/blog/lire-article-205392-2059992-gestion_dynamique_des_modules__du_menu_vertical.html
En exemple j'ai créé "Module Plus", il y a le code complet et commenté.
Pour le calendrier à droite, il faut créer la colonne de droite voir cet article :
h ttp://diztest.blog4ever.com/blog/lire-article-205392-2061533-bloc_droit_colonne_avec_menu_complementaire.html
Bonne pioche
site/blog
le 15-05-2011 à 22:41:57
J'ai résolu la moitié de mes problèmes et je t'en remercie.
Mon module supplémentaire se trouve en dessous, donc maintenant il me reste plu que de le déplacer.
peux-tu me dire à quel endroit je dois mettre le code pour le déplacer
Merci d'avance
site/blog
le 16-05-2011 à 08:40:11
Il à fait un magnifique travail sur mon site, pour lui ce n'est qu'un détail, pour moi c'est énorme.
Encore un grand merci
Jean-Jacques
site/blog
le 16-05-2011 à 11:29:00
Suite à ton aide j'ai mis une bannière de Blog4 sur mon site et ce en remerciement.
Amitiés
P.S je l'ai volée sur ton site (excuse moi).
le 16-05-2011 à 11:46:09
C'est super merci.
Bonne continuation sur Blog4ever
site/blog
05-10-2011 à 03:06:17
Tout d'abord un grand merci renouvelé pour les solutions que vous m'apportez pour améliorer mon blog.
Une question : comment apporter une forme aux contenus affichés lorsqu'on active une rubrique du menu ? Où copier les tronçons de programme CSS ?
le 05-10-2011 à 09:16:22
Pour la partie "Contenu", il faut voir les catégories dans "ESPACE ARTICLE"
Bonne pioche