Partie "Menu"
ACCUEIL <<< Assistant & CSS <<<
 |
 |
 |
 |
 |
 |
En bleu sur l'image
Partie "Menu"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Largeur | width | Dimension en pixels (ex : 200px) |
#menu
{
width : 170px;
float:left;
}
{
width : 170px;
float:left;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
#menu ul
{
list-style-type : none;
}
{
list-style-type : none;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| 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 |
#menu ul li
{
background : #EBEDAB;
width : 170px;
margin-top : -1px;
border-width : 1px;
border-style : solid;
border-color : #000000;
}
{
background : #EBEDAB;
width : 170px;
margin-top : -1px;
border-width : 1px;
border-style : solid;
border-color : #000000;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Couleur du texte | color | Choisir | |
| Couleur de fond | background | Choisir | |
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS |
#menu ul li a
{
width : 170px;
line-height : 25px;
color:#003366;
background : #EBEDAB;
font-size : 10pt;
font-family : Arial;
}
{
width : 170px;
line-height : 25px;
color:#003366;
background : #EBEDAB;
font-size : 10pt;
font-family : Arial;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration |
#menu ul li a:hover
{
background : #FFFFFF;
color:#006699;
text-decoration : none;
}
{
background : #FFFFFF;
color:#006699;
text-decoration : none;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Couleur du texte | color | Choisir | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Taille de la police | font-size | ex: 10pt | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
#menu h2
{
background : #004000;
color : #EEF5FA;
width : 170px;
height : 25px;
margin-top:25px;
font-size : 15px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
}
{
background : #004000;
color : #EEF5FA;
width : 170px;
height : 25px;
margin-top:25px;
font-size : 15px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
}
Astuces
- L'attribut "line-height" dans la "Partie Menu > liens", est en rouge car vous ne le verrez pas dans l'assistant. Son rôle est important, il règle la hauteur de ligne des liens du menu, mais si vous souhaitez la modifier, il faudra passer par "Modification direct du CSS"
- Si vous souhaitez mettre un espace entre les modules du menu de gauche, il faut rajouter l'attribut "margin-top" de la Partie "Menu > titres" dans "Modification directe du CSS, comme ci-dessus en vert et par la suite vous pourrez modifier la valeur dans l'assistant.
