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(https://static.blog4ever.com/2008/05/205392/artimage_205392_1180935_201004161959200.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(https://static.blog4ever.com/2008/05/205392/artimage_205392_1180936_201004173736447.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 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]
