Les éléments de la partie "Barre"
ACCUEIL <<< Tests de localisation <<<
Dans les règles de CSS gérant les éléments de la barre, j'ai changé différentes couleurs sur cette page pour rendre repérable l'éléments géré par l'attribut. J'ai donc rajouté de la couleur au fond pour bien visualiser sa taille et son emplacement, puis si vous survolez avec la souris les liens la couleur de fond et de bordure change.
Partie "Barre"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) |
CSS de cette règle :
#barre
{
width : 768px;
height : 30px;
margin-top : 5px;
background:#33FF99; /* attribut ajouté vert clair */
}
Partie "Barre > liens"
| 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 |
CSS de cette règle :
#barre a
{
background : #006600; /* vert foncé */
color : #FFFF00; /* jaune */
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #FFFF00; /* jaune */
text-align : center;
display : block;
}
Partie "Barre > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir |
CSS de cette règle :
#barre a:hover
{
background : #FF0000; /* rouge */
border : 1px solid #006600; /* vert foncé */
}
Astuces
Le code groupé de bordure n'est pas accessible dans l'assistant, il doit être mis directement dans le CSS. Si vous souhaitez pouvoir le modifier dans l'assistant il faut le rentrer sur 3 lignes dans le CSS direct et elles seront créées dans l'assistant.
Exemple :
border-width : 1px;
border-style : solid;
border-color : #006600; /* vert foncé */
A Voir...
Pour voir toutes les règles de CSS concernant la "Partie Barre" [lien]
Egalement voir cet article [lien] qui contient quelques modifications sur la partie "Barre"
Article ajouté le 2008-05-08 , consulté 124 fois
Commentaires
Liens
Voir les articles de la catégorie " Tests de localisation "Afficher une version imprimable de cet article
Retour aux articles
