JeuWeb - Crée ton jeu par navigateur
[RESOLU] Utilisation de plussieurs class [CSS] - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [RESOLU] Utilisation de plussieurs class [CSS] (/showthread.php?tid=1512)

Pages : 1 2

[RESOLU] Utilisation de plussieurs class [CSS] - Single Dark - 25-07-2007

Bon je vous passe les détails car c'est pas important.

Alors, je veut utiliser plussieurs class.

Je montre le code.

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

<img src="image/batiments/fond.jpg" alt="" height="418" width="600">

<a class="info" href="">
<img class="p_main" src="image/batiments/mine_fer.gif" alt="Mine de fer">
<span>Voici là mine de fer.</span>
</a>

</div>

Et le css :

Code :
<style type="text/css">
a.info{
    position: relative;
}
a.info span {
   display: none;
}
a.info:hover {
   background: none;
   text-decoration: none;
}
a.info:hover span {
   display: inline;
   position: absolute;
   white-space: pre;
   top: -30px;
   left: 20px;
   background: #161A1B;
   color: #97aae6;
   padding: 10px;
   border: 1px solid #444444;
   z-index: 10;
}
</style>

Code :
.p_main {
    position:absolute;
    z-index:2;
    left:260px;
    top:106px;
}

Donc içi le problème c'est que les class doivent s'annuler, ou quelque chose du genre.
L'affichage est décaler, et si j'enleve le 'class="info', ca va, mais j'ai pas mon infobulle.
J'ai eu beau trouné le problème dans tous les sens, et pas de reponse.

Merci

RE: Utilisation de plussieurs class [CSS] - Roworll - 26-07-2007

sous la déclaration a.info:hover span, remplace le display:inline par display:block.
Sauf erreur de ma part :
- Display-inline indique que ton élément doit s'inscrire sans coupure avant et après. Il sera donc intégré à son parent.
- Display-block indique que ton élément doit s'inscrire avec coupure avant et après. Il est donc désolidarisé du parent.

RE: Utilisation de plussieurs class [CSS] - Single Dark - 26-07-2007

J'ai testé en remplacant le 'in-line' par 'block', et c'est là même chose...

Merci comme même...

RE: Utilisation de plussieurs class [CSS] - barst - 26-07-2007

Citation :a.info:hover span {
display: inline;
position: absolute;
white-space: pre;
top: -30px;
left: 20px;
background: #161A1B;
color: #97aae6;
padding: 10px;
border: 1px solid #444444;
z-index: 10;
}

Met le padding à 0, si tu ne veux pas de décalage.

RE: Utilisation de plussieurs class [CSS] - Single Dark - 26-07-2007

Non plus, içi le padding correspond à l'affichage de l'infobulle. Hors içi c'est mon image, qui est décallée.

Merci, pour vos reponse, même si elles ne fonctionnent pas...

RE: Utilisation de plussieurs class [CSS] - Nessper - 26-07-2007

Y'aurai moyen que tu fasses un imprime ecran pour qu'on voit le décalage parce que là à priori tout va bien et c'est chaud de voir ce qui ne va pas ?

RE: Utilisation de plussieurs class [CSS] - Single Dark - 26-07-2007

OK, je fait çà !!!


Sans décalage :
[Image: sansdecalsb1.png]

Avec décalage :
[Image: avecdecalan6.png]

Voilà, donc l'image est totalement décalé...

RE: Utilisation de plussieurs class [CSS] - Nessper - 26-07-2007

ah ouais gros décalage en effet.
On va essayer d'une autre manière.
Mets ton span en dehors de ton a
définis lui son style et mets
Code PHP :
<?php 

<span id="bulle" style="display:none;">
ensuite sur ton a
Code PHP :
<?php 

<a href="#" onmouseover="Element.show('bulle');return false;" onmouseout="Element.hide('bulle')";>

Je sais pas si ça peut régler ton problème mais ça vaut le coup d'essayer. tiens moi au courant

RE: Utilisation de plussieurs class [CSS] - Single Dark - 26-07-2007

Je n'ai plus de décalage, mais l'infobulle ne s'affiche pas...

Le problème avec ta technique c'est que l'infobulle n'est pas paramétrable.

RE: Utilisation de plussieurs class [CSS] - Nessper - 26-07-2007

Excuse j'ai oublié de te dire que pour faire marcher le javascript de cette façon tu as besoin de prototype.js (disponible ici). D'ailleurs grâce a prototype tu peux paramétrer ton infobulle très facilement en lui rajouter des classes.
Petit exemple : tu veux rajouter la classe .bulle_bleue à ta bulle de base
Code PHP :
<?php 

<a href="#" onmouseover="Element.show('bulle');$('bulle').addClassName('bulle_bleue'); return false;" onmouseout="Element.hide('bulle')";>

et voilà.


Sinon pour les infobulles je te conseille d'utiliser overlib.js qui propose des bulles très facilement paramétables.
Le lien vers overlib : overlib.js
Le lien vers une bonne doc en français : manuel overlib.js