Comment faire des Info Bulle

Pour faire des PA je te conseille d'utilisé ce site : http://cssdesk.com/ Comme ça tu pourra faire ton code HTML et ton CSS en même temps et voir ce que sa donne au fur et a mesure que tu fait ton tableau.

Info Bulle a écrit:

Une infobulle est une bulle où mettre des informations visibles lorsque l'on passe la souris sur un élément. Elle est très utilisée pour la présentation du Staff dans une page d’accueil (ou PA).

Pour la créer tu as besoin :
- des balises div et span (en cas de soucis regarde le tuto posté plus bas),
- des propriétés du CSS.

Tout d'abord créons notre infobulle, le CSS viendra après.
On va utiliser la div class pour mettre l'image ou le texte (l'élément) sur lequel on passera la souris.
On aura donc :

Code:

<div class="infobulle">TEXTE </div>

Mais cela ne nous donne rien de plus, on rajoute maintenant une span qui permettra de donner le contenu de l'infobulle.
On aura donc :

Code:

<div class="infobulle">TEXTE <span>Contenu</span></div>

Maintenant que l'on a notre infobulle, place au CSS.
Pour créer le CSS et le mettre, c'est PA > Affichage > Couleur > Feuille de style si tu veux le testé sur un forum, mais sur mon site tu mes dans la partie CSS.

Maintenant on va déclarer notre infobulle.
div.infobulle{
position: relative; => Ceci donne la position de l'infobulle.
float: left => Ceci dit qu'elle doit flotter à gauche.
}

div.infobulle span{
display: none; => Pour masquer l'infobulle.
}

div.infobulle:hover{
background: none;
z-index: 9999; => Valeur pour l'ordre d'affichage.
}

Maintenant on va définir l'apparence de l'infobulle :
div.infobulle:hover span
{
display: inline; => Affichage de l'infobulle, ne pas toucher.
position: absolute; => Position de l'infobulle.
top: 10px; => Positionnement de l'infobulle.
}

Après tu peux rajouter du CSS dans l'apparence de ton infobulle se qui veux dire dans la dernière partie du CSS.

Balises div et span a écrit:

La div est une balise HTML :

Code:

<div> Contenu </div>

La balise div est un bloc, donc un objet rectangulaire qui ne peut être réparti sur plusieurs lignes.
Elle possède les attributs margin, padding, width, height....

La span est une balise HTML :

Code:

<span> Contenu < /span>

La balise span est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence du texte.


Mais comment mettre le CSS ?

On va rajouter dans la balise soit : class, style ou id. (perso je préfère class pour les PA et style pour les fiche, mais bon je vais tout te les montrées comme je suis trop gentille !!! *sort*)

La class permet de mettre le CSS dans la feuille de style (PA > Affichage > Couleur > Feuille de style). Elle s'utilise surtout pour les PA ou fiches de présentation mais pas de publicité à part si vous utilisez des iframes.
Construction :

Code:

<div class="NOM CSS"> Contenu </div>
<span class="NOM CSS"> Contenu </span>

Dans la feuille : .NOM CSS{ CSS}

La id permet de mettre le CSS dans la feuille de style aussi mais au lieu de mettre . on met #.
Construction :

Code:

<div id="NOM DE CSS">Contenu</div>
<span id="NOM DE CSS">Contenu</span>

Dans la feuille : #NOM CSS{CSS}

La style permet de mettre le CSS directement dans la balise et donc de ne pas utiliser la feuille de style.
Construction :

Code:

<div style="CSS"> Contenu </div>
<span style="CSS"> Contenu </span>

Des exemples :

Code:

<div style="margin:10px;">Contenu</div>
<span class="toto"> Contenu </span>