Menu de gauche liens apparence boutons en CSS


En bleu sur l'image

 

Menu de Gauche 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-repeat si l'image est petite vous pourrez choisir qu'elle se répéte ou pas.

 

<STYLE type=text/css>
<!--
#menu
{
width : 178px;
float : left;
}
#menu ul
{
list-style-type : none;
}
#menu ul li
{
background : #;
margin-top : 0px;
width : 178px;
height : px;
line-height : 33px;
text-align : center;
}
#menu ul li a
{
background: #;
background-image : url(https://static.blog4ever.com/2008/05/205392/artimage_205392_1180935_201004161959200.jpg);
color: #FFFFFF;
width: 170px;
line-height: 25px;
text-decoration: none;
font-family: Trebuchet MS;
font-size: 11pt;
border-width : 0px;
border-style : solid;
border-color : #FF6600;
border: 4px outset #FF6600;
display: block;
}
#menu ul li a:hover
{
background: #FDD5A8;
background-image: url(https://static.blog4ever.com/2008/05/205392/artimage_205392_1180936_201004173736447.jpg) ;
color: #00FFFF;
line-height: 25px;
font-family: Comic Sans MS;
font-size: 12pt;
border-width : 0px;
border-style : solid;
border-color : #FF6600;
border:4px inset #FF6600;
}
#menu h2
{
width:178px;
}
-->
</STYLE>

 


 

Partie "Menu"

 


 

Partie "Menu > liste"

 


 

Partie "Menu > élements de la liste"

 


 

Partie "Menu > liens"

 


 

Partie "Menu > liens au survol"

 


 

Partie "Menu > titres"

 


 

Les ligne suivantes sont des lignes ajoutées dans le CSS direct, n'étant pas gérée par l'assistant.
text-align : center;
display : block;

 

A Voir...

Sur la même Partie "Menu" suivre ce [lien] et les liens sextérieurs [liens à voir]

 



03/06/2008
9 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