Création d'infobulle fixe

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

Résolu Création d'infobulle fixe

Message par Cheeralex le Mar 11 Oct 2016 - 18:13

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : //
Lien du forum : http://western-bastards.forumactif.org/

Description du problème

Bonjour !

J'aimerai me lancer dans la création d'infobulle fixe, un peu comme des onglets donc mais au survol des images, le texte apparaît dans un cadre et quelque soit l'image survolé, le texte reste dans ce cadre. Je sais que cela est possible, cependant, j'ignore la procédure. J'ai déjà essayé de faire des infobulles avec une position: fixed, sans succès. De plus, j'aimerai éviter qu'en éditant ma page d'accueil, tout le code se détruise. Du coup, si quelqu'un peut m'aider à les construire, ça serait top. Surtout qu'idéalement, j'aimerai une transition assez sympathique pour chaque apparition de texte ::fleur::

Merci par avance pour votre aide ♥


Dernière édition par Cheeralex le Ven 14 Oct 2016 - 8:54, édité 1 fois

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'infobulle fixe

Message par tupac le Mar 11 Oct 2016 - 22:28

Bonsoir Cheeralex,

Je pense avoir un exemple de ce que vous souhaitez.
En haut a gauche du forum, des modifications seront a faire selon vos besoins.


Dernière édition par tupac le Jeu 13 Oct 2016 - 0:11, édité 1 fois

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Création d'infobulle fixe

Message par Cheeralex le Mer 12 Oct 2016 - 10:37

Bonjour Tupac !
Au niveau de la transition pour l'apparition de l'infobulle, c'est dans ce genre-là, par contre... Idéalement, j'aimerai que l'infobulle ne suive pas les images que l'on survole mais qu'elle reste toujours au même endroit, genre dans un cadre en dessous des images. Est-ce que c'est faisable ? **

Merci d'avance ♥

edit : j'ai réussi à faire mes infobulles fixes o/ mais par contre j'aimerai bien réaliser une plus belle transition que l'apparition assez brutale du cadre blanc :/ Ainsi que... dès que j'actualise ma page, l'infobulle se retrouve plus bas de son emplacement initiale --' Est-ce qu'il manque quelque chose dedans pour qu'elle ne se barre pas dès que je modifie la page d'accueil ou que je touche au css ?

HTML
Code:
<center><a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>farabriver</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>beraberel</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>redhairedmoira</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>witm</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>padme</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>uc</span></a></center>

CSS
Code:
* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.fobu {
  position: relative;
  color: #576186;
  text-decoration: none;
}

a.fobu span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.fobu:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}
a.fobu:hover span {
  display: inline; /* on affiche l'infobulle */
  position: fixed;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  background-color: white;
  top: 440px; /* on positionne notre infobulle */
  left: 877px;

  background: #transp;
  width: 190px;
  height: 75px;
  color: #576186;
  padding: 3px;
}

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'infobulle fixe

Message par tupac le Jeu 13 Oct 2016 - 0:17

Bonsoir Cheeralex,

J'ai apporté les modifications aux infobulles, dites moi si ça vous convient.
Je vous ai envoyé le lien du forum par MP.


tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Création d'infobulle fixe

Message par Cheeralex le Jeu 13 Oct 2016 - 20:14

Merci beaucoup Tupac ♥
J'ai répondu à votre mp I love you

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex 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