[PasàPas]Transformation étape2
Occupé à d'autres affaires, j'ai du délaisser quelques temps le petit labo... je reprends et continu le pas à pas.
On va tout d'abord s'occuper du menu, qui se doit d'intégrer un peu mieux le blog. Le gris de base est tout a fait hors du coup. Je vais donc le mettre dans les tons bleus avec une ombre à droite, comme si il était glissé en dessous du content.
Etape1: le menu
Mon dégradé fait et uploader, je peux l'intégrer à mon CSS. Le menu se trouvant dans la classe leftbar, je vais la trouver. Suppression des éléments de bordure présent, et ajout du background.
L'image fais que quelques pixels de largeur et 5pixels de hauteurs. Il va donc falloir le répéter pour qu'il couvre toute la hauteur. Ensuite, la couleur la plus clair du dégradé me servira de couleur de fond pour qu'on ne voit pas le passage de l'image au menu.
Pour répeter une image tout d'abord, il faut utiliser background-repeat: repeat/no-repeat/repeat-x/repeat-y, x étant l'horizontal et y le vertical. Dans notre cas, repeat-y donc. Il faut également positionner le fond à droite. On va utiliser background-position: left/right/center/top/bottom. Dans notre cas, j'utiliserai le paramètre right bien entendu. Enfin, la couleur de fond sera la même que pour le content donc #a283e0.
Le code de mon ombre sera donc:
background:#a283e0 url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/menu.png') right repeat-y;
C'est long... Mais le résultat est au rendez vous.
On va z'y coller des 'tites bordures en haut, a gauche et en bas (mais pas droite pour donner l'impression qu'elle continue).
On l'a fait au tour d'avant... donc:
border-bottom: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
border-top: 1px solid #1F1F1F;
Et le tour est joué...? non, piège! Je rajoute 1px dans la largeur... donc largeur du menu+largeur du content=801px!!! Ca rentre pas dans le container qui ne fait que 800px!!! mais vous connnaissez l'astuce ^^ on réduit de 1px la largeur du menu de gauche.
width: 199px;
Ensuite, on va refaire les couleurs des titres.
Ils sont dans .navlinks .title On va remplacer le moche gris actuelle par le même bleu que le titre.
color: #6c31e0;
Et c'est tout :D
On va également mettre tout le calendrier de cette couleur. Il y'a deux élements à repérer, calendar et calendar caption qui sont respectivement le tableau en général et le titre du tableau. CB à mit le mois dans le caption. pour ca qu'il faut le changer egalement ;)
Donc même chose, remplacer le moche gris par notre bleu.
color: #6c31e0;
Enfin, les liens sont illisibles en gris clair sur bleu... donc on va les refaires.
Comme noyel c'est festif et que c'est période de cadeau, on va dire que vous voulez que les gens voient vos amis et qu'ils aillent gonfler leurs statistiques!!! Donc on va les mettre en rouge, comme le cadeau de la bannière.
Les attibuts des liens sont nombreux. Dans la feuille de style c'est tous les a:qqch...
il y'a donc:
a = ancre
a:link = Liens html
a:hover = quand on passe le curseur sur le lien
a:visited = quand on a visité le lien
a:active = quand on clic sur le lien
Les liens seront en rouge clair, les liens visités en rouge foncés, les liens survolés en blanc. et le lien actif... m'en fout :D
On aura comme code:
a:link {
color: #c71212;
text-decoration: none;
}
a:visited {
color: #900d0d;
text-decoration: none;
}
a:active {
color: #FFFF99;
text-decoration: none;
}
a:hover {
color: #FFFF99;
text-decoration: none;
}
Et vala!
Le menu de navigation est fini.
La prochaine fois, j'espere plus rapidement qu'entre l'etape1 et l'etape2, on s'occupera du content avec la feuille de houx, l'encadrement, la canne a sucre et tout.
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
