Barre Menu apparence boutons
En vert sur l'image
Barre Menu apparence boutons en CSS
Pour réaliser cet effet, nous devons mettre 2 images comme fond des liens, une pour la position bouton non activé, l'autre en position bouton pressé, les bordures donneront l'impression de mouvement. Il faut donc modifier les 2 règles sur les liens dans le deuxième onglet de DizPerso "Modification directe du CSS".
Ajout des lignes , background-image pour mettre l'adresse de l'image et background-repeatsi l'image est petite vous pourrez choisir qu'elle se répéte ou pas.
{
background : #004000;
background-image : url(http://diztest.blog4ever.com/blog/url_artimage-205392-1180935-6762.html) ;
background-repeat : repeat;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 20px;
font-size : 11pt;
font-family : Verdana;
border-width : 0px;
border-style : solid;
border-color : #004000;
border: 4px outset #FF6600;
text-align : center;
display : block;
}
#barre a:hover
{
background : #C5D5A7;
background-image : url(http://diztest.blog4ever.com/blog/url_artimage-205392-1180936-2672.html) ;
background-repeat : repeat;
text-decoration : none;
font-size : 12pt;
font-family : Verdana;
color: #004000;
border-width : 0px;
border-style : solid;
border-color : #004000;
border: 4px inset #FF6600;
}
En ajoutant la possibilité de modifier le format du texte pour qu'il soit différent au survol de la souris, l'attention du visiteur sera renforcée.
Pour les bordures DizPerso actuellement est limité dans le choix du style, c'est pour cette raison qu'il est nécessaire de rajouter une ligne avec les attributs groupés des bordures, voir les explications en dessous du tableau.
Partie "Barre > liens au survol"
Les attributs des bordures ci-dessous, en vert, peuvent être laissés dans l'assistant, la taille de la bordure étant "0", ainsi ils resteront dans le formulaire pour utilisation future. Ce qui sera pris en compte, actuellement ce sont les attributs groupés(en rouge ci-dessous), saisis dans le CSS direct, mais qui n'apparaissent pas dans l'assistant.
border-style : solid;
border-color : #000000;
border:4px outset #FF6600
Le style est paramétré "outset" donnant l'apparence de relief, pour la règle liens au survol le style sera "inset" donnant l'impression d'un bouton enfoncé..
Les 2 lignes suivantes sont les attributs non gérés par l'assistant mais pris en compte par le système automatique, l'alignement du texte, valeur : center, ou left ou right. Ne modifiez pas l'attribut suivant, il force l'affichage des blocs liens, il est obligatoire pour un bon résultat.
display : block;
Pour placer la barre qui contient les liens de ce menu, mettez dans DizPerso Partie "Barre", une marge extérieure gauche margin-left de 220px et la largeur width à 600px, il faut évidemment voir si vous avez fait d'autres modifications de taille, puis faire les règlages nécessaires pour arriver à ce que vous souhaiter obtenir.
A Voir...
Sur la même Partie "Barre" suivre ce [lien] et les liens sur cette page [liens à voir]
Commentaires
site/blog
17-06-2008 à 03:23:33
J'espère que tu vas bien car moi j'ai un problème. J'ai essayé enfin de connaître le CSS et j'ai, je crois, suivi tes instructions dans ma partie barre menu mais là j'ai un gros carré qui s'affiche et je ne sais vraiment pas quoi faire pour l'enlever. Si tu as le temps pourrais-tu S.V.P. allez voir ce que j'ai fait de pas correcte!!!
MERCI BEAUCOUP POUR TON AIDE
angel02
le 17-06-2008 à 08:11:48
Le gros carré que tu dis , c'est je pense la bordure de la partie "Barre".
Il faut mettre à l'attribut :
"Taille de la bordure" 0px
Amicalement
site/blog
17-06-2008 à 17:13:26
Comme toujours tu es le meilleur tu avais tout à fait raison j'ai suivi tes instructions et tout est redevenu normal. J'avais changé quelques éléments dans mon CSS pour pouvoir mettre des boutons mais j'ai tellement peur de me risquer!
Merci
site/blog
le 30-01-2009 à 16:08:42
Si jamais vous aviez d'autres conseils à me donner pour la barre vertical (par rapport à la taille de l'image) je suis preneuse!
Bonne journée!
site/blog
30-01-2009 à 22:10:43
Merci pour ton commentaire, je suppose que tu veux dire, par barre verticale, menu vertical gauche.
Il y a des articles à son sujet(dans 7eme catégorie), même avec également l'apparence bouton.
Bonne continuation
site/blog
19-08-2010 à 10:33:02
je suis la fille de Nikki, je gère son blog jusqu'à ce qu'elle apprenne à le faire elle-même.
j'ai essayé (je suis pas douée en css) et j'ai pas réussi et comme je n'aurai plus de PC à partir de cet après midi, je ne pourrai pas renouveler l'expérience.
En tout cas merci pour ce magnifique blog et pour ton aide !
Bonen journée
Soleilvie
site/blog
19-08-2010 à 18:01:38
Bonne fin de journée
Soleilvie
le 22-08-2010 à 21:15:59
J'ai mon PC qui n'est pas encore tout à fait réparé, j'ai refait un essai ça n'a pas fonctionné. Heureusement que j'avais enregistré le css, et donc j'ai remis comme il était avant.
Bonne soirée
Soleilvie
site/blog
le 12-11-2010 à 12:43:44
merci pour tout vos précieux consiels
comment faite vous pour faire apparaître le boton NEW clignotant devant un lien dans le menu ? je suis un peut perdu
merci a vous et bonne continuation
site/blog
13-11-2010 à 00:43:54
Merci pour ton appréciation.
Pour mettre une un image "New", sur le forum Blog4ever il y a un tutoriel :
h ttp://test.blog4ever.com/blog/forum_sujet-2-23543-25629-inserer_news_dans_le_titre_d_une_categorie.html
Voir également ici dans catégorie "Astuces et Générateurs" pour d'autres possibilités sur les titres des catégories.
Bonne pioche
site/blog
le 10-12-2010 à 18:57:45
Peux-tu m'aider (sur mon mail perso peut-être ?), je n'arrive pas :
- à centrer la barre de menu sous la bannière,
- à modifier les titres du menu de la barre et sur la gauche en boutons que j'ai créé...
Au secours !!! Merci d'avance.
site/blog
10-12-2010 à 20:01:51
Pour le centrage de la barre, regarde l'article suivant dans cette catégorie, ça devrait t'aider. J'ai très peu de temps, essaie et si tu n'y arrives pas envoie moi un mail par "Contacter l'auteur".
Bonne continuation
site/blog
le 07-05-2011 à 18:01:50
bonjour ,
moi, je ne comprend pas grand chose , je ne suis pas née avec l'informatique ,
alors, j"ai des boutons qui attendent d'être placés, j'ai pourtant 2 forums, mais allez dans les codes et tout fiche en l'air , il n'y a qu'1 pas de souris!
je ne sais pas ou je dois placé le code bouton et s'il faut écrire le titre dessus ou il s'affiche dans mon bouton, c'est l'embrouille totale, j'ai essayé de l'écrire en forum, et on me dit que c'est trop long mon message,
qu'elle galère !
j'ai bien refait le graphisme,mis le logo , mais le reste fait la sieste en attendant mieux !
bonne soirée , Monyka
site/blog
le 07-05-2011 à 18:49:26
je ne touche ,jamais aux templates dans mon forum ,
et ici, on nous dit de le faire en CSS !
on devrait faire une école pour les nuls,
je suis en panne de titres, qui peut svp , m'aider , merci !
bonne soirée , monyka
le 07-05-2011 à 20:06:29
Je ne comprends pas de quels forums tu parles, vas sur le forum de Blog4ever. Pour ouvrir un sujet il faut être inscrit, puis ouvrir un sujet dans la catégorie "Petits soucis", écrire un titre pas trop long et après expliquer ton problème, là tu as de la place pour écrire.
Les commentaires ce n'est pas facile pour s'expliquer et ce n'est pas fait pour ça.
Je regarderai ton blog après le repas.
@+
site/blog
le 03-12-2011 à 00:16:45
Est-il possible de créer des menus après ceux imposé par le module ex : il apparait accueil; articles, photos
Peut-on rajouter et comment le créer (vu que je suis en version gratuite) référencement ou annuaire.
Merci de votre réponse
Cordialement
C.
site/blog
03-12-2011 à 00:23:43
Il faut être en version Silver ou Gold.
Désolé!
Bonne continuation