Double Infobulle ainsi que hover

Hey bande de simagrés (Gné ?)

Voilà je spam' le skype et le discorde avec ma fiche... Mais comme tout codeur débutant, j'ai pas toute les clés ! Voilà j'aimerais savoir :

- Quels effet je peux apporter sur mon hover
- Si je pouvais mettre plusieurs infobulle sur un seul élément !
- Comment faire pour que l'infobulle s'active lorsque je passe sur un onglet et non pas que sur mon texte
- Qu'il n'y ai pas le petit tiret en dessous de mes titres d'onglets

Je vous laisse ripailler tout en vous remerciant d'avance !

Voici mon code (Seulement le CSS et l'HTML)

Code:: ..Encadrement{
width: 805px;
height: 1205px;
background-image: url('');
position: relative;
border-radius : 5px;
border: solid 4px black;
  }
.Encadrement:hover{
  width: 805px;
height: 1205px;
background: white;
position: relative;
border-radius : 5px;
border: solid 4px black;}

section{
position: absolute;
}

.RPG{
width: 400px;
height: 140px;
float: left;
opacity: 1;
font-size: 30px;
border-bottom: solid 2px;
border-right: solid 2px;
background-image:url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
}

.RPG:hover{
width: 400px;
height: 140px;
float: left;
opacity: 1;
font-size: 30px;
border-bottom,border-right: solid 2px;
background : #d2d2d2;
}

.IRL{
width: 403px;
height: 140px;
float: left;
font-size: 30px;
  opacity: 1;
border-bottom: solid 2px;
background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg')
}

.IRL:hover{
  width: 403px;
  border-bottom: solid 1px;
  font-size: 30px;
  float: left;
  background: #d2d2d2;
  opacity: 1;
}

a#RRPG1{
position:relative;
z-index:24;
}

a#RRPG1 span{
display: none;
background-color: #d2d2d2;
width: 780px;
height: 330px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: black;
border : solid 2px;
overflow: auto;
}

a#RRPG1:hover{
z-index: 25;
color: red;
}

a#RRPG1:hover span{
display: inline;
position: absolute;
}

Code:: <div class="Encadrement">
<a href id="RRPG1">
<article class="RPG">
<h2>RPG</h2>
<span>
<b>Titre 1</b>
</span></a>
</article>
<article class="IRL">

<center>
<h2>IRL</h2>
</center>
</article>

</div>

Aperçu : http://codepen.io/Praecursator/full/kkdBOp/

3-4 réglés avec ce code -> http://codepen.io/anon/pen/edwEKE

Code:: .Encadrement{
width: 805px;
height: 1205px;
background-image: url('');
position: relative;
border-radius : 5px;
border: solid 4px black;
  }
.Encadrement:hover{
background: white; }

section{
position: absolute;
}

.RPG{
width: 400px;
height: 140px;
float: left;
opacity: 1;
font-size: 30px;
border-bottom: solid 2px;
border-right: solid 2px;
background-image:url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
padding: 0;
margin:0;
}

.RPG:hover{
width: 400px;
height: 140px;
float: left;
opacity: 1;
font-size: 30px;
border-bottom,border-right: solid 2px;
background : #d2d2d2;
}

.IRL{
width: 403px;
height: 140px;
float: left;
font-size: 30px;
  opacity: 1;
border-bottom: solid 2px;
background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg')
}

.IRL:hover{
width: 403px;
border-bottom: solid 1px;
font-size: 30px;
float: left;
background: #d2d2d2;
  opacity: 1;
}

a#RRPG1 span{
opacity: 0;
transition: all 2s;
display: none;
background-color: #d2d2d2;
width: 780px;
height: 330px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: black;
border : solid 2px;
overflow: auto;
}

a#RRPG1:hover{
z-index: 25;
color: red;
}

a#RRPG1 div:hover + span{
opacity: 1;
display: inline;
position: absolute;
}

a#RRPG2{
position:relative;
z-index:24;
}

a#RRPG2 span{
display: none;
background-color: #d2d2d2;
width: 780px;
height: 330px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: black;
border : 2px solid;
overflow: auto;
}

a#RRPG2:hover{
z-index: 25;
color: red;
}

a#RRPG2:hover span{
display: inline;
position: absolute;
}

Code:: <div class="Encadrement"> 
<a href id="RRPG1"> <article class="RPG"> 
<div style="font-weight: lighter; width: 100%; font-family: 'Times';color: black; height: 100%; margin: 0; padding: 0; text-align: center;"><h2 style="display: inline-block;">RPG</h2></div> 
<span>
<b>Titre 1</b>
</span></a>
</article>
<article class="IRL">

<center>
<h2>IRL</h2>
</center>
</article>

</div>

Pour les deux premiers, je comprends pas ta question xD.

Pour ton hover, tu veux savoir tout ce qui est possible de faire dessus ? Parce que tu peux (je pense) faire la même chose qu'avec une forme non hover ^^.
Si c'est pour avoir des idées, voilà un mémento qui résume plutôt bien tout ce qu'on peut faire niveau css sur une forme.

Pour ton autre problème, j'ai compris et je me suis déjà posée la question, mais je n'ai pas réussi Sad

(Elu, en gros il veut qu'une forme permette d'afficher plusieurs infobulles sur elle en même temps (Si je ne me trompe pas)

Cet exactement ça ! Merci Nin pour le mémento !
Et gros merci pour Élu !

Pour plusieurs infobulles sur un même élément, voici un codepen : http://codepen.io/anon/pen/dpBVOx

Ce que j'ai fait sur ton code Prae :
J'ai simplement modifié la nature de ton <h2>
Ensuite, j'ai attribué à la div le contenant une taille de 100%. Et voilà :p.

Code:: <div style="font-weight: lighter; width: 100%; font-family: 'Times';color: black; height: 100%; margin: 0; padding: 0; text-align: center;"><h2 style="display: inline-block;">RPG</h2></div>

Niveau CSS, j'ai simplement raccourci ton code (et je le raccourcis encore, code en dessous).

Code:: .Encadrement{
width: 805px;
height: 1205px;
background-image: url('');
position: relative;
border-radius : 5px;
border: solid 4px black;
}
.Encadrement:hover{
background: white; }

section{
position: absolute;
}

.RPG{
width: 400px;
height: 140px;
float: left;
opacity: 1;
font-size: 30px;
border-bottom: solid 2px;
border-right: solid 2px;
background-image:url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
padding: 0;
margin:0;
}

.RPG:hover{
width: 400px;
height: 140px;
float: left;
font-size: 30px;
border-bottom,border-right: solid 2px;
background : #d2d2d2;
}

.IRL{
width: 403px;
height: 140px;
float: left;
font-size: 30px;
border-bottom: solid 2px;
background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg')
}

.IRL:hover{
width: 403px;
border-bottom: solid 1px;
font-size: 30px;
float: left;
background: #d2d2d2;
}

a#RRPG1 span{
display: none;
background-color: #d2d2d2;
width: 780px;
height: 330px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: black;
border : solid 2px;
overflow: auto;
}

a#RRPG1:hover{
z-index: 25;
color: red;
}

a#RRPG1 div:hover + span{
display: inline;
position: absolute;
}

a#RRPG2{
position:relative;
z-index:24;
}

a#RRPG2 span{
display: none;
background-color: #d2d2d2;
width: 780px;
height: 330px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: black;
border : 2px solid;
overflow: auto;
}

a#RRPG2:hover{
z-index: 25;
color: red;
}

a#RRPG2:hover span{
display: inline;
position: absolute;
}

Je te remercie !
Mais apparemment j'ai fait une erreur... Tu peux m'aider ?

http://codepen.io/Praecursator/pen/kkdBOp

Alors, les erreurs que tu as faites sont les suivantes :
Tu as utilisé :

Code:: a#RPGInfo span:first-child{/** CSS **/}

Alors que tu dois simplement utiliser :

Code:: a#RPGInfo span{/** CSS **/}

Ensuite, ce n'est pas :

Code:: a#RPGInfo:hover span{
display: inline;
position: absolute;
}

Mais :

Code:: a#RPGInfo div:hover + span{
display: inline;
position: absolute;
}

Voilà

Et si je veux trois infobulle, il faux donc mettre le :first-child c'est ça ?

Édit après essais : j'ai du faire une erreur :/ l'infobulle.ne marché toujours pas :/

Je te remercie Wink

Bon, alors voilà l'explication du code miracle Very Happy

Déjà, j'ai viré des choses qui ne servaient plus, et peut-être qui servaient encore, parce que ton code était compliqué, désolée Double Infobulle ainsi que hover 4072454729

Double Infobulle ainsi que hover 4072454729

(Mais ça devrait être simple à remettre)

Alors, comme je te l'ai expliqué, au lieu d'utiliser une infobulles, j'ai utilisé des listes et des hovers afin que tu puisses avoir plusieurs "infobulles" sur un lien.

Ça c'est ton css de base pour tes boutons

Code:: .Encadrement{
  width: 805px;
  height: 1205px;
  background-image: url('');
  position: relative;
  border-radius : 5px;
  border: solid 4px black;
  z-index: 1;
  }
.Encadrement:hover{
  background: white;
  }

section{
  position: absolute;
}

.RPG{
  width: 400px;
  height: 140px;
  float: left;
  opacity: 1;
  font-size: 30px;
  border-bottom: solid 2px;
  border-right: solid 2px;
  background-image:url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
}

.RPG:hover{
  background : #d2d2d2;
}

.IRL{
  width: 403px;
  height: 140px;
  float: left;
  font-size: 30px;
  opacity: 1;
  border-bottom: solid 2px;
background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg')
}

Ça c'est le CSS qui concerne les listes, tu n'as normalement pas besoin d'y toucher, mets le juste à la suite de l'autre CSS :p

Code:: .IRL:hover{
  background: #d2d2d2;
}
.menu ul li {
   display: block;
   position: relative;
   float: left;
  }

  .menu li ul {
   display: none;
   min-width: 150px;
  }

  .menu ul li a:hover {
   background: #999;
  }
  .menu li:hover ul {
   /* Ici l’affichage du sous-menu */
   display: block;
   position: absolute;
  }
  .menu li:hover li {
   float: none;
  }

Ça c'est le HTML, là ça devient plus compliqué.

Code:: <link href="https://fonts.googleapis.com/css?family=Gentium+Basic" rel="stylesheet"></link>
<div class="Encadrement"> 

<div class="RPGInfo">
<article class="RPG">
<div class="Texte"><h2 style="display: inline-block;"><nav role="navigation" class="menu">
  <ul>
   <li><a href="#0" style="position: absolute; left: 110px; top: -40px; text-decoration: none; text-align: center; color: black;">RPG</a>
   <ul>
   <li><div style="position: relative; height: 300px; width: 750px; background-color: red; left:-60px; top:80px;"></div></li>
   <li><div style="position: relative; height: 300px; width: 300px; background-color: blue; top: 100px; left: -60px;"></div></li>
   <li><div style="position: relative; height: 370px; width: 370px; background-color: green; top: -170px; left:300px;"></div></li>
   </ul>
   </li>
  </ul>
</nav>
  </h2>
  </div>
  <span>

<div class="PremierRectangleRPG">
</div>

</span>
</article>
  </div>

<div class="IRLInfo">
<article class="IRL">

<h2>IRL</h2>

</article>
</div>
</div>

Si tu veux faire pareil pour "IRL", il suffit de remplacer

Code:: <h2>IRL</h2>

par

Code:: <div class="Texte"><h2 style="display: inline-block;"><nav role="navigation" class="menu">
  <ul>
   <li><a href="#0" style="position: absolute; left: 110px; top: -40px; text-decoration: none; text-align: center; color: black;">RPG</a>
   <ul>
   <li><div style="position: relative; height: 300px; width: 750px; background-color: red; left:-60px; top:80px;"></div></li>
   <li><div style="position: relative; height: 300px; width: 300px; background-color: blue; top: 100px; left: -60px;"></div></li>
   <li><div style="position: relative; height: 370px; width: 370px; background-color: green; top: -170px; left:300px;"></div></li>
   </ul>
   </li>
  </ul>
</nav>
  </h2>
  </div>

Bien évidemment tu devras changer tous les "left" et "top" car la position relative permet de placer un élément par rapport à sa position de base (Et là les deux listes n'ont pas la même (Je dis peux être n'importe quoi xD))

Si tu veux ajouter un "carré", il te suffit de rajouter :

Code:: <li><div style="position: relative;"></div></li>

Avec tout ce que tu veux dedans (Sans oublié top et left Wink

) à la suite des autres li (Avant le /ul hein !)

Voilà, je pense que c'est bon ^^.
Amuse-toi bien avec ta fiche Very Happy

Le code est fonctionnel, c'est tout bon Wink

Pour le "RPG" c'est Tip-Top, pour le "IRL" par contre ... c'est un peu décalé :/
Bref, super merci comme je te l'ai dit pour l'avancé Smile

C'est un peu décalé ? Les carrés ?
(Mais de rien ^^)

Hello !

Bon et bien super j'ai fini de coder ma fiche,
mais je ne sais pas pourquoi le truc ne s'affiche pas correctement : http://neo-rolistes.forumactif.com/h1-fiche-perso...

Comment faire ?

Tu es sûr que ton code est correct ? Je pense qu'il y a une erreur pour que ça affiche ça ahah

Doudou a vérifié, chez lui aussi sa affiche ça :/

Coucou

On en est où de ce problème ?

Terminé ^^'.
Merci à tous !