Positionner infobulle CSS/HTML.

luluwebmaster Messages postés 409 Date d'inscription Statut Membre Dernière intervention -
luluwebmaster Messages postés 409 Date d'inscription Statut Membre Dernière intervention - 3 mars 2013 à 11:53

Bonjour a tous
Voila mon problème :
J'ai créer une page contenant pleins d'infobulle, voila son code de base :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>La boutique de J'aime ekoloko ! </title>
<style>
#navigation li {
  float: left 
  }
#navigation {
  position: fixed;
  top: -2%;
  right: 23%;
  left: 23%;
  list-style: none;
}
#navigation li {
  width: 150px ;
  color: #fff ;
  background: #c00 ;
  border-bottom: 3px solid #600 ;
  border-left: 3px solid #600 ;
  border-right: 3px solid #600 ;
  border-radius: 0px 0px 5px 5px;
}
#navigation li a {
  display: block ;
  background: #c00 ;
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  padding: 4px 0 ;
  text-align: center ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
  background: #900 ;
}
body
{
-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px 

box-shadow:0px 0px 50px #44c930; 
  -moz-box-shadow: 0px 0px 50px #44c930; 
-webkit-box-shadow: 0px 0px 50px #44c930;
width: 90%;
margin: auto;
background-color: #CCC;
padding: 4px;
color: #300;
font-size: 14px;
text-align: justify;
border-top-style: groove;
border-top-color: #CF3;
border-right-color: #CF3;
border-bottom-color: #CF3;
border-left-color: #CF3;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
}
#jaimeekoloko
{
font-size: 10px;
text-align: center;
}
</style>
<ul id="navigation">
  <li><a href="https://ekoloko.rigala.net/">Passer commande</a></li>
  <li><a href="https://ekoloko.rigala.net/">La boutique</a></li>
  <li><a href="https://ekoloko.rigala.net/">Historique des achats</a>
</ul>

</head>

<body>
<style>
.histoachat
{
   font-size: 30px;
   color: yellow;
   text-align: center;
}
#labdjme
{ 
   color: red;
   text-align: center;
   font-size: 50px;
}
</style>

</BR></BR>
<div style="text-align: center;" >
<a href="https://ekoloko.rigala.net/">
<img src="http://nsa32.casimages.com/img/2013/01/25//130125101606790267.png"/>
</a>
</div>
</BR></BR></BR></BR>

<p id="labdjme">
La boutique de J'aime Ekoloko ! 
</p>

</BR></BR></BR></BR></BR>
<style>
a:hover,a:focus{
     background:rgba(0,0,0,.4);
     box-shadow:0 1px 0 rgba(255,255,255,.4);
}
.info img
{
   border-width:5px;
   border-style:inset;
   border-color:red;
   border-radius: 5px 5px 5px 5px ;
}
a.info {
   text-align: center;
   position: relative;
   color: black;
   text-decoration: none;
   color:#ccc;
   text-shadow:0 -1px 0 black;  
}
a.info span {
   display: none; 
}
a.info:hover {
   background: none; 
   z-index: 500; 
 
   cursor: help; 
}
a.info:hover span {
   display: inline; 
   position: absolute;
 
   white-space: nowrap;
 
   top: 10px;
   left:-30px;
   border-width:3px;
   border-style:inset;
   border-color:red;
   border-radius: 5px 5px 5px 5px ;
   
 
 
   background: white;
 
   color: red;
   padding: 3px;
 
   border: 1px solid green;
   border-left: 4px solid green;
}
#labdjme
{ 
   color: red;
   text-align: center;
   font-size: 50px;
}
body
{
-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px 

box-shadow:0px 0px 50px #44c930; 
  -moz-box-shadow: 0px 0px 50px #44c930; 
-webkit-box-shadow: 0px 0px 50px #44c930;
width: 90%;
margin: auto;
background-color: #CCC;
padding: 4px;
color: #300;
font-size: 14px;
text-align: justify;
border-top-style: groove;
border-top-color: #CF3;
border-right-color: #CF3;
border-bottom-color: #CF3;
border-left-color: #CF3;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
}
span
{
width:250px;
}
</style>

<table class="vendboutifow" >
<td>
<tr>
<center>



 <a href="#" class="info"><img src="IMAGE ICi "/><span>
Description ici ! 
</span></a>

</center>
</tr>
</td>
</table>

<div id="jaimeekoloko">
©Lucrote, <a href="https://ekoloko.rigala.net/">J'aime ekoloko</a>
</div>

</body>
</html>

Le truc, c'est que il y as pleins d'infobulles, et beaucoup, apparaissent en dehors de l'écran, se qui fais que le ne le vois pas :s

Comment résoudre se problème ?

Merci d'avance ;D

Afficher la suite

A voir également:

Positionner infobulle CSS/HTML.
Editeur html - Télécharger - HTML
Positionner des points sur une carte - Guide
Positionner une image html ✓ - Forum HTML
Infobulle excel ✓ - Forum Excel
Espace en html ✓ - Forum HTML

4 réponses

Réponse 1 / 4

aiglenoirdu29 Messages postés 10205 Date d'inscription Statut Contributeur Dernière intervention 2 349

Bonjour,

sinon tu héberges ton code quelque part et comme ça on à juste à aller consulter la source sur la page fonctionnelle avec le Firebug de Firefox. Car là un truc en vrac comme ça... perso je lis même pas XD

Windows has not detected any keyboard. Press Enter to continue.
Hu?

Réponse 2 / 4

luluwebmaster Messages postés 409 Date d'inscription Statut Membre Dernière intervention 5

Bonjour,
merci de votre réponse, j'ai éditer mon premier message ^^

Réponse 3 / 4

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Salut,

Pour commencer, il faudrait coder correctement!
-Dissocier le code css du html et le placer dans une feuille de styles ou à défaut le regrouper dans l'entête du document.
-On ne met pas de balise HTML dans un entête comme vous le faites avec la liste.
-On utilise et non .

Bref, commencez par écrire quelque chose de propre et suivez le conseil de @aiglenoirdu29 .

Une question stupide engendre une réponse stupide!
Une question mal formulé engendre une réponse aléatoire!

Réponse 4 / 4

luluwebmaster Messages postés 409 Date d'inscription Statut Membre Dernière intervention 5

Hum, a par mon code un peux ":s", es-que quelqu'un peux me dire comment faire .....?

Discussions similaires

Votre réponse

Discussions similaires