Partie "Barre"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) |
#barre
{
width : 768px;
margin-top : 5px;
height:30px;
}
{
width : 768px;
margin-top : 5px;
height:30px;
}
Cette règle gére la taille et le placement de la barre, je l'ai volontairement colorée pour bien la définir, n'étant pas visible à l'origine. Voir les autres articles, beaucoup d'attributs peuvent être rajoutés à cette règle pour différentes présentation de ce menu, en particulier cet article [lien].
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
#barre ul
{
list-style-type : none;
}
{
list-style-type : none;
}
En principe dans ce menu les puces ne sont pas utiles, cette règle à mon avis existe pour éventuellement désactiver un paramètrage par défaut. Dans le CSS, les éléments contenus dans un bloc, héritent des attributs du bloc dans lequel ils sont incorporés.
Exemple : Si dans la partie "Page" l'alignement du texte est "text-align: center"... dans le "Cadre", le "Contenu" ainsi que tous les éléments formant la page, il en sera de même, sauf si, à la saisie dans le composeur, vous formatez en alignement gauche. Mais il est préférable d'ajouter cet attribut dans le CSS en direct dans la partie "Contenu", "text-align: left;"... il n'apparaît pas dans l'assistant mais il reste présent dans la règle.
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
#barre li
{
float : left;
}
{
float : left;
}
Attribut absent dans l'assistant, mais très important, pour mettre les éléments de la liste composant le menu, en ligne.
| 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 | ||
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure gauche | margin-left | 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 |
#barre a
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
Gestion des liens composant le menu... chaque lien vers un module, est un élément de la liste. Si cette règle était absente, les liens prendraient l'apparence des liens en général, c'est à dire sur la balise HTML <a>, géré dans la partie "Page > liens" de l'assistant.
Partie "Barre > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir |
#barre a:hover
{
background : #C5D5A7;
border : 1px solid #004000;
}
{
background : #C5D5A7;
border : 1px solid #004000;
}
