INFOBULLE + OMBRE

[Kyou]

Bonjour à tous.
Voilà, j'aurai deux questions à vous poser. J'aimerai faire un cadre avec de l'ombre intérieur, qui que l'ombre soit uniquement que sur les côtés, et le bas. Je ne sais vraiment pas comment faire justement. Je me demandais si c'était possible, et si "oui" comment ?

Après, j'aimerai savoir comment faire une sorte d'infobulle qui monte sur le côté, comme sur cet exemple là, au niveau du QEEL : one last day. Je voudrais le reproduire, mais de le faire apparaître sur un autre côté, seulement je ne connais pas le code.

Merci de votre écoute, et de votre attention.
A bientôt, Cordialement.

[Matriochka]

Bonjour,

Je rappelle qu'une seule question par sujet est autorisée, afin de favoriser les recherches ultérieures. Je vous invite à lire : - Règles générales du forum - Charte de ce forum

Attention la prochaine fois à bien séparer tes deux demandes

Pour la première, c’est possible, oui, il suffit d’utiliser ceci dans ton CSS :

Code:

box-shadow:1px 1px 1px #COLOR;

Pour plus d’informations :
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html


Concernant ta deuxième question, tu parles de la zone où on voit les membres du mois, dans le Qui est en ligne ?

[Kyou]

Oh merci beaucoup. Et d'accord, je séparerai les deux questions la prochaine fois. Je ne voulais pas poser plusieurs questions sur plusieurs sujets, c'est pour ça.

Edit : J'ai l'ombre, mais l'endroit ou y a pas d'ombre est au mauvais endroit. J'aurai voulu tout en haut du cadre pour qu'elle puisse s'accorder avec mon image.

Pour la deuxième question, c'est par rapport aux images, lorsqu'on passe le curseur par dessus, on voit une infobulle qui apparaît, mais qui s'affiche par le bas. Je parle de ça uniquement.

[Matriochka]

Edit : J'ai l'ombre, mais l'endroit ou y a pas d'ombre est au mauvais endroit. J'aurai voulu tout en haut du cadre pour qu'elle puisse s'accorder avec mon image.

Oups, pardon, j’ai mal compris ta demande. Bon, alors à ce moment, c’est ce code-ci :

Code:

box-shadow:-1px -1px 1px #COLOR;

(On met des valeurs négatives pour inverser la position)

PS : N’oublie pas de remplir les champs de ton profil afin que l’entraide soit plus rapide

Je vais te préparer un mini-tutoriel pour "l’infobulle", je reviens te poster ça par la suite. En attendant, n’hésite pas à me dire si c’est OK pour l’ombrage.

[Kyou]

Il manque un côté à présent, je te montre (:
https://2img.net/r/ihimizer/img547/4350/sanstitre1te.png

PS : J'ai rempli mon profil.

J'ai hâte de voir le mini tutoriel (:

[Matriochka]

Ah d’accord, tu voulais à l’intérieur ! Désolée, j’ai mal lu ton premier message…

Tien, ce générateur devrait t’aider (pour maintenant et dans l’avenir, donc garde-le sous la main) :
http://debray.jerome.free.fr/index.php?outils/Generateur-de-box-shadow-css3

[Kyou]

D'accord, merci beaucoup !!
J'attends à présent, ton mini-tutoriel (:

[Matriochka]

Bien, alors on va créer la partie HTML, tout d’abord. Elle va se présenter ainsi :

Code:

<div><img src="image_ici"><div>Texte à afficher</div></div>

Donc, concrètement, on a :
- Une première div qui contiendra l’image et l’infobulle à afficher
- Notre image
- Et enfin, une deuxième div dans laquelle on insérera l’infobulle

On va donner un nom à nos deux div pour pouvoir les styliser par la suite dans le CSS :

Code:

<div id="slide_content"><img src="image_ici"><div id="slide_info">Texte à afficher</div></div>

=> J’ai appelé slide_content la première div, qui contient l’image et l’infobulle
=> Et slide_info la seconde div, qui représente l’infobulle à faire glisser sur l’image

Donc jusqu’ici, rien de compliqué… Mais rien qui fonctionne, car tout va se passer dans le CSS, maintenant

On va commencer par mettre du style sur le premier élément qu’on a créé : slide_content :

Code:

#slide_content {
    width:***px; /* largeur de ton image */
    height:**px; /* hauteur de ton image */
    position:relative;
    overflow:hidden;}

Là, je te donne un code de base, donc tu peux ajouter des lignes par la suite si tu veux plus de style. L’important ici, c’est de remplacer **px par les valeurs indiquées. width pour la largeur, height pour la hauteur.

Ensuite, on passe à notre deuxième div, slide_info, qui va contenir l'infobulle à faire glisser :

Code:

#slide_info {
     background-color:#FFFFFF; /* couleur de fond de l'infobulle */
     height:**px; /* hauteur de l'image */
     width:***px; /* largeur de l'image */
     margin-bottom:-**px; /* marge par rapport au bas - même valeur que "hauteur de l'image" */
     bottom:0;
     left:0;
     position:absolute;
    -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;}

Donc là, même chose, tu renseignes la hauteur et la largeur de ton infobulle. Évidemment, puisqu'on veut que celle-ci vienne glisser sur l'image, il faut impérativement que les valeurs soient les même que pour le premier élément. Si tu as mis 40 pixels de largeur sur l'élément slide_content, tu mettras aussi 40 pixels sur slide_info. Pour margin-bottom, c'est pareil, la valeur doit correspondre à la hauteur de l'image. Donc, si tu as mis 40 pixels de hauteur, et bien tu mettras 40 pixels sur margin-bottom

Grâce à ces lignes, on a caché notre infobulle. On va maintenant la faire apparaître au survol, avec une toute petite ligne tout simple :

Code:

#slide_content:hover #slide_info {margin:0;}

Voilà Si tu as tout bien suivi et tout bien rempli, ça devrait fonctionner. J'ai testé chez moi, sur mon forum de tests, donc il ne devrait pas y avoir d'encombre. Tiens-moi au courant. Si tu as un problème, envoie-moi les codes que tu as créés, je les vérifierai.

[Kyou]

Je vais tester sur mon forum. J'aurai juste une question, est-ce qu'elle sort du bas de l'image l'infobulle, ou non ?

[Matriochka]

est-ce qu'elle sort du bas de l'image l'infobulle

C’est-à-dire ?

Ce que je t’ai donné là te permettra de faire exactement le même effet que sur le forum que tu as montré, donc :
une image, sur laquelle, au survol, on a un petit panneau avec un texte qui coulisse vers le haut

[Kyou]

D'accord !! Je vais tester cela alors (:
Oh j'aimerai poser une question sur un codage qui m'a de suite interpeller lorsque je suis revenu sur le forum, sur la notifications. J'ai trouvé que c'était une excellente idée. J'aurai savoir si vous expliquez comment faire la même chose sur le forum, ou vue que c'est recent, vous préférez ne le communiquez à personne, et dans le cas présent je comprendrai !

[Matriochka]

Tu parles de la barre en haut, avec les notifications ?
Tout est ici => https://forum.forumactif.com/t345469-nouveautes-forumactif-centre-de-notifications-toolbar-gestion-amelioree-des-templates-etc

Mais attention, cette question n’a rien à voir avec la demande en cours. la prochaine fois, pense à créer un sujet pour chaque question que tu as à poser (si celles-ci ne se rejoignent pas).

J’attends de tes nouvelles pour le tutoriel donné plus haut

[Kyou]

Oui, je rencontre un soucie. J'aimerai que l'infobulle n'apparait seulement lorsque je passe la souris dessus. Alors que là justement, elle y est même avant. :/

[Matriochka]

Envoie-moi tous les codes que tu as mis. Ça ne devrait pas faire ça en principe.

[Kyou]

Ça me fait ça, par exemple :
http://solving-murder.forumactif.org/t3-uc#5

D'accord, le voici :

Spoiler:

[Matriochka]

Là :

Code:

 margin-bottom:-1px;

Il faut mettre -100px à la place de -1px

[Kyou]

On le voit toujours :/
http://solving-murder.forumactif.org/t3-uc#5

[Matriochka]

Remplace ce que tu as actuellement par (pour slide_content) :

Code:

#slide_content {
 width:100px;
 height:100px;
 position:relative;
 overflow:hidden;
}

J’ai passé la hauteur de 200 pixels vers 100 pixels ^^

[Kyou]

Oh ça marche ^0^
Merci beaucoup d'avoir résolu mon problème !

[Matriochka]

Mais de rien, ravie d’avoir pu t’aider

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[Kyou]

J'aimerai savoir un dernière chose qui m'intrigue :
Pourquoi lorsqu'on enlève :

Code:

 bottom:0;
 left:0;

Le code ne fonctionne plus ? o:
J'ai juste voulu par curiosité le retirait, mais ça m'a surpris de voir que cela ne fonctionnait justement.

[Matriochka]

Il faut garder cette partie, oui, sinon ça ne fonctionne plus.

En fait, ces deux lignes te permettent de déplacer l’infobulle selon l’image. Donc ici, on met 0 pour que l’infobulle soit complètement cachée. Si tu mets 50 à la place de 0, par exemple, ton infobulle apparaîtra dans l’image.

[Kyou]

Oh je viens de comprendre, mais par exemple si je devrais changer pour le voir apparaitre du haut vers le bas. Je devrais mettre :

Code:

top : 0
left : 0
margin-top: -100px

Je suis désolé, si je te prend de ton temps.
Je vais faire une formation, et j'essaye de comprendre (:

[Matriochka]

Tu as tout compris, bien joué !

[bugsbuny]

Bonsoir, je souhaiterais installer l'info bulle + l'option du passage de la souris sur l'image ou il y a la photo et il y apparaît les infos concernant la personne ou la souris est posée ( photo en noire / blanche comme sur la capture d'écran en spoiler ).

J'ai vu des codes plus haut dans le topic mais je ne sais pas ou les installer exactement.

Pour être plus précis, voici le l'url du forum ou les idées seraient les bienvenues pour améliorer mon forum : http://onelastkiss.bbfr.net/

Je dépose une capture d'écran pour être plus explicite, heu, je l'espère du moins

Capture ci-dessous en spoiler

Spoiler:

Je vous remercie.

Bonne soirée.

[Matriochka]

Bugsbuny, merci de créer ton propre sujet Tes diverses demandes ne correspondent pas à la demande initiale de Kyou.