Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

gifs et "bulles" dans la barre de menu

40 appréciations
Hors-ligne
Thalie coucou si tu passes par là tu comprendras ce que je veux dire (et peut-être que c'est toi qui répondras, du coup?)
J'ai lu sur le forum comment mettre une image dans la barre de menu, et comment ajouter un module, etc, mais ce que je cherche, ce n'est pas à mettre une image de fond mais à faire un peu comme Thalie (blog "Chez Thalie" dont je suis une abonnée) :
elle a fait un effet BD avec sa barre de menu, en mettant ses titres de rubriques (accueil, sommaire, album) dans des bulles dites par une petite Bigouden.

Je suis allée sur le diz de Papiclic dans la rubrique barre, le tutoriel pour ajouter un module ou modifier la barre en elle-même, mais donc ce n'est pas ça que je veux.
Mon besoin d'info n'est pas urgent, c'est juste que je voudrais avoir la procédure CSS dans mes notes car pour le moment, j'en suis à l'étape de recherche d'une petite image sympa, j'ai fait une sélection, et quand j'aurai décidé de l'image, j'aimerais pouvoir la traiter pour qu'elle apparaisse à côté de chaque titre (accueil, etc).
Pour la bulle, je ne veux quand même pas copier Thalie, mais le procédé m'intéresserait bien pour une autre zone de mon blog.

Merci (et encore une fois ce n'est pas urgent)

Dernière modification le jeudi 19 Février 2015 à 00:26:14

4055 appréciations
Hors-ligne

C'est possible avec ce code: Dans css personnalisé
nav{
 background:transparent;
border-left:0;
border-right:0;
 box-shadow: none;
}

nav ul{
margin-left: -100px;

}
nav a {
    background-image: url("http://sd-4.archive-host.com/membres/images/158659267713403930/mon_blog/design_service/thalie_biniou/bulle.png");
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0;
    color: #ffffff;
    display: block;
    font-family: Trebuchet MS;
    font-size: 14pt;
    height: 70px;
    margin-left:35px;
    margin-right: -110px;
    margin-top: 0;
    padding-top: 50px;
    text-align: center;
    text-decoration: none;
    width: 300px;
}


Mais il faudra changer l'image de Thalie qui fait 300x120px









1338 appréciations
Hors-ligne
Bonsoir Emsi,

Merci à Simon qui est passé te répondre avant moi .

Je viens tout juste de lire ton message désolée.

Pour faire les bulles tu peux soit faire avec Photofiltre Studio, soit avec Paint Shop Pro, ou autre logiciel de graphisme de ton choix. Il y a même peut-être je ne sais pas des petits logiciels gratuits qui permettent aussi de faire des bulles de dialogue.

Merci d'avoir trouvé mon idée intéressante.
Elle est très pipelette ma petite bretonne contrairement à moi :ptdr:

N'oublies pas de nous montrer le résultat sur ton blog.

Je file je ne suis pas en forme du tout aujourd'hui.

Bonne soirée. :bye:

40 appréciations
Hors-ligne
Merci beaucoup Thalie d'avoir pris la peine de répondre malgré une forme pas au top. Je t'avais envoyé aussi un mail perso il y a une semaine, c'était pour tout autre chose, par le biais de ton formulaire, mais je ne suis pas sûre que ça ait marché

Bien noté pour les bulles : ce sera peut-être pour une rubrique précise, car pour la page d'accueil ça ne cadrerait pas avec le style que j'adopte pour le moment.
Oui je viendrai montrer mon blog quand il sera au point, et en expliquer la finalité. Là il change tous les jours

Comme toujours... merci simon ! (je le dis si souvent que pour faire court je ne vais pas tarder à synthétiser en "Mersimon"
Je note avec les images de Thalie pour l'exemple mais bien sûr je comprends que je devrai mettre mon url d'image
Comme toujours, je copie-colle ce CSS soigneusement dans mon dossier "infos utiles CSS" (qui commence à être plein de bonnes choses)

40 appréciations
Hors-ligne
PS : je reviens juste pour une question : quand je vois les codes ci-dessus, la règle indique "nav" comme destination. Mais quand je vais dans le diz de Papiclic, tout ce qui touche à cette barre commence par dièse puis barre (puis ul, etc).
Les 2 marchent bien. Et c'est vrai que dans ma fenêtre CSS (celle qui s'ouvre quand on clique sur "avancé" (après menu "Mise en page" puis bouton  "CSS personnalisé" pour aller mettre une règle), c'est vrai que je vois les 2 qui cohabitent gaiement , donc comment faire le choix entre tel ou tel début de règle ?
Merci !

4055 appréciations
Hors-ligne


Les appellations dépendent du CSs et le tien c'est nav

On va donc écrire nav { puis nav ul{ nav li{  etc........en sachant que chaque partie commande une partie de " bare-navigation.

Dans d'autres css c'est la règle barre qui commande et on va écrire #barre {

:sol:


1338 appréciations
Hors-ligne
Bonjour Emsi,

Je me permets de t'envoyer une capture d'écran pour te montrer qu'il y a un petit souci de réglage au niveau de ta barre de navigation. Il y a aussi l'écriture en blanc qui ne va pas au niveau de ta barre de navigation c'est illisible.



Perso je trouve que ton fond de page n'est pas assorti. A mon avis ça ne va pas avec ta bannière.

Bon courage et bonne continuation.

Bon dimanche.

Bien amicalement.


Coucou @Simon@, bon dimanche.

4055 appréciations
Hors-ligne
Thalie
@EMSI
Je ne vois pas l'écriture en blanc mais il y a un décalage de la barre. ( nav )
Voici une correction.


nav a {  
  background-image: url("https://static.blog4ever.com/2014/10/786280/meow-40-pcent.png");   
 background-repeat: no-repeat; 
   border-style: solid;  
  border-width: 0;  
  color: #53839f;  
  display: block;   
 font-family: Trebuchet MS;  
  font-size: 14pt; 
   height: 70px;  
  margin-left: 110px; 
   margin-right: -180px; 
   margin-top: 0;  
  padding-top: 50px; 
   text-align: center;  
  text-decoration: none;  
  width: 300px;
}
nav {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-left: 0 none;
    border-right: 0 none;
    box-shadow: none;
}


40 appréciations
Hors-ligne
Pas d'inquiétutde, Thalie, Simon : vous avez dû tomber sur une de mes trrrrrrès nombreuses interventions de la matinée (j'y ai passé 2 heures), quand je n'avais pas encore fait tous les paramétrages.
J'ai dû en particulier faire pas mal d'aller-retour "blog-photo filtre-blog" pour aboutir à la bonne dimension de mon image chat. Et pendant ce temps bien sûr, les modifs n'étaient pas finies. Et j'ai fait pas mal d'essais de couleur. Puis j'ai joué avec le CSS pour résoudre le problème dont je parle plus bas
La couleur de l'écriture, c'est le plus facile pour moi, donc je le gardais pour la fin car je sais que ça ne me pose pas (trop) de problème.
Mais c'est vraiment super gentil à vous2 d'être allé voir !


MAIS...
En revanche, il y a un truc que je ne m'explique pas, c'est concernant lez zones de la barre (et ce, bien que je sois allée voir et revoir le diz de Papiclic "partie barre").
J'explique :
- avant de faire les modifs avec "le code Thalie" (!) ma barre avec écriture des  rubriques (accueil, photos, forum) était bleue.
- une fois que j'ai eu mis le "code Tthalie" (re !) et modifié les images et les couleurs, j'ai eu le surprise de voir que la zone bleue était toujours en place (simplement, un peu diminuée en hauteur, et sans les 3 mots accueil photo forum toutefois, qui eux se trouvaient bien sur ma nouvelle barre verte

Bref : mes petits chats se retrouvaient avec la tête dans du bleu et le corps et les pattes dans le vert.

Je vous jure que j'ai voulu de moi-même régler la chose : j'ai modifié quasiment tout ce qui s'appelait margin, padding, border, color,  top, bottom, et tutti quanti, mais rien n'y a fait !
De guerre lasse, j'ai fini pas remplacer la couleur bleue qui restait par la couleur verte du reste de ma "barre Thalie", ce qui fait qu'enfin, à présent, la barre qui se trouve sous mon image d'en-tête est totalement verte, mais c'est une illusion, puisqu'en fait elle est constituée de 2 zones juxtaposées, de même couleur

Et je ne sais pas identifier ces zones.

Et j'aurais donc une suggestion (Simon dis-moi si elle est ridicule ou si elle aurait sa place dans la rubrique Suggestions) :
serait-il possible, quand on est en mode gestion, que le passage sur une zone fasse apparaître en survol le nom de cette zone en langage CSS ? Avec un tel système, mon pointeur m'aurait dit le nom de mes sacrées 2 zones et j'aurais su où intervenir dans mon CSS.
En plus ce serait très pédagogique, car à force de voir les noms, on s'y habituerait.
Et bien sûr, ceux (les forts en CSS) que ça gênerait, pourraient désactiver ces bulles d'aide (ou alors ça ferait comme sur certains site : la bulle ne s'activerait qu'après quelques secondes statiques sur la zone en question, et ne resterait de toute façon pas des heures à l'écran. Bref, comme cela se voit sur pas mal de sites, non ?...
Oui ?.. .:id1:
Euh...
...

Dernière modification le dimanche 22 Février 2015 à 18:22:04

40 appréciations
Hors-ligne
Ah ben désolée pour le drôle de ferrage à gauche de mon message c-dessus, mais bon, je n'y reviens pas, ça reste lisible (hum...)
J'en profite néanmoins pour dire que je trouve bizarre que mon CSS commence par "image" sans qu'on dise la zone (j'ai ajoute */ image d'en-tête*/ , j'espère que ça ne va pas nuire au fonctionnement et je trouve aussi bizarre de ne pas voir le nom de cette image.... Normal ?

Dernière modification le dimanche 22 Février 2015 à 18:11:03

4055 appréciations
Hors-ligne
:b1:

Je vois que tu as bricolé mais ce n'est pas ça .

Voici un code pour la barre. (remplacer les codes nav existants )

/*partie barre navigation*/
nav{
background:#D2FA66;
border-left:0;
border-right:0;
box-shadow: none;
}

nav ul{
margin-left: -20px;

}
nav a {
background-image: url("https://static.blog4ever.com/2014/10/786280/meow-40-pcent.png");
background-repeat: no-repeat;
border-style: solid;
border-width: 0;
color: #000;
display: block;
font-family: Trebuchet MS;
font-size: 14pt;
height: 70px;
margin-left:35px;
margin-right: -110px;
margin-top: 0;
padding-top: 50px;
text-align: center;
text-decoration: none;
width: 300px;
}



40 appréciations
Hors-ligne
Hum Simon, avant de lire ton post ci-dessus je suis retournée m'amuser ce matin. Sûrement que c'est du bricolage mais c'est sacrément instructif de s'amuser avec le CSS, juste pour voir ce que ça modifie quand on change tel ou tel truc (mais encore une fois ça gagnerait tellement de temps si on avait le système de faire apparaître le nom de la zone sur laquelle on passe avec le pointeur, comme je le suggère ci-dessus. tu en penses quoi ?)

Avant de lire ton post, donc, : j'ai supprimé un module (je trouvais inutile le renvoi aux articles, qui faisait un peu double emploi chez moi avec les rubriques à gauche).
J'ai supprimé les encadrements des blocs modules, car en fait, la raison pour laquelle ils étaient apparus, c'était que je voulais juste mettre un filet très fin (1 ou 2 px) sous la barre de navigation (mais pas encadrer les blocs).
Je veux bien que tu me dises où je dois agir pour mettre ce filet (en fait le même, très fin, que j'ai mis - déjà grâce à toi - sur les côté de la zone principale.

Je vais maintenant regarder ton code.
MERCI !...
PS : que signifie la fonction "display" (j'ai joué avec pour trouver toute seule, ça me duplique mon chat en les mettant par 2, l'un sur l'autre)

40 appréciations
Hors-ligne
Bon me revoilà. J'ai donc modifié la ligne dans nav a où tu as indiqué color dièse 000. Mais je voudrais quand même comprendre pourquoi ma barre était en 2 tranches (une bleue, qui était restée d'avant, bien que plus étroite, et la nouvelle, verte).
Merci...

1338 appréciations
Hors-ligne
Bonjour Emsi,

Je ne sais pas si cela peut t'être utile, je me suis amusée à te faire un fond de page.



Bravo je viens de voir que tu as super bien avancé pour ton blog.

Dommage pour l'instant ta bannière ne se démarque pas de ton fond de page.

Bonne continuation, bon courage.

Bonne journée.

4055 appréciations
Hors-ligne


La barre restait en couleur car c'était la partie nav.

Pour faire un trait en bas c'est " bottom" en haut c'est " top "
aside .bloc-cote { 
   border-bottom: 1px solid #000 !important;   
 border-top: 1px solid #000 !important;
}
article { 
   border-top: 1px solid #000!important;    width: 660px;
}



@Thalie:  jolie fond !


40 appréciations
Hors-ligne
Coucou Thalie, et un immense merci de m'avoir autorisée à prendre ton code, car tu ne peux pas savoir quelle "école" ça a été pour moi. Donc merci à toi, et aussi encore et toujours à Simon qui me fait si gentiment avancer lui aussi en me donnant des codes (et non pas en me disant "il y a une faute, trouve-la" - car justement si j'appelle à l'aide c'est que je sais qu'il y a une erreur et que j'ai déjà passé des heures à chercher)
Depuis que je dispose de codes assez complets pour mon propre blog, je m'amuse beaucoup, je comprends ENFIN certaines choses, et effectivement la page d'accueil peut ainsi évoluer.

Donc encore et toujours un GRAND MERCI à vous
Mon but est d'avoir plusieurs pages d'accueil, à la fois pour que les gens de styles différents se sentent bien au "Chat blogué" et plus égoïstement pour moi, pour me définir, car je suis très éclectique. Je suis à l'aise dans plein de styles différents, tout comme je suis à l'aise avec plein de gens très différents (qui peut-être, eux, ne se
supporteraient pas si je les invitais ensemble !)
(et au passage, j'adore  ta page d'accueil  "chez Thalie". Bon d'accord je suis Bretonne, ça aide, mais de toute façon elle est super et tu as mérité ta récompense) !

MERCI POUR TA COMPOSITION avec les petits chats ! J'en fais une capture car... peut-être la retrouveras-tu si je fais une rubrique chat, ou une rubrique créative (j'ai une fille qui aurait sa place dans cette rubrique, je mettrai un de ces jours des photos)
Pour une rubrique aussi bien chat que créative, j'ai  en particulier une paire d'escarpins (italiens) "chats" qui te feront mourir de rire (tiens je vais mettre la photo tout à l'heure en rubrique photo !)


Oui pour la bannière, je suis d'accord et.... c'est exprès, hi hi !  En fait cette bannière est même c'est même une partie de la photo de mon fond de page. Mais la partie "oiseaux" que je voulais en bannière ne tombait pas à cet endroit, donc la "ruse" que j'ai trouvée a été de faire une capture de cette partie puis de la mettre comme image d'en-tête

Oh la la,  et voilà que j'écris encore un roman... Y en a qui doivent se dire "ouf, pour une fois je n'ai rien à y voir, elle ne demande rien"... (mais qui donc ? )

Bon, allez, vite vite je vais mettre mes escarpins chats en photo !!!! Merci encore Thalie
Et merci Simon
Et de façon générale, merci à tous ceux qui sans le savoir m'aident avec les questions qu'ils posent et les codes qu'ils mettent en exemple,  ça c'est vraiment génial pour avancer !

PS : tu verras que les photos sont un peu surdimensionnées, je les diminuerai plus tard.

Dernière modification le mardi 24 Février 2015 à 07:14:31

40 appréciations
Hors-ligne
Hum, Simon, ta tranquillité aura été de (très) courte durée :
bon, dans ton code j'ai supprimé bottom et j'ai gardé top (sinon les 2 faisaient doublon et le  trait était trop gros). et j'ai aussi modifié la couleur.

Mais :comment faire pour avoir le trait "top" pour mon bloc du haut ? Il n'apparaît pas (ce bloc était "Et vous qu'en pensez-vous" mais en attendant ta réponse je le remplace par le visuel horloge, qui fait donc office de trait); Mon but est en effet d'un peu (1 px) séparer le vert de la barre des chats du vert du menu latéral).
Quand tu m'auras éclairée je remettrai mon horloge en bas (et j'en chercherai une autre plus en harmonie de couleurs avec ma page, car ce bleu dur heurte un peu. Mais je voudrais les heures du monde, je trouve ça sympa)

Dernière modification le mardi 24 Février 2015 à 07:13:48

4055 appréciations
Hors-ligne

mettre un trait dans la barre.
tu peux enlever ( pas la peine de mettre width: 660px; )
article { 
   border-top: 1px solid #000!important;    width: 660px;
}
____________________________________________

nav {    height: 130px!important;    position: relative;    text-transform: uppercase;    z-index: 4;    border-bottom: 1px solid;}



40 appréciations
Hors-ligne
Aaaah Simon oui je m'étais mal exprimée : en effet depuis le début ce que je cherche à faire c'est souligner la barre, de façon à faire cette petite rupture continue sur toute la longueur inférieure de la barre ! Je pense que c'est ça que j'aurai avec ton code, mais je dois partir là, je verrai plus tard.

Donc je n'aurai pas besoin de trait "top" pour mon premier bloc (qui va redevenir le bloc de mes catégories)
Mais histoire de comprendre, je reviens à ma question sur le trait top du1er bloc :  pourquoi ne s'appliquait-elle pas à mon premier bloc ? C'est parce qu'une règle de la "barre Thalie" avait priorité et empêchait le trait de se mettre ?
Merci !


contra

Dernière modification le mardi 24 Février 2015 à 07:17:48

1338 appréciations
Hors-ligne
Bonjour Emsi,

Bravo tu avances bien pour le design du chat blogué.

De rien pour le code de mon blog, si il a pu t'aider à faire ta propre barre.

Si le fond que je me suis amusé à faire te plaît tu peux l'enregistrer sur ton ordi.

Tu sais pour faire mon design cela m'a pris aussi beaucoup de temps, et Simon ainsi que Nana et  ont toujours eu beaucoup de patience avec moi. Je suis très lente à apprendre, mais j'ai toujours envie de faire des progrès.

Je n'ai jamais appris le langage informatique. Mais à la longue de faire, défaire, refaire, j'ai quand fini par réussir à comprendre certaines choses.

Comme chaque CSS est différent, je ne sais pas quoi te dire concernant ta question au sujet du trait que tu cherches à mettre si j'ai bien compris en dessous de ta barre de navigation. Je ne voudrais pas t'induire en erreur.

Tu n'as pas fait un blog test pour apprendre sans faire de bêtises sur ton blog ?

N'oublies pas non plus de bien sauvegarder tout ton design sur ton blog. Sauvegarde Editeur CSS, Editeur HTML, page d'accueil, bordures de page. Tu mets tes sauvegardes dans ta boîte à fichiers.

Merci @Simon@ avec les explications que tu donnes à Emsi je continue aussi à progresser. Merci pour tout ce que tu nous apprends.

Bonne continuation.

Bonne journée.






40 appréciations
Hors-ligne
Merci Thalie pour ces recommandations. Pour ton dessin, quand tu dis que je peux l'enregistrer, c'est en faisant une capture de l'image, ou bien je peux enregistrer directement ton fichier ?

Oui un blog test, c'est ce que j'aurais dû faire, mais je n'y ai pas pensé. C'est bête car en l'état actuel, je suis tellement occupée par le design que du coup, je n'avance pas les articles (c'est pourquoi je ne fais pas de "pub"' pour mon blog, car les gens seraient déçus. Ce serait trop long à t'expliquer ici, mais ce blog est né suite à un projet social visant les personnes isolées, projet pour lequel pourtant j'avais eu de solides échos à la radio et dans la presse, au-travers d'émissions où j'étais invitée (dont carrément France Inter), et qui a avorté pour des raisons purement administratives.
C'était surréaliste, et je raconterai sûrement la chose dans un article.
Je vise une tranche d'âge a priori "+ de 65 ans" (d'où page d'accueil assez conventionnelle, mais aussi désir d'autres pages d'accueil) mais peut-être que mon projet va évoluer.
En attendant, j'ai bien pensé le fermer, afin d'y travailler sans qu'il soit vu, mais ça m'agace de le rouvrir à chaque fois. Alors tant pis, je continue comme ça : je vais à présent me consacrer un peu plus au contenu écrit.

En tout cas oui, l'équipe ici est FANTASTIQUE :sol:! Quand j'en parle à des amis, tout le monde est étonné, car cette plateforme est peu connue, et les gens marnent sur des plateformes connues où ils ne disposent que de FAQ, ou de forums par forcément très réactifs, pour avancer
Encore merci, Thalie !

PS  pour le trait sous la barre, pas de souci  Saint Simon (tiens, comme Simon Templar, dit" Le Saint", je n'y avais jamais pensé...) est intervenu avec un code magique, que je vais de ce pas essayer !

1338 appréciations
Hors-ligne
Bonsoir Emsi,
Pour l'image de fond que j'ai fait hier, si tu veux tu peux l'enregistrer directement sur ton pc, en faisant enregistrer sous.
J'arrête ma tablette pour ce soir.
Bonne soirée.

4055 appréciations
Hors-ligne
Oui c'est bien tout ça mais les chats sont mal centrés.

Voir en gras.  mettre - 70 px

nav a {
    background-image: url("https://static.blog4ever.com/2014/10/786280/meow-40-pcent.png");
    background-repeat: no-repeat;
    border-style: solid;
    border-width:0px;
    color: #000;
    display: block;
    font-family: Trebuchet MS;
    font-size: 14pt;
    height: 80px;
    margin-left:170px;
    margin-right: -70px;
    margin-top: 0;
    padding-top: 50px;
    text-align: center;
    text-decoration: none;
    width: 220px;
    
}



40 appréciations
Hors-ligne
Non non Simon, mes chats ne sont pas mal centrés car... ils ne sont pas centrés du tout En fait, je confesse que je n'aime pas trop ce qui est "parfait" et donc j'aime bien qu'ils soient comme ça. Comme j'écris ferré à gauche, et que le titre de mon blog est lui aussi ferré à fauche, j'aime bien que mes chat-chat-chat soient eux aussi ferrés à gauche, en quelque sorte.
Je vais donc les laisser comme ça.

En revanche, il me reste 2 ou 3 choses à faire avant de commencer à faire connaître mon blog :
1°) faire en sorte d'avoir, dans mon bloc photo du menu latéral, un petit rectangle où défileraient les photos de mon album, comme sur ce blog (de mes enfants) :http://retourverslemonde.blogspot.fr/
J'aime beaucoup  leur système car il permet de voir des photos en assez petit mais suffisamment grand quand même pour bien voir, et si on clique sur une photo, ça ne déclenche pas une mise à l'écran en grand format de la photo :  ça renvoit à un album (picasa en l'occurrence, ce qui en serait pas le cas pour moi : moi ça renverrait à ma rubrique mes photos).
Du coup, je voudrais supprimer la ligne "diaporama", car je n'aime pas le système de ce diaporama (je préfère celui que je viens de dire)
NB : j'ai bien vu un tuto chez Papiclic, mais ce n'était pas le genre de diaporama que je souhaitais. Si tu peux m'orienter...

2°)  je cherche partout un topic sur l'organisation d'un forum associée  à un blog (déco d'en tête de page, conseils de gestion, en quoi ça risque éventuellement de faire double emploi avec le blog, enfin bref, vraiment un topic "spécial forum-dans-un-blog)) mais ma recherche n'a rien donné.  Sur le forum Blog4ever, ne recherche  "forum associé à un blog" ou "forum dans un blog", etc, (j'évite bien sûr le mot "forum" tout seul !) renvoit ... au forum blog4ever (et à l'expression "il faut être membre de ce forum pour poster").
Bon : c'est peut-être parce que finalement, les pages forums sont des pages comme les autres. Mais je trouverais intéressants des conseils donnés avant d'ouvrir un forum (j'ai peut-être mal cherché)

Voili voilou; Après quoi, je commencerai à parler de mon blog autour de moi et aux journalistes qui m'avaient contactée à l'époque de mon projet avorté (post ci-dessus)

Hum. Encore 500 lignes.. Tais-toi, Emsi .:cht:

Dernière modification le mercredi 25 Février 2015 à 22:07:03
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Personnalisation avancée du CSS.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6065 autres membres