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.
#barre a
{
background : #004000;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080603041902.jpg) ;
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://www.blog4ever.com/blogfichiers/205392/boximages/205392080603041942.jpg) ;
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"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration | ||
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Marge extérieure gauche | margin-left | Dimension (ex: 10px) | |
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Verdana, Arial, Trebuchet MS | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
Partie "Barre > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Couleur du texte | color | Choisir | |
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Verdana, Arial, Trebuchet MS | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
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-width : 0px;
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.
text-align : center;
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
angel02 le 17/06/2008 à 03:23:33Bonjour PapyClic,
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
PapyClic le 17/06/2008 à 08:11:48
Bonjour Angel
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
angel02 le 17/06/2008 à 17:13:26
Cher PapyClic,
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
Megara site : http://megara.blog4ever.com/blog/index-264626.html | le 30/01/2009 à 16:08:42
Un grand MERCI papy clic pour ce tuto qui m'a vraiment aidé, car je commençais à désespérer pour l'interface de mon blog!
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!
PapyClic le 30/01/2009 à 22:10:43
Bonsoir Megara
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