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.
| 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
{
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".
| 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
{
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
{
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
| 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
{
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
{
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.
| 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
{
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
le 25-05-2008 à 11:01:07
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
le 25-05-2008 à 11:36:13
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
site/blog
le 25-05-2008 à 22:54:14
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
le 29-05-2008 à 09:04:15
Comment mettre un gif dans la partie menu ?
Exemple: comme tu as mis sur ton blog le gif "new"
Merci d'avance.
Marc.
le 29-05-2008 à 10:51:30
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
site/blog
le 29-05-2008 à 18:41:33
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
site/blog
le 04-06-2008 à 14:40:46
le 04-06-2008 à 15:18:56
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... @+
site/blog
le 04-06-2008 à 19:03:29
merci pour ton conseil sa a super bien marché. encore merci a++ et super ton blog.
le 04-06-2008 à 20:06:56
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
le 04-06-2008 à 20:11:38
Que ferions nous sans ton blog !
Bonne soirée.
le 18-12-2008 à 19:09:31
site/blog
18-12-2008 à 21:25:03
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.
site/blog
le 24-03-2009 à 19:17:47
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
site/blog
le 25-03-2009 à 18:27:39
site/blog
25-03-2009 à 22:23:27
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
site/blog
le 15-06-2009 à 13:35:36
Merci Papyclic de ces précieux conseils, je viens de mofifier la colonne de gauche.
Bonne journée.
le 17-06-2009 à 17:00:19
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 !!
site/blog
17-06-2009 à 18:09:18
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.
site/blog
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
site/blog
13-07-2009 à 16:56:57
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
site/blog
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 ! ^^
site/blog
16-07-2009 à 21:29:29
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
site/blog
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 !
site/blog
le 05-12-2009 à 14:16:01
site/blog
le 06-12-2009 à 15:15:09
le 06-12-2009 à 15:59:05
Il faut que tu enlèves l'image de fond dans la partie, Menu > liens pour que ce soit transparent
ou si tu veux que l'image du lien soit complète, il faut ajouter en direct à la règle #menu ul li a
cette ligne display:block;
Bonne continuation
site/blog
le 06-12-2009 à 17:24:45
site/blog
le 10-02-2010 à 14:01:56
merci pour toutes ces explications, script et autres...
mille, mille merci.
Toutefois,2 petites questions :
1° quand je vais sur le lien de mon article, le lien "survol" ne se fait que sur la partie texte et non pas sur tout le bouton ? et je ne suis pas arrivée à trouver des infos pour mette une image ...
2 ° comment créer une liste de rubrique sur la gauche aussi. J'aimerai y mettre des bannières de site ou blogs en références avec mon activité.
peux-tu m'aider ?
merci pour ton aide
salutations
nath
le 10-02-2010 à 16:59:39
Merci pour ton commentaire et d'apprécier mon travail. Par contre je ne peux pas répondre à toutes tes questions ici, le mieux serait d'aller sur le forum d'aide de Blog4ever, plus facile pour te répondre et en plus tu pourras peut-être trouver déjà des réponses à tes questions qui ont été déjà posées.
Donc @+ sur le forum
site/blog
le 11-05-2010 à 00:59:45
Juste un petit coucou pour te féliciter de ce travail de titan que tu as accompli ... c'est impressionnant pour qui débutes dans ce monde mystérieusement chinois;-)
J'espère que ton déménagement s'est bien passé et que tu aimes ton nouvel environnement.
Au plaisir de te revoir, bon retour parmi nous Cat
site/blog
le 16-08-2010 à 14:53:55
Tous d'abord permets moi de te dire que ton blog est super !!
Mais j'ai un petit problème si on peut dire sa comme sa ...
En faite j'aimerais que mon menu de gauche apparaisse Horizontalement ...
Comment faire ??
site/blog
16-08-2010 à 16:05:01
Comme ton blog est protégé par un mot de passe, j'ignore le modèle de ton blog et le nombre d'éléments du menu, donc je répondrai sur le forum quand tu m'auras permis l'accès à ton blog.
Sinon comment veux-tu que l'on t'aide ?
@++
site/blog
21-01-2011 à 10:51:04
Bonjour ,
Catégorie Menu vertical gauche:peux-t-on mettre dans l'ordre alphabétique ?
Ceci dans la page d'accueil .
Merci de me répondre .et bonne journée à vous .
site/blog
21-01-2011 à 11:33:57
Il est préférable de poser ce genre de question sur le forum de B4E, pour plus de détail. Mais en gros on peut classer les catégories par "poids", donc pour l'ordre alphabétique il faut organiser ce poids par rapport aux lettres de l'alphabet.
Bonne continuation
site/blog
le 07-11-2011 à 13:11:00
Je viens de créer un blog il y a peu à partir d'un modèle prédéfini et voulant le faire également en version Anglaise, je n'ai pas trouvé d'autre moyen que d'en créer un 2ème, celui-ci en Anglais et d'y mettre des liens pour aller de l'un à l'autre. Ca fonctionne très bien et je pense que je vais m'en contenter.
Seulement je voudrais, sur le blog en Anglais, pouvoir mettre les titres du menu de gauche (Photos, toutes les photos, diaporama, statistiques, etc...) en Anglais.
Je voudrais également, comme je l'ai fait sur les petits drapeaux et la photo de la page d'accueil, pouvoir mettre un petit texte (Accueil et Home) sur le titre des 2 blogs, visible au survol de la souris.
Je n'ai trouvé nulle part le moyen de faire ces 2 modifications, ni sur votre blog, ni sur le forum d'aide de B4E.
Est-ce que tout cela est possible alors que je suis toujours pour le moment en version "gratuite" ?
Merci par avance du temps que vous voudrez bien consacrer à me répondre et bravo pour toutes vos explications que j'ai pu glaner ça et là sur votre blog.
Cordialement
Philip
le 07-11-2011 à 14:20:24
Ce n'est pas très simple, il faut écrire un peu de code Javascript et en version gratuite ça ne facilite pas les choses.
Je vais y réfléchir, je te tiendrai au courant, mais sois patient car j'ai beaucoup de travail en cours... ce challenge m'intéresse, donc je vais essayer.
Dans le cas d'un oubli !!! un petit rappel par mail.
Bonne continuation
site/blog
le 07-11-2011 à 17:51:26
Tout d'abord, merci d'avoir répondu aussi rapidement, la diligence de nos jours se faisant de plus en plus rare...! et vu la somme de questions que l'on vous pose dans toutes les rubriques, leurs réponses doivent représenter un travail à plein temps !!! Chapeau bas !
Par ailleurs, je ne suis pas peu "fier" (joke!) que mes questions que je pensais "simplettes et dignes d'un débutant" aient trouvé le moyen de vous interpeller, vous le "pro" du blog et du web !
C'est presque un honneur ! (re-joke!)
Quoiqu'il en soit, merci de vous y intéresser. Je patienterais donc dans l'attente d'une solution si solution il y a. Je ne maîtrise pas le Javascript, mais je serais à même de recopier quelques phrases de code si j'en ai l'exemple.
Ne venant pas ici tous les jours, il serait peut-être plus simple de me répondre par mail lorsque vous aurez eu le temps de vous pencher sur la question, si toutefois cela ne vous pose pas problème de répondre de cette manière.
Merci encore de votre soutien.
Bonne continuation également.
Philip