Infobulles et code HTML (voir même CSS)

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

Résolu Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 26 Juil 2012 - 2:44

Bonsoir à tous,

Mon problème se divise en fait en 2 parties :

I] Première infobulle se retrouve "éclatée"

Tout d'abord, pour créer ces infobulles je me suis inspirée de CE topic.
A l'origine, mes infobulles apparaissent lorsqu'on passe son curseur sur l'image correspondante, donnant alors des explication sur les personnages.

Le problème en image :
Spoiler:

Les autres infobulles sont "presque" nikel, exeptée la première de la partie "modérateur" (similaire à celle de la capture d'écran, donc je ne l'ai pas mise ici). En gros seules les premières infobulles se retrouvent "éclatée".
Je suppose qu'il doit y avoir un espace quelque part qui a ou n'a pas lieu d'être, mais comme j'ai fonctionné au copié collé pour chaque infobulle, je ne comprends pas pourquoi il n'y a que la première infobulle qui pose problème et pas les autres...


II] Alignement des infobulles

Plus haut, j'ai dis que les autres infobulles étaient "presque" nikel, voici la raison du "presque" :

Spoiler:

Je voudrais que l'infobulle soit à l'emplacement des pointillées, c'est à dire à peu près centrée sous l'image qui lui correspond (ici la femme aux cheveux violets)


Ici vous voyez peut être mieux ce que je veux dire


En effet, à chaque fois l'infobulle apparait sur la droite, exactement au même emplacement, quel que soit l'image que je survole. J'ai essayé de changer mon CSS en modifiant "position : relative" en "position : absolute", mais ça a fait un truc bizarre (les images se sont superposées...).
Je tâtonne encore au niveau des codes, je commence à comprendre la logique de certains éléments mais pas encore tous ^^"


Voici mon HTML :
Code:

 [center] [b][u]Les Hauts Membres du Conseil :[/u][/b]

[img]http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg[/img]


[b]Reia[/b][/center]
[b]
[u]Role :[/u][i]Administratrice[/i]
[u]Présence :[/u] [i]A toujours un œil sur l’École[/i][/b]

        [img]http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg[/img]
      [b][center]Farfaya[/center]

[u]Role :[/u] [i]Administratrice[/i]
[u]Présence :[/u] [i]Se balade de temps à autre dans les couloirs[/i][/b]
 
        [img]http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg[/img]

      [b][center]Anikei[/center]

[u]Role :[/u] [i]Administrateur[/i]
[u]Présence :[/u] [i]Indétectable[/i][/b]
 
        [img]http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg[/img]

      [b][center]Azylis[/center]

[u]Role :[/u] [i]Administratrice[/i]
[u]Présence :[/u] [i]Toujours à son poste ![/i][/b]
 

 

Et mon CSS :
Code:
.infobulle{
          position: relative;}
       
        .infobulle .infobulle-hidden {
          display: none;  position: absolute;    visibility: visible;  z-index: 999;
          background-color:#000;
          border:3px solid #fff;
          padding:3px;
          color:#fff;
          font-size:1em;
          font-weight:bold;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          }
       
        .infobulle:hover .infobulle-hidden {
          display: block;}


J'espère avoir été suffisamment claire dans mes explications.

Merci d'avance pour votre aide ! ^^


Dernière édition par Azylis le Jeu 2 Aoû 2012 - 3:10, édité 1 fois

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 26 Juil 2012 - 20:51

up ^^"

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Ven 27 Juil 2012 - 17:46

up !

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Sam 28 Juil 2012 - 14:07

up!

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Invité le Sam 28 Juil 2012 - 14:37

Bonjour,

En "enfermant" chaque image dans une cellule de tableau et en retirant les balise <p> des bulles ça semble fonctionner:
Code:
<tr>
<td colspan="4"> <p align="center"> <Strong><u>Les Hauts Membres du Conseil :</u></strong><br /><br />
<table><tr><td></td><td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" />
<span class="infobulle-hidden">
<strong><center>Reia</center><br /><u>Role :</u><em>Administratrice</em><br /><u>Présence :</u> <em>A toujours un œil sur l’École</em></strong>
</span>
</span>
</td><td></td></tr>
<tr>
<td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Farfaya</center><br /><u>Role :</u> <em>Administratrice</em><br><u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong>
 </span>
</span></td>
<td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Anikei</center><br /><u>Role :</u> <em>Administrateur</em><br><u>Présence :</u> <em>Indétectable</em></strong>
  </span>
</span></td><td><span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Azylis</center><br /><u>Role :</u> <em>Administratrice</em><br><u>Présence :</u> <em>Toujours à son poste !</em></strong>
  </span>
</span></td></tr></table></p> </td>
</tr>
Bien sincèrement.

Invité
Invité


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

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Sam 28 Juil 2012 - 16:38

Bonjour !

Merci de m'avoir répondu, le soucis c'est que je n'aime pas du tout le rendu tableaux des images ><

Avec votre solution ça donne ceci :

Spoiler:

Alors que moi je préfèrerais cette disposition :

Spoiler:

Néanmoins, grâce à vous j'ai appris que c'était la balise <p> qui posait bel et bien problème, mais je en comprends pas pourquoi.Après leur suppression et quelques arrangements, mes bulles sont entières et le texte est à l'intérieur.

Encore merci ! Very Happy


Du coup, maintenant mon soucis est seulement la partie II : l'alignement des infobulles par rapport aux images, sans avoir à créer un tableaux dans mon tableau ^^ (j'espère que c'est possible...)

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Invité le Dim 29 Juil 2012 - 11:52

Bonjour,

Ne medemandez pas pourquoi, parce que je n'en sais rien, mais en supprimant les retour à la ligne dans le code des infobulles, il semblerait que tout fonctionne bien.
Comme ceci:
Code:
<tr>
<td colspan="4"> <center> <Strong><u>Les Hauts Membres du Conseil :</u></strong></center><br /><br />
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" /><span class="infobulle-hidden"><strong><center>Reia</center><br /><u>Role :</u><em>Administratrice</em><br /><u>Présence :</u> <em>A toujours un œil sur l’École</em></strong></span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" /><span class="infobulle-hidden"><strong><center>Farfaya</center><br /><u>Role :</u> <em>Administratrice</em><br /><u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong> </span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" /><span class="infobulle-hidden"><strong><center>Anikei</center><br /><u>Role :</u> <em>Administrateur</em><br /><u>Présence :</u> <em>Indétectable</em></strong>  </span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" /><span class="infobulle-hidden"><strong><center>Azylis</center><br /><u>Role :</u> <em>Administratrice</em><br /><u>Présence :</u> <em>Toujours à son poste !</em></strong></span></span>
 </td>
</tr>
Bien sincèrement.

Invité
Invité


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

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Lun 30 Juil 2012 - 21:45

Bonsoir,

J'ai copié puis collé le code exacte que vous m'avez donné, pourtant les infobulles n'apparaissent que sous l'image de la femme brune, quelque soit le personnage au dessus duquel passe mon curseur ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Mer 1 Aoû 2012 - 13:54

up ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Mer 1 Aoû 2012 - 16:20

bonjour,

en essayant comme ça ?

Code:
<tr>
<td colspan="4">
<div style="margin:auto;text-align:center;width:630px;"><strong><u>Les Hauts Membres du Conseil :</u></strong><br><br>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Reia</p><br>
<u>Role :</u><em>Administratrice</em><br>
<u>Présence :</u> <em>A toujours un œil sur l’École</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Farfaya</p><br>
<u>Role :</u> <em>Administratrice</em><br>
<u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Anikei</p><br>
<u>Role :</u> <em>Administrateur</em><br>
<u>Présence :</u> <em>Indétectable</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" />
<div class="infobulle-hidden"><strong><p align="center">Azylis</p><br>
<u>Role :</u> <em>Administratrice</em><br>
<u>Présence :</u> <em>Toujours à son poste !</em></strong></div></div>
</div></td>
</tr>

Remplacez le CSS :

Code:
.infobulle{
position: relative;
float:left;
}
.infobulle .infobulle-hidden {
background-color:#000;
position: absolute;
visibility: visible; 
z-index: 999;
padding:3px;
color:#fff;
font-size:1em;
font-weight:bold;
border:3px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: none; 
}
.infobulle:hover .infobulle-hidden {
display: block;
width:210px;
left:-30px;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Mer 1 Aoû 2012 - 22:23

Bonsoir !

Ah ! Là ça prends forme, merci beaucoup !

Du coup j'ai quelques petites questions, afin de mieux comprendre la manip' :
1) J'ai vu dans le CSS que ce qui est différent c'est float:left et width:210px left:-30px
J'ai bien compris à quoi correspondait width et left, mais float ça a permis quoi ?

2) Est-ce qu'il y a une différence entre la balise <center>...</center> et la balise <p align="center">...</p> ? laquelle ?

3) Pourquoi avoir utiliser la balise <div style="margin:auto;text-align:center;width:660px;">...</div> et pas une ci-dessus ?

4) Je n'ai pas très bien saisis la différence entre les balises <span>...</span> et <div>...</div>. Un coup je lis que <span> est plus utilisé pour mettre un style au texte (gras italique etc...) alors que <div> c'est plus de la mise en page ; un autre coup je lis que <span> permet de modifier un morceaux de paragraphe tandis que <div> est utilisé pour un regroupement de plusieurs paragraphes... je suis un peu perdue, car j'ai remarqué que le HTML pour l'infobulle est une <div> et non pas un <span> comme j'avais trouvé à la base.


Désolée, ça fait beaucoup de pourquoi, mais j'aimerais comprendre afin de ne pas refaire les mêmes erreurs plus tard ><

Bonne soirée et encore merci !

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Mer 1 Aoû 2012 - 23:39

bon ... la balise "span" englobe le texte , et uniquement le texte ... comme quand on surligne du texte ...

la balise "div" est un cadre de 4 cotés ...

j'ai placé les images dans des cadres "div" , qui ont la propriété de se mettre l'un sous l'autre ...

float:left leur demande de s'aligner un à coté de l'autre ...

width:210px : le cadre qui s'ouvre au survol aura la même largeur que le cadre qui l'héberge , sauf si on lui donne une autre largeur ...

left:-30px : le cadre qui s'ouvre est aligné à gauche sur le cadre qui l'héberge , on va donc équilibré l'affichage

30 150 30
210

la balise <center> est une balise en cours d'abandon , concernant les navigateurs modernes , tout comme <p align="center"> ...

le CSS correct est <div style="margin:auto;text-align:center;">

la marge est automatiquement centrée autour du cadre , le texte est centré dans le cadre ...

j'ai rien oublié ? Interrog

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 2 Aoû 2012 - 1:18

Merci ! L'image que vous avez utilisée pour m'expliquer la différence entre <span> et <div> était à la fois très simple et très facile à comprendre : j'y vois plus clair à présent ^^

Fière d'avoir à peu près saisi le principe, j'ai voulu l'appliquer seule à ma partie dédiée aux modérateurs. J'ai presque réussi, le soucis est juste que mes images ne sont pas centrée :

Spoiler:

(C'est volontaire que l'image de l'homme aux cheveux longs soit en dessous)

Pourtant, j'ai repris le code que vous m'aviez donné plus haut, en essayant de l'adapter à la nouvelle situation : fusion de 2 cellules au lieu de 4, zone plus petite. Mais il refuse quand même de centrer mes images... Est-ce parce que les deux colonnes qui entourent cette partie n'ont pas encore de taille fixe ?

Code:
<td colspan="2">
        <div style="margin:auto;text-align:center;width:450px;"><strong><u>Les Assistants :</u></strong><br><br>
        <div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
        <u>Role :</u><em>Modérateur</em><br>
        <u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
        <div class="infobulle"> &nbsp &nbsp &nbsp<img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
        <div class="infobulle"><br><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong>
        </div></td>

(Si besoin, voici le code avec en plus les deux colonnes :
Code:
<tr>
<td><Strong><u>Météo :</u></strong></p></td>
                <td colspan="2">
        <div style="margin:auto;text-align:center;width:450px;"><strong><u>Les Assistants :</u></strong><br><br>
        <div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
        <u>Role :</u><em>Modérateur</em><br>
        <u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
        <div class="infobulle"> &nbsp &nbsp &nbsp<img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
        <div class="infobulle"><br><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong>
        </div></td>


<td> <center><Strong><u>Topics Histoire :</u></strong><br>
<em>Pour suivre l’histoire de Valhalla...</em></div></td>

</tr>
)

D'autre part, la dernière infobulle n'est pas entière, mais je suppose que c'est parce que j'arrive à la limite de la P.A. Je pense que je peux résoudre le problème en sautant des lignes sous les images afin de gagner de la place, mais s'il y a une autre solution je suis preneuse.

Désolée, j'avais espéré pouvoir me débrouiller seule pour la suite, mais c'est loupé ... ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Jeu 2 Aoû 2012 - 1:36

hmmm... reflexion

le premier code est trop large ...

à tester (il manque 2 "div" de fermeture en fin de code , pas besoin d'un retour à la ligne) :

Code:
<td colspan="2">
<div style="margin:auto;text-align:center;width:310px;"><strong><u>Les Assistants :</u></strong><br><br>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" /> 
<div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
<u>Role :</u><em>Modérateur</em><br>
<u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" /> 
<div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
<u>Role :</u> <em>Modérateur</em><br>
<u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
<div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
<u>Role :</u> <em>Modérateur</em><br>
<u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong></div></div>
</div></td>

pour que l'affichage se mette par dessus , il faudrait mettre z-index: 999; pour la class :hover ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 2 Aoû 2012 - 2:16

Yes, j'en vois le bout ! XD

Le code que vous m'avez fournit, après quelques ajustements (rajout d'espaces entre autre), fonctionne très bien !

Pour avoir l'infobulle au dessus, si vous parlez de cette partie de code :
Code:
.infobulle:hover .infobulle-hidden {
        z-index: 999;
        display: block;
        width:240px;
        left:-25px;
        }

Ça ne fonctionne pas par contre... ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Jeu 2 Aoû 2012 - 2:20

pouvez vous mettre le lien vers le forum test ? (sous hide s'il le faut)

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 2 Aoû 2012 - 2:36

http://valhalla-test.lebonforum.com/

Mais vous ne pourrez pas y accéder sans les identifiants, si ?

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Jeu 2 Aoû 2012 - 2:38

Interrog Ben , il faudrait au moins que je vois la page d'accueil , non ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 2 Aoû 2012 - 2:46

Je suis tout à fait d'accord XD
Sauf que c'est ma "coéquipière" qui l'a créé et me l'a donné "comme ça", tout ce que je fais dessus c'est modifier l'apparence, je n'ai touché à aucune option jusque là. Ma question sous entendue c'était "dois-je vous fournir les ID ou est-ce qu'il faut que je modifie une permission dans le panneaux d'admin pour que vous puissiez voir l’accueil en temps qu'invité ?" ^^

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Jeu 2 Aoû 2012 - 2:52

non , pas besoin ...

on va essayer comme ça :

Code:
.infobulle{
position: relative;
float:left;
}
.infobulle .infobulle-hidden {
background-color:rgba(0,0,0,0.5);
position: absolute;
visibility: visible;
z-index: 999;
padding:3px;
color:#fff;
font-size:1em;
font-weight:bold;
border:3px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: none;
}
.infobulle:hover .infobulle-hidden {
display: block;
width:210px;
left:-30px;
top:80px;
}

... en déplaçant la bulle et en la rendant semi-transparente , ça devrait aller ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Azylis le Jeu 2 Aoû 2012 - 3:07

Je n'avais absolument pas pensé à la solution de la semi transparence
(et de toute façon j'aurais pas su comment faire...) et ça me plait
beaucoup ! Au moins, ça change de de l'ordinaire.

Merci énormément pour votre patience et vos explications, même à 3h du matin !

Je pense que tout est bon cette fois ^^

Encore merci pour votre aide et bonne fin de nuit !

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles et code HTML (voir même CSS)

Message par Scoubifitz le Jeu 2 Aoû 2012 - 3:09

Problème résolu ?

Hi

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz 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