INFOBULLE + OMBRE

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 11:41

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.


Dernière édition par Kyou le Lun 18 Fév 2013 - 22:29, édité 1 fois

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 12:17

Bonjour,
Je rappelle qu'une seule question par sujet est autorisée, afin de favoriser les recherches ultérieures.

Je vous invite à lire :

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

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 ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 12:20

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.

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 13:32

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 Wink

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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 14:08

Il manque un côté à présent, je te montre (:
http://img547.imageshack.us/img547/4350/sanstitre1te.png

PS : J'ai rempli mon profil.

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

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 14:35

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

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 15:21

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

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 15:50

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 Wink

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 Wink

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à Very Happy 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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 17:14

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 ?

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 17:16

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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 17:42

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 !

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 17:44

Tu parles de la barre en haut, avec les notifications ?
Tout est ici => http://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 Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 18:16

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. :/

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 18:17

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 18:20

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

D'accord, le voici :
Spoiler:
Code:
#slide_content {
 width:100px; 
 height:200px;
 position:relative;
 overflow:hidden;
}

#slide_info {
 background-color:#FFFFFF;
 width:100px;
 height:200px;
 margin-bottom:-1px;
 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;}

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

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 18:23

Là :
Code:
 margin-bottom:-1px;
Il faut mettre -100px à la place de -1px

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 19:03

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

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 19:04

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 ^^

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 19:26

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

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 19:27

Mais de rien, ravie d’avoir pu t’aider Very Happy
Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • 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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 19:29

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.

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 19:32

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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Kyou le Dim 17 Fév 2013 - 20:18

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 (:

Kyou
****

Messages : 307
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Dim 17 Fév 2013 - 20:24

Tu as tout compris, bien joué ! Very Happy

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par bugsbuny le Dim 17 Fév 2013 - 20:55

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 Siffleur

Capture ci-dessous en spoiler

Spoiler:

Je vous remercie.

Bonne soirée.

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: INFOBULLE + OMBRE

Message par Matriochka le Lun 18 Fév 2013 - 12:12

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum