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(//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(//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(//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(//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(//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(//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
4 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