AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Double Infobulle ainsi que hover

Double Infobulle ainsi que hover  posté le :
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><!--Contenu Rectangle 1-->
 </span></a>
   </article>
<article class="IRL">

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

</div>

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

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
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"> <!--Rectangle Background-->
<a href id="RRPG1"> <!--Lien Premier Rectangle--><article class="RPG"> <!--Onglet 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> <!--Titre Onglet-->
  <span>
    <b>Titre 1</b><!--Contenu Rectangle 1-->
  </span></a>
    </article>
<article class="IRL">

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

</div>

Pour les deux premiers, je comprends pas ta question xD.
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
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)
Nin'gyou Korosu
avatar
Codeur UltrActif
Messages : 349
Coda'Points : 659
Date d'inscription : 17/07/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
Cet exactement ça ! Merci Nin pour le mémento !
Et gros merci pour Élu !

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
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;
}
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
Je te remercie !
Mais apparemment j'ai fait une erreur... Tu peux m'aider ?

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

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
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à Smile
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
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

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
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 (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"> <!--Rectangle Background-->

<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
Nin'gyou Korosu
avatar
Codeur UltrActif
Messages : 349
Coda'Points : 659
Date d'inscription : 17/07/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
Le code est fonctionnel, c'est tout bon Wink
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
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

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
C'est un peu décalé ? Les carrés ?
(Mais de rien ^^)
Nin'gyou Korosu
avatar
Codeur UltrActif
Messages : 349
Coda'Points : 659
Date d'inscription : 17/07/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
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 ?

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
Tu es sûr que ton code est correct ? Je pense qu'il y a une erreur pour que ça affiche ça ahah
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
Doudou a vérifié, chez lui aussi sa affiche ça :/

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Re: Double Infobulle ainsi que hover  posté le :
Coucou Smile

On en est où de ce problème ?
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Double Infobulle ainsi que hover  posté le :
Terminé ^^'.
Merci à tous !

_________________
Praecursator
avatar
Animateur
Messages : 159
Coda'Points : 443
Date d'inscription : 14/09/2016

Niveau en programmation
HTML/CSS:
0/0  (0/0)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: L'entraide dans cet univers :: Besoin d'aide ? :: SOS - code-
Sauter vers: