revoi

Manuel du graphiste

Menu.css

Le fichier Menu.css permet de définir l'aspect du menu qui apparaît dans la cellule du milieu de la colonne de gauche (Classeur_cell_g dans Classeur.css). Vous allez gérer l'affichage des polices et aussi l'habillage autour du bloc menu.

.Menu

Cette css agit sur l'intégralité du menu, toutes cellules confondues. C'est ici par exemple que vous allez définir la largeur du bloc menu dans la colonne de gauche.Voici celle de ce site :

.Menu
{
width: 85%;
}

a.Menu_lien, a.Menu_lien:hover

Ces css définisent l'aspect des items du menu quand ils sont au repos ou survolés. Voici celles de ce site :

a.Menu_lien
{
color: dimgray;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-decoration: none;
}
a.Menu_lien:hover
{
color: red;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-decoration: underline;
}

Haut de page

.Menu_lien_actif, .Menu_lien_actif:hover

Ces css définissent l'aspect du texte lorsque l'on se trouve dans la page qui correspond à l'item du menu. Voici celles de ce site :

.Menu_lien_actif
{
color: cornflowerblue;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-style: italic;
font-variant: normal;
font-weight: bold;
text-decoration: none;
}

.Menu_lien_actif:hover
{
color: cornflowerblue;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-style: italic;
font-variant: normal;
font-weight: bold;
text-decoration: none;
}

.Menu_cell

Cette css définit les caractéristiques des cellules contenant les items. Voici celle de ce site :

{
height : 15px;
padding: 3px;
}

Haut de page

.Menu_cell_g_h, .Menu_cell_h, .Menu_cell_d_h, .Menu_cell_g, .Menu_cell_d, .Menu_cell_g_b, .Menu_cell_b, .Menu_cell_d_b

Ces css vous permettent d'habiller le tour du menu. Pour exemple celles du site du CICADE dont le menu comporte un habillage :

.Menu_cell_g_h
{
height : 10px;
width : 10px;
background-image: url(images/menugh.gif);
background-repeat:no-repeat;
}

.Menu_cell_h
{
height : 10px;
background-image: url(images/menuh.gif);
background-repeat: repeat-x;
}

.Menu_cell_d_h
{
height : 10px;
width : 10px;
background-image: url(images/menudh.gif);
background-repeat:no-repeat;
}

.Menu_cell_g
{
width : 10px;
background-image: url(images/menug.gif);
background-repeat: repeat-y;
}

.Menu_cell_d
{
width : 10px;
background-image: url(images/menud.gif);
background-repeat: repeat-y;
}

.Menu_cell_g_b
{
height : 10px;
width : 10px;
background-image: url(images/menugb.gif);
background-repeat:no-repeat;
}

.Menu_cell_b
{
height : 10px;
background-image: url(images/menub.gif);
background-repeat: repeat-x;
}

.Menu_cell_d_b
{
height : 10px;
width : 10px;
background-image: url(images/menudb.gif);
background-repeat:no-repeat;
}

Haut de page