Voici un exemple de ces bulles

Qu'est-ce qu'un cadavre exquis graphiqueC'est une composition graphique qui se suit et qu'on ne sait jamais qu'est-ce qu'on aura. ?

Voici à quoi l'image PNG pour la création de cette bulle d'information ressemble. Cet aperçu à directement été pris dans photoshop.

Cliquez içi pour télécharger la vrai image

Maintenant, voici le code pour créé cette bulle d'information

Le code HTML

 
 
<a href="votreDestination" class="info">Le nom de votre lien
<span>La description de votre lien avec un maximum de 130
caractère dans ce cas si</span></a>
 

Le code CSS

 
 
a.info {
    position:relative; /* Très important */
    background:none; /* Important pour le fonctionnement sur IE */
    z-index:10;
}
 
a.info:hover {
    z-index:20;
}
 
a.info span {
    display:none;
}
 
a.info:hover span { /*la tag SPAN apparaitra avec l'effet hover*/
    display:block;
    position:absolute;
    top:18px;
    left:10px;
 
    /* Éléments pour positionner le texte dans la bulle */
    /* Vous pouvez aussi utiliser le padding:24px 8px 5px 25px; */
    padding-left:25px;
    padding-top:24px;
    padding-bottom:5px;
    padding-right:8px;
    width:205px;
    height:45px;
 
    /* Style du character dans la bulle */
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:italic;
    font-size:10px;
    color:#999999;
    text-decoration:none;
    text-align:justify;
}
 
/* Pour avoir un beau background de bulle avec PNG transparent*/
a.info:hover>span {
background-image:url(images/bgInfo.png);
}
 
a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bgInfo.png",
sizingMethod="crop");
}
 

Voilà, j'espère qu'avec ce tutoriel vous serez en mesure de créé cet effet de bulle à la 2.0. Si vous avez des questions, n'hésitez pas à les poser sur notre forum. Bonne chance !

Je suppose qu’un fichier xhtml à été créé ainsi qu’un fichier CSS et que celui-ci à été attaché de la manière d’un @import ou d’un link. Commençons d’abord par le « body » de la page XHTML : Premièrement, coder de manière claire et simple. Utilisez une structure en DIV. Voici à votre gauche un aperçu typique d’un site web très simple : Le tout sera dans une div général nommé « container » et vous remarquerez que je n’utiliserai pas les majuscules pour nommer mes tags. Sur le plan, les majuscules ont été utilisées seulement pour une meilleure visibilité.

Bon maintenant voici le code XHTML de ce petit design :

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Bien entendu, ce code se retrouve dans la tag BODY. Ensuite commençons le truc que j’utilise pour accélérer votre travail. Copier le code à l’intérieur de votre tag body et collez-le dans votre fichier CSS. Voici ce que ça donne:

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Maintenant (en utilisant Dreamweaver) utilisez la fonction de recherche (ou CTRL-F). Recherchez les codes suivants

 
<div id="
&lt;/pre&gt;
&lt;p&gt;Et remplacez-les par les symboles &lt;strong&gt;#&lt;/strong&gt;. Ensuite recherchez les codes suivants :&lt;/p&gt;
&lt;pre lang=">
/&gt;</div>
 

Et remplacez-les par les accolades ouvertes et fermé { }. Pour le reste vous pouvez rechercher les tags div de fermeture et les remplacer par rien. Cela vous donnera ceci :

#myContainer {}
   #header {}
   #middle {}
      #left {}
      #content {}
  #footer {}

Finalement, il ne vous reste qu’à mettre vos largeurs et hauteurs et autres propriétés de vos tags DIV. Personnellement, j’ajoute une ligne de commentaire au-dessus de chaque ligne concernant mes sections (header, middle, footer). Voici le code que vous obtiendrez :

#myContainer {
width:760px;
height:auto;
}
 
/* HEADER */
   #header {
   width:760px;
   height:250px;
   background-color:#666;
   }
 
/* MIDDLE */
   #middle {
   width:760px;
   height:500px;
   }
      #left {
	  width:160px;
	  height:500px;
	  background-color:#ccc;
	  float:left;
	  }
      #content {
	  width:600px;
	  height:500px;
	  background-color:#fff;
	  float:left;
	  }
 
/* FOOTER */
   #footer {
   width:760px;
   height:70px;
   background-color:#000;
   }

Pour le reste du code, vous l’insérer à l’intérieur de vos tags et indentez votre code comme celui de votre XHTML, vous verrez, ce truc accélèrera votre vitesse d’exécution.