Labs - Essai du CSS pour décoration Noël

A l'occasion de Noël mise en application des nouvelles possibilités de style, dans les modules du menu vertical. Je vous recommande de lire complètement avant toutes choses le descriptif de la catégorie lien.

J'utilise l'espace des titres de modules pour insérer des images sur le thème de Noël, comme exemple, il en sera de même pour toute autre décoration.

Le principe est de mettre une image en fond de ce bloc #menu h2, de la positionnée et de placer le titre texte, avec les nouveaux IDs nous pouvons mettre des images diffférentes pour chaque module.

Dans ce bloc titre à chaque module du menu, je positionne une image de fond, selon sa taille et son importance, avec l'attribut "background-position", en laissant assez de place pour le texte du titre.

Pour la position du titre, il faut soit avec l'attribut "text-align" ou en affiner avec la hauteur du bloc "height" et la marge intérieure haute "padding-top". ATTENTION si vous augmentez la marge il faut diminuer la hauteur, car les 2 s'additionnent, pour déterminer la hauteur réelle du bloc.

Règle du module "Articles"

#menu_articles h2
{
background : transparent;
background-image: url(http://DizTest.blog4ever.com/blog/url_artimage-205392-2395498-2657.html);
background-repeat: no-repeat;
background-position : 80% 100%;
height : 40px;
margin-top : 10px;
padding-top : 70px;
text-align : left;
border : none;
}

Règle du module "Photos"

#menu_photos h2
{
background : transparent;
background-image: url(http://DizTest.blog4ever.com/blog/url_artimage-205392-2395518-5529.html);
background-repeat: no-repeat;
background-position : center top;
height : 20px;
margin-top : 20px;
padding-top : 140px;
text-align : center;
border : none;
}

Règle du module "Forum"

#menu_forum h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-1566958-31024.html);
background-repeat: no-repeat;
background-position : center top;
height : 30px;
margin-top : 20px;
padding-top : 70px;
text-align : center;
border : none;
}

Règle du module "Newsletter"

#menu_newsletter h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-806478-7799.html);
background-repeat: no-repeat;
background-position : 50% 50%;
height : 30px;
margin-top : 20px;
padding-top : 170px;
text-align : center;
border : none;
}

Règle du module "Sondage"

#menu_sondage h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-806768-4989.html);
background-repeat: no-repeat;
background-position : 5% 50%;
width : 144px;
height : 30px;
margin-top : 40px;
padding-top : 60px;
padding-right : 40px;
text-align : right;
border : none;
}

Règle du module "Statistiques"

#menu_stats h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-1566956-3309.html);
background-repeat: no-repeat;
background-position : top center;
height : 20px;
margin-top : 40px;
padding-top : 130px;
text-align : center;
border : none;
}

Il manque le module Partenaires, qui pourra être paramétré de la même façon.

Voir également les placements d'images sur cet article lien
Ou celui sur la déco d'Halloween lien

05-12-2009 | 1200 vues

Commentaires

ouiam le 07-07-2011 à 11:25:41	merci ça m'a beaucoup aidé ^^
Volcania59 site/blog le 07-07-2011 à 16:04:52	Bonjour O merveilleux Papyclic, j'ai tenté grâce à ton précieux tutoriel de mettre des images différentes dans chaque module du menu vertical de mon blog Vésuvien (trop peur de tenter sur le principal lol) et ben je suis ravie j'y suis parvenue mais je tenais à te dire un gros merci pour tes tutoriels car sans eux je crois que beaucoup de monde serait perdu moi la première lol. Alors merci, maintenant je sais que je peux tenter sur Volcans du monde mais la j'attends un peu comme le concours est fini depuis peu. Bisous.
PapyClic le 07-07-2011 à 17:52:58	Bonsoir Aline Merci pour ton commentaire, je suis toujours content de voir que mon travail sert à quelque chose. Je suis allé sur ton blog Vésuvien pour voir le résultat, c'est parfait, bravo. Bises
Volcania59 site/blog le 07-07-2011 à 18:11:15	Bonsoir Papyclic, de rien pour le commentaire. Je sais que les autres modos du forum d'aide et toi même vous faites tous un boulot énorme et parfois un petit mot comme celui que j'ai laissé est la moindre des politesses pour remercier mais aussi pour rassurer sur l'utilité d'un travail. Je peux t'assurer que ton travail sert énormément, oh ça oui. Merci pour tes compliments sur le blog Vésuvien, je suis touchée. J'ai encore des choses à changer notamment la bannière mais quel plaisir de jouer à perfectionner son blog :) Merci, bises.