Quelques modifications pour voir l'action des attributs CSS.
Exemple de présentation de la barre de menu, après ajout de certains attributs, dans "Modification directe du CSS", deuxième onglet du "DizPerso".
Chaque partie est repésentée par le tableau de l'assistant et la règle compléte utilisée pour réaliser la présentation de la "Barre" sur cette page.
Ceci devrait vous permettre de constater les nombreuses possibilités qui vous sont offertes par "DizPerso" vous apprendrez en douceur les rudiments du CSS.
J'ai mis dans les règles l'attribut pour mettre une image en fond de barre et de lien, pour créer une apparence "boutons", voir l'article suivant [lien].
Partie "Barre"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge intérieure haute | padding-top | Dimension (ex: 10px) | |
| Marge intérieure gauche | padding-left | Dimension (ex: 10px) | |
| Marge intérieure droite | padding-right | Dimension (ex: 10px) | |
| Marge intérieure basse | padding-bottom | Dimension (ex: 10px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Marge extérieure gauche | margin-left | Dimension (ex: 10px) | |
| Marge extérieure droite | margin-right | Dimension (ex: 10px) | |
| Marge extérieure basse | margin-bottom | 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
{
background : #33FF99;
background-image : url(http://);
background-repeat : repeat;
width : 505px;
height : 30px;
padding-top : 5px;
padding-left : auto;
padding-right : auto;
padding-bottom : auto;
margin-top : 5px;
margin-left : 220px;
margin-right : 5px;
margin-bottom : 5px;
border-width : 1px;
border-style : double;
border-color : #006600;
}
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
CSS de cette règle :
#barre ul
{
list-style-type : none;
}
Partie "Barre > élements"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
CSS de cette règle :
#barre li
{
float : left;
}
Partie "Barre > liens"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| 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 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 |
CSS de cette règle :
#barre a
{
background : #004000;
background-image : url(http://);
background-repeat : repeat;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 20px;
font-size : 11pt;
font-family : Arial;
border-width : 1px;
border-style : solid;
border-color : #FF6600;
text-align : center;
display : block;
}
Partie "Barre > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles | |
| Couleur de fond | background | Choisir | ||
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | ||
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | ||
| Décoration du texte | text-decoration | |||
| Taille de la police | font-size | ex: 10pt | ||
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS | ||
| Couleur du texte | color | Choisir | ||
| 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:hover
{
background : #C5D5A7;
background-image : url(http://);
background-repeat : repeat;
text-decoration : none;
font-size : 12pt;
font-family : Arial;
color: #004000;
border-width : 1px;
border-style : solid;
border-color : #004000;
}
Astuces...
Dans le cas où vous souhaiteriez supprimmer cette "Barre Menu", comme nous affichons que les liens avec l'attribut display;block; dans la règle #barre a , il suffit de mettre la valeur none à la place de block comme ceci : display: none;
A Voir...
Autre page dans DizTest à voir si vous ne l'avez pas encore consultée [lien]
Dans BRIC A BRAC également la barre apparence de boutons [lien1] [lien2]
Un site très utile Aidenet à consulter, 3 liens sur les attributs utilisés dans la page actuelle.
Propriétés des [bordures]
Propriétés des [marges internes]
Propriétés des [marges externes]
Article ajouté le 2008-05-14 , consulté 232 fois
Commentaires
angel02 site : CHEZANGELJOJO.blog4ever.com | le 23/05/2008 à 20:46:34Bonjour PapyClic,
J'ai bien regardé le schéma BARRE et j'aimerais avoir quelques explications: Marge intérieur gauche, droite et basse pourquoi tu as écrit "AUTO"!
Merci pour tes explications
Bonne journée
PapyClic le 24/05/2008 à 12:03:50
Bonjour Angel
Dans la présentation de la "Barre" de cette page "auto", n'a aucune action, par contre quand une valeur est présente dans l'Assistant DizPerso, l'attribut reste dans le formulaire, ça évite de retourner dans le CSS direct pour remettre les lignes. C'est le premier article, il y aura une suite... patience.
Pour les marges, je suis entrain de faire une présentation, en attendant regardes les liens dans : "A Voir... "
Bonne continuation
Liens
Voir les articles de la catégorie " Barre de Menu "Afficher une version imprimable de cet article
Retour aux articles
