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.
Commentaires
nat le 25/05/2008 à 11:01:07bonjour,
j'ai un gros soucis, impossible de mettre du texte dans le menu ou autre d'ailleurs.
Alors choisir la taille d'écriture, la couleur etc c'est super mais si on peut pas y mettre du texte ...
merci de votre aide
PapyClic le 25/05/2008 à 11:36:13
Bonjour nat
Qui es-tu?
Tu me donnes aucune coordonnée, comment veux-tu être dépanné(e)?
DizTest est un blog de test du DizPerso, pour les problèmes dans Blog4ever, il y a le forum d'aide.
adresse : test.blog4ever.com/blog/forum-2.html
Pour ta gouverne les textes du menu sont les titres des catégories ou articles créés dans ton espace de gestion.
Après tu pourras revenir ici, pour te documenter sur l'assistant de configuration DizPerso si tu l'utilises.
Bon dimanche
yahve site : yahve.blog4ever.com | le 25/05/2008 à 22:54:14
Bonjour PapyClic!
Je tenais a vous dire Felicitations pour le Dixtest. Je trouve que c'est bien detailler pour moi qui suis vraiment, vraiment, vraiment nulle.
Je peux te le dire sincerement, je commence a m'ameliorer, je ne suis pas encore a point mais je vais y arriver. Encore une fois Felicitations pour votre precieux aide a nous pauvre dinosaure.
Que Dieu Vous benisse
Yahve
Marc & Faby le 29/05/2008 à 09:04:15
Bonjour Papy,
Comment mettre un gif dans la partie menu ?
Exemple: comme tu as mis sur ton blog le gif "new"
Merci d'avance.
Marc.
PapyClic le 29/05/2008 à 10:51:30
Salut Marc
Tu vas te faire gronder!!! attention!!!
:lol: Voir tuto de Nana en 2006
h t tp://test.blog4ever.com/blog/forum_msg-2-23543-25629.html
Merci quand même pour ta visite... @+
Cordialement
angel02 site : CHEZANGELJOJO.blog4ever.com | le 29/05/2008 à 18:41:33
Bonjour PapyClic,
Ton blog pour nous aidez avec le Dizperso est super!
Juste une petite question tu écris souvent au sujet du CSS mais moi je n'y comprends rien de rien, je peux réussir à comprendre le dizperso. Est-ce que l'on peut se faire un blog à notre convenance sans se servir du CSS? Le CSS et ces codes c'est compliqué et il n'y a pas de place pour l'erreur sinon tout est vraiment à refaire!
Si tu as le temps réponds-moi!
SUPER BLOG, MERCI POUR TON SUPPORT
Hiroku site : mangafury.blog4ever.com | le 04/06/2008 à 14:40:46
Salut Papyclic, j'ai une question, je voulais savoir si il était possible de mettre le "menu vertical gauche" a droite ( en faite j'y suis arrivé mais la pub reste a gauche ^^' ) .
PapyClic le 04/06/2008 à 15:18:56
Hello Hiroku
J'avais un doute pour la PUB, je viens de faire un essai sans problème la PUB suit.
Dans "Modification directe du CSS" dans la règle #menu mettre float:right; ... ce n'est pas géré par l'assistant mais je pense qu'il l'accepte.
J'ai fait mon essai sur une page, à voir si cet attribut est toléré avec une valeur différente par le système automatique.
Tiens moi au courant... @+
Hiroku site : mangafury.1s.fr | le 04/06/2008 à 19:03:29
re salut papyclic,
merci pour ton conseil sa a super bien marché. encore merci a++ et super ton blog.
PapyClic le 04/06/2008 à 20:06:56
Bonsoir Hiroku
Bravo tu as réussi le déplacement du menu de gauche à droite. Par contre il faut modifier les marges extérieures de la Partie "Contenu", je vais indiquer ce code dans un article et je vais mettre un lien sur ton blog comme exemple.
Merci d'avoir testé pour moi.
@+ Bonne soirée
Hiroku le 04/06/2008 à 20:11:38
RE papyclic, en effet j'ai modifié les marges extérieur du contenue car si non sa se superposait ( c'était à prévoir mais rien de bien grave ). Bonne idée d'indiquer le code car d'autres voudront peut être le faire.
Que ferions nous sans ton blog !
Bonne soirée.
RGVI le 18/12/2008 à 19:09:31
Salut j'essaye de créer une barre de menu a droite mais je n'y arrive pas pourtant je lis diz perso et bric a brac pourrait tu m'expliquer en mieux pourtant je suis bien tesinstructions je dois rater quelque chose merci rgvi
PapyClic le 18/12/2008 à 21:25:03
Bonsoir RGVI
Je ne comprends pas tu parles de barre de menu à droite, sur cet article c'est le menu vertical, rien à voir avec la barre menu des modules. Si tu veux mettre le menu vertical à droite il ya un autre article pour ça. Je pens que c'est ce que tu as raté comme tu dis.
Contactes-moi par mail et patientes je suis surbooké.
A plus.
Hardy-wwe site : Hardy-wwe.blog4ever.com/ | le 24/03/2009 à 19:17:47
Bonjour,
Alors voilà j'ai un problème de lien au survol donc;
J'ai mit en background au survol une image j'ai fait tout se qu'il faut
background-image: (l'url de mon image);
et regarde sur mon blog quand on passe la souris il y a l'image mais pas en entière dans la case et sur les autre blog (le tien aussi) sa s'affiche en entier et même les couleurs par défaut comme blanc (#ffffff) ne s'affiche pas en entière dans la case
merci d'avance pour ton aide; bonne soirée
Hardy-wwe site : Hardy-wwe.blog4ever.com/ | le 25/03/2009 à 18:27:39
Je préçise que la couleur de lien au survol fait sa à tout les blog que je possède ...
PapyClic le 25/03/2009 à 22:23:27
Bonsoir Hardy
Il faut que tu ajoutes en "Modification directe du CSS, à la règle suivante... #menu ul li a
cet attribut... display : block;
Bonne soirée
J-Luc site : j-lucweb.com | le 15/06/2009 à 13:35:36
Boujour à toutes et à tous,
Merci Papyclic de ces précieux conseils, je viens de mofifier la colonne de gauche.
Bonne journée.
Éric le 17/06/2009 à 17:00:19
Salut à tous !
J'ai un problème...
Je ne trouve toujours pas comment je pourrais
rajouter une parti Article pour mes catégorie et en même temps changer le nom de Article pour une autre chose ex: Jeux,etc.
Merci !!
PapyClic le 17/06/2009 à 18:09:18
Bonjour Eric
Dommage que tu ne mets pas l'adresse de ton blog, plus facile pour t'aider. Mais là en l'occurence je ne peux rien faire pour toi, sauf te dire que tu ne peux pas changer le nom du module "Article". Pour créer un nouveau module la seule possibilité, tu crées une catégorie d'article, dans le nom de la catégorie tu utilises les balises titre <h2>, ce qui va créer un faux module mais qui se présentera comme "Articles" "Photos" "Forum" etc...
ex : <h2> nom catégorie </h2>
Je trouve cette solution un peu perturbante, c'est pour cette raison que je n'ai pas fait d'article.
Bonne continuation.
Chantal_h site : aboutdemots.blog4ever.com/blog/index-331077.html | le 13/07/2009 à 14:34:47
Bonjour Papyclic !
Tout d'abord merci pour ce blog qui représente un travail titanesque !
Ensuite, voilà mon petit souci. (Aucune Urgence)
Dans mon menu vertical gauche, les puces de mes articles sont décalées (comme tout les titre menus d'ailleurs) un peu trop sur la gauche et se retrouve du coup hors cadre.
Comment pourrais-je régler ceci ?
D'avance merci.
Chantal_h
PapyClic le 13/07/2009 à 16:56:57
Bonjour Chantal
Merci pour ton commentaire et ton appréciation sur mon travail.
Pour ton souci, il faut faire la place pour les puces.
Tu dois ouvrir le deuxième onglet du Diz perso "Modification directe du CSS" et ajouter une ligne de code : margin-left : 20px;
dans la règle : #menu ul
comme ci-dessous :
#menu ul
{
list-style-type : disc;
margin-left : 20px;
}
Voilà j'espère que ton problème sera résolu, mais je n'en suis pas certain, très peu de blogueurs laissent les puces dans le menu vertical ou la barre menu, elles prennent de la place pour rien.
Dans ce cas là, il faut modifier :
--> list-style-type : none;
Bonne continuation
Chantal_h site : aboutdemots.blog4ever.com/blog/index-331077.html | le 16/07/2009 à 21:04:37
Merci PapyClic pour ton aide.
Alors, j'ai bien repéré dans le code CSS le bloc où insérer la commande que tu m'as donné, mais comme tu le pressentais, ceci n'a rien changé.
J'ai donc invalidé les puces et puis voilà !
Il n'empêche que de voir les écritures touchées la bordure gauche du cadre me chiffonne.
C'est pas génial ! Mais bon...
Merci en tous cas encore une fois et à bientôt peut-être ! ^^
PapyClic le 16/07/2009 à 21:29:29
Bonsoir Chantal
Pour dégager le texte des bords, il faut mettre une marge intérieure.
Dans le menu, à la règle : #menu ul li a
tu mets : padding-left : 3px;
Là le résultat est sûr. Comme valeur tu peux mettre plus.
Bonne continuation
Chantal_h site : aboutdemots.blog4ever.com/blog/index-331077.html | le 16/07/2009 à 22:01:40
C'est parfait !
Je confirme ! Ca fonctionne ! Et c'est bien mieux comme ça ! :D
ROYAL !... T'es ROYAL !
UN GRAND MERCI !