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]
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
Hardy-wwe site : Hardy-wwe.blog4ever.com/ | le 04/04/2009 à 11:51:56
Alors Merci pour ton aide la dernière fois, j'ai une nouvelle question à te demander j'ai vu sur dertain blog (dont ton autre blog) que tu as modifier les lien et rajouter des chose dans la barre de menu comme tutorial etc... comment faire ?
Merci d'avance bonne journée
PapyClic le 04/04/2009 à 17:44:10
Bonjour Hardy
Je ne peux pas d'expliquer comment faire, vas sur BRICABRAC voir mes tutos(4) sur: Barre Plus
h t tp://bricabrac.blog4ever.com/blog/lirarticle-490-969211.html
Essaies de te débrouiller avec ça.
Bon WE
Khawla site : http://winx-winxclub.blog4ever.com | le 02/05/2009 à 22:23:46
Bonjour,
Je voudrais savoir comment ajouter une autre barre, par ex: il y a "Accueil" "Articles" "photos" "Forum" dans les barres, alors moi je voudrais ajouter un autre élement, est-il possible avec la version gratuite? Si oui, comment l'ajouter?
Merci,
Khawla.
PapyClic le 02/05/2009 à 22:45:25
Bonsoir Khawla
Désolé! en version gratuite, non, il faut l'accès aux bordures. Mais tu peux sur chaque article en haut mettre un bouton avec un lien.
Bonne soirée
khawla site : http://winx-winxclub.blog4ever.com | le 03/05/2009 à 14:07:33
C'est pas grave PapyClic, en tout cas je te remércie beaucoup pour tout ce que tu fais pour nous.
Au fait tu as dis ça: Mais tu peux sur chaque article en haut mettre un bouton avec un lien.
Ca m'interesse, mais je n'ai pas bien compris la phrase.
Merci,
Khawla.
PapyClic le 03/05/2009 à 18:05:53
Bonjour Khawla
Tu peux te servir de mon générateur de liens en mettant un image de bouton ou une autre, que tu trouveras sur Internet. Regardes dans les derniers articles, "Liste des générateurs" et tu ouvres le "Générateur de liens texte ou image", tu crées le liens avec image et tu colles le code généré, en haut des aricles dans le composeur en mode HTML.
Bonne continuation
Khawla site : http://winx-winxclub.blog4ever.com | le 12/06/2009 à 22:31:51
Bonsoir PapyClic,
Encore au sujet de la barre, pourrais-tu m'aider STP ? Voici mon problème:
J'aimerai changer la barre en image.
Mais je n'y arrive pas.
Si tu connais une astuce.
Mais je vais comme même chercher sur Bric à brac.
Merci d'avance.
Khawla.