Modifications simples du menu vertical gauche
ACCUEIL <<< Menu vertical gauche <<<
 |
 |
 |
 |
 |
 |
En bleu sur l'image
Sur cette page vous visualiserez quelques modifications de bases, des variantes simples seront également indiquées mais pas visuelles.
Ces modifications se gérent avec le DizPerso, parfois en ajoutant un attribut dans le fichier CSS en direct.
Des modifications plus importantes feront l'objet des pages suivantes dans cette catégorie.
Partie "Menu"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Largeur | width | Dimension en pixels (ex : 200px) |
Code CSS de cette partie
#menu
{
background : #CCFF99;
width : 174px;
float:left;
border:1px solid #000000;
}
Attribut couleur de fond background, rajouté dans "Modification directe du CSS", mais si vous souhaitez ne pas mettre de couleur, comme valeur laissez "#", vous éviterez que cette ligne disparaisse de l'assistant, de cette façon le fond sera transparent.
Augmentation de la largeur pour que le fond soit sur toute la largeur des éléments, 4px qui représentent les 2 bordures de gauche et de droite.
Pour encadrer toute la partie du menu ajouter l'attribut border comme ci-dessus, en allant dans "Modification directe du CSS".
Partie "Menu > liste"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
Code CSS de cette partie
#menu ul
{
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.
Partie "Menu > élements de la liste"
| 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 |
Code CSS de cette partie
#menu ul li
{
background : #EBEDAB;
width : 170px;
margin-top : 1px;
border-width : 2px;
border-style : solid;
border-color : #000000;
}
Modifications :
La marge extérieure margin-top de chaque éléments de la liste(menu), avait la valeur "-1", ce qui permettait la justaposition de la bordure basse de l'élément du dessus avec la bordure haute de celui du dessous, modifiée à une valeur "1" pour un léger décalage de façon à faire apparaître toutes les bordures de chaque élément.
Epaissir la bordure border-width à 2px
Variantes :
Si vous mettez ces 2 valeurs à "0", vous obtiendrez un bloc avec la couleur du fond, possible également de mettre le fond en transparence en mettant background : # seul le style des liens du menu sera pris en compte et le fond de la partie "Cadre" apparaîtra
Partie "Menu > liens"
| 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 | |
| Marge intérieure gauche | padding-left | Dimension (ex: 10px) |
Code CSS de cette partie
#menu ul li a
{
width : 170px;
line-height : 25px;
color:#003366;
background : #EBEDAB;
font-size : 10pt;
font-family : Arial;
padding-left : 3px;
}
Sur cette règle je change la marge intérieure gauche padding-left, pour dégager légérement le lien de la bordure en lui donnant la valeur "3px".
Partie "Menu > liens au survol"
| 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 | ||
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Verdana, Arial, Trebuchet MS | |
| Marge intérieure droite | padding-right | Dimension (ex: 10px) | |
| Marge extérieure gauche | margin-left | Dimension (ex: 10px) |
Code CSS de cette partie
#menu ul li a:hover
{
background : #009999;
color:#FFFF00;
text-decoration : none;
font-size : 11pt;
font-family : Verdana, Arial, Trebuchet MS;
padding-right:3px;
margin-left:3px;
}
Sur cette règle j'ai changé les couleurs du texte et du fond pour les différencier des autres liens.
Facile avec la palette qui est à votre disposition en cliquant sur "Choisir" dans l'assistant, ici dans cette présentation elle est déactivée.
Pour l'exemple j'ai rajouter les attributs pour modifier le texte la taille font-size et la police font-family.
Egalement une marge intérieure droite padding-right de 3px pour compenser celle de gauche mise dans la règle précédente, ce qui aura pour effet de mettre le texte au milieu du fond en couleur.
Puis pour affiner la présentation et décoller le lien de la bordure, j'ai mis une marge exterieure gauche margin-left de 3px.
Dans "Modification directe du CSS" ajouter les 4 lignes ci-dessus en rouge.
Les possibilités du CSS sont nombreuses, cet exemple le prouve et en plus si vous ajouter tous les attributs utiles, pour changer les valeurs, avec l'assistant DizPerso c'est un jeu d'enfant.
Partie "Menu > titres"
| 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 | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
Code CSS de cette partie
#menu h2
{
background : #004000;
color : #EEF5FA;
width : 170px;
height : 25px;
margin-top:25px;
font-size : 15px;
font-family : Trebuchet MS, Arial, Verdana;
border-width : 2px;
border-style : solid;
border-color : #33FF99;
text-align : center;
}
Déjà dans cette règle la marge extérieure haute margin-top ajoutée avec une valeur de "25px".
Pour mettre en harmonie avec les bordures avec celles des liens, j'ai mis border-width à la valeur de "2px"
Puis grâce à la palette couleur j'ai modifié la couleur de cette bordure.
Dans "Modification directe du CSS" je rajoute la possibilité de changer de police de caractère, en mettant cet attribut : font-family.
Astuces
Dans la "Partie Menu liens au survol".
Pour changer les couleurs du lien au survol de la souris, mettre la couleur de votre choix dans les attributs :
- Couleur de fond background
- Couleur de texte color
Voir le résultat sur cette page.
Ceci est réalisable dans les autres parties contenant des liens et où existe une règle pour les liens au survol.
