Problème Info-bulle (Profil)

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

Résolu Problème Info-bulle (Profil)

Message par Kyou le Dim 10 Jan 2016 - 23:49

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dés lorsque j'ai voulu installer le codage pour mon infobulle au profil.
Lien du forum : http://dworksdistortion.forumactif.org/

Description du problème

Bonsoir,
Je rencontre un problème lors de l'installation d'une info-bulle dans mon profil. Le soucie c'est ma div "info-champ" qui se répète sur chaque champ de profil. Du coup le style de mon CSS appliquait sur info-bulle est effectué pour chaque champ. Je vous met le template et ma feuille de style le concernant. Je vous remercie en avance de votre coup de main.

Template:
Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <imgprofil><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong><br />
            {postrow.displayed.POSTER_RANK}<br />
                          {postrow.displayed.RANK_IMAGE}<div id="info-profil">{postrow.displayed.POSTER_AVATAR}</imgprofil><br />
            <!-- BEGIN profile_field -->
                          <div class="info-champ">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div></div>
            <!-- END profile_field -->
                            {postrow.displayed.POSTER_RPG}
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>

CSS:
Code:

imgprofil {
    background: #2a396d;
    border: 1px solid #16224A;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0px 13px #09153E inset;
    display: block;
}

div#info-profil {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.info-champ {
  position: absolute;
  left: 0;
  top: 0;
  background: #2a396d;
  border: 1px dashed #17191d;
  width: 190px;
  height: 310px;
  margin-top: -320px;
  line-height:100%;
  font-size: 12px;
  padding: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -oz-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

div#info-profil:hover > .info-champ {
  margin-top: 0px;
}


Dernière édition par Kyou le Mer 13 Jan 2016 - 13:28, é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: Problème Info-bulle (Profil)

Message par Amnael le Lun 11 Jan 2016 - 1:30

Salut,

je ne sais pas si ton problème vient de là, mais en css, tu as ce que l'on appelle l'héritage.

Pour résumer si ta page est formé ainsi

Code:
<body>
  <h1>titre</h1>
  <p>texte</p>
</body>

Si tu appliques du css à l'objet body, si tu ne spécifie rien de plus pour h1 et pour p; alors par défaut h1 et p qui sont à l'intérieur de body appliqueront le même comportement.

Aussi, lorsque tu écris div#info-profil dans ton css pour moi c'est une erreur ou alors je comprends pas ce qu'il se passe.
Ton css doit commencer par # ou par . en fonction que tu travaille sur une classe ou un sélecteur, mais on ne met pas le div dans le css !!

Amnael
*

Messages : 33
Inscrit(e) le : 02/06/2012

http://bestnaruto-roleplay.forumactif.com/
Amnael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Info-bulle (Profil)

Message par Kyou le Lun 11 Jan 2016 - 1:39

Je te remercie d'y avoir répondu.
Ensuite je ne comprends pas héritage du HTML que tu parles. Ou si tu résume mon infobulle par un exemple, "imgprofil" c'est pour la décoration, qui doit etre uniquement sur l'image, le rang, ainsi que le pseudo du membre, ensuite je devais introduire une infobulle, contenant la même image et le contenu des champs du profil pour un glissement de l'image, pour y voir les champs du profil.

Bien je vais dans ce cas modifier ma feuille de style en mettant que # au lieu de div#. On verra si cela apportera quelque chose.

Kyou
****

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

http://seventies.frenchboard.com/
Kyou 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