Positionner infobulle CSS/HTML.

Fermé

luluwebmaster Messages postés 409 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 3 février 2018 - Modifié par luluwebmaster le 3/03/2013 à 09:50
luluwebmaster Messages postés 409 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 3 février 2018 - 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

A voir également:

4 réponses

Réponse 1 / 4

aiglenoirdu29 Messages postés 10205 Date d'inscription mercredi 24 décembre 2008 Statut Contributeur Dernière intervention 5 mai 2020 2 348
Modifié par aiglenoirdu29 le 3/03/2013 à 09:51

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 mardi 19 février 2013 Statut Membre Dernière intervention 3 février 2018 5
3 mars 2013 à 09:51

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

Réponse 3 / 4

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
Modifié par tryan44 le 3/03/2013 à 11:53

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 mardi 19 février 2013 Statut Membre Dernière intervention 3 février 2018 5
3 mars 2013 à 11:53

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

Discussions similaires

positionner une image dans une page html