28217 sujets

CSS et mise en forme, CSS3

Afficher une info bulle css dans une div à un endroit spécifique

Bonjour,

J'ai repris le code css du tutorial qui affiche les infos bulles sur alsacreations
et je l'ai mis sur mon site, cependant j'aimerais que l'info bulle ne soit pas flotante et quelle s'affiche toujours au meme endroit à un emplacement precis de ma page.

Je prends aussi tous les conseils ^^
PS: j'ai marqué dans le code de la page ou j'aimerai que l'info bulle apparaisse, pour avoir une idée Smiley smile

Merci d'avance

Voici la feuille de style CSS :

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center;background: #6C7C8B url("bg.png");}
p{margin:0 10px 10px}
h1 {font-size: 100%;margin: 0px;padding: 3px;}
a{color: #000000;text-decoration: none;}
#footer a{color: #CCCCCC;text-decoration: none;}
a img{
border: 1px solid #000000;
}
/*****************************************************/
/***************** Structure en CSS ******************/
/*****************************************************/

div#header{height:182px;margin:0;background: #EEE url("header.jpg");margin-bottom: 3px;}
div#container{background-color: #FFFFFF;}
div#content p{line-height:1.4;text-align: center;}
div#navigation{background-color: #FF829B;}
div#extra{background-color: #FFA46C;text-align: left;}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:750px;margin:0 auto}
div#content{float:left;width:550px;background-color: #FFFFFF;}
div#navigation{float:right;width:200px;text-align: left;}
div#extra{float:right;clear:right;width:200px;padding-top: 1em;}
div#footer{clear:both;width:100%;color: #CCCCCC;}

/*****************************************************/
/******************** Menu en CSS ********************/
/*****************************************************/

#vertmenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	width: 160px;
	padding: 0px;
	margin: 0px;
}
#vertmenu h1 {
	display: block;
	background-color:#F23E7F;
	font-size: 100%;
	font-weight : bold;
	padding: 3px 0 5px 3px;
    border-width : 0px 0px 3px 0px; 
    border-style : solid; 
    border-color : #FFFFFF;
	color: #FFFFFF;
	margin: 0px;
	width:195px;
	text-align: center;
}
#vertmenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: none;
}
#vertmenu ul li {
	margin: 0px;
	padding: 0px;
}
#vertmenu ul li a {
	font-size: 100%;
	display: block;
	border-bottom: 1px dashed #000000;
	padding: 5px 0px 2px 4px;
	text-decoration: none;
	color: #000000;
	width:195px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
	color: #000000;
	background-color: #FFDDE3;
}

/*****************************************************/
/****************** Tableaux en CSS ******************/
/*****************************************************/
.tablevideo {
	border: 1px dashed black;
	background-color: #FF829B;
	margin:0 auto;
	width:500px;
}
.thvideo {
	background-color: #F23E7F;
	color: #FFFFFF;
}
.tdvideo {
	background-color: #FF829B;
	text-align: center;
	color: #FFDFE6;
	padding: 3px;
}
.tablerencontre {
	border: 1px dashed black;
	background-color: #FFA46C;
	margin:0 auto;
	width:500px;
}
.tdrencontre {
	background-color: #FFC8A6;
	text-align: center;
}

table {
	width: 95%;
	border: 1px dashed gray;
	background-color: #EDF3F8;
}
caption {
  text-align: center;
  font-style: italic;
  font-weight: bold;
  color: #0066CC;
}
th {
  background-color: #D3E2ED;
  color: gray40;
}
td {
	background-color: #EDF3F8;
}
.center {margin:0 auto;width:508px;}


/** Pour les infobulles des vids **/
a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */}
a div { /* définition de la balise <span> inclue dans <a> */display: none;}
a:hover div { /* définition de la balise <span> au survol */
		display: inline;
		position: absolute; top: 180px; left: 0;
   		width:500px;
		border: 1px dashed black;
		background-color: #FF829B;
		text-align:justify;
		padding: 0.5em;
		filter:alpha(opacity=95);   /* Internet Explorer 6     */
   		-moz-opacity: 0.95;           /* Mozilla 1.6 et infér.   */
   		opacity: 0.95;               /* CSS3 et Mozilla récents */
		}


Voici le code de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="blablabla">
<meta name="Description" content="blablabla">
<link rel="alternate" type="application/rss+xml" title="Toutes les vidéos gratuites" href="rss-media.html">
<link rel="shortcut icon" href="favicon.ico">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="wrapper">
    <div id="content">
	
	<div>Afficher l'info bulle ici</div>
	
      <p>&nbsp;</p>
      <table class="center" summary="Medias">
        <thead>
          <tr>
            <th colspan="3">Les medias</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2" width="63"><img src="cat.jpg" height="24" width="63"></td>
            <td width="302"><strong><a href="url-de-la-page.html">Titre du media
              <div><img src="image.jpg" style="margin: 0pt 2em 0pt 0pt; float: left;">Description qui va bien et blablabla</div>
              </a></strong></td>
            <td rowspan="2" width="96">NOTE</td>
          </tr>
          <tr>
            <td>Catégorie</td>
          </tr>
        </tbody>
      </table>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="navigation">
    <div id="vertmenu">
      <h1>Navigation</h1>
      <ul>
        <li><a href="#" tabindex="1">Accueil</a></li>
        <li><a href="#" tabindex="2">Videos gag</a></li>
        <li><a href="#" tabindex="3">Videos gag</a></li>
        <li><a href="#" tabindex="4">Videos gag</a></li>
        <li><a href="#" tabindex="5">Videos gag</a></li>
        <li><a href="#" tabindex="6">Videos gag</a></li>
      </ul>
    </div>
  </div>
  <div id="extra">
    <p><strong>3) Blablabla.</strong> blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla blablabla blabla bla blablabla blabla bla
      blablabla blabla bla </p>
    <p></p>
  </div>
  <div id="footer">
    <p>Toute reproduction partielle ou totale est interdite © 2006</p>
  </div>
</div>
</body>
</html>
Bonjour,

Si j'ai bien compris, pour plusieurs liens tu voudrais afficher leur infobulle au même endroit. C'est jouable en modifiant les valeurs top, left (ou right) de la propriété absolute de chaque a:hover span pour "atterrir" au bon endroit. Un peu tiré par les cheveux car il y a des différences de rendu entre chaque navigateur et on abouti vite à une "usine à gaz" pour rendre tout ça compatible ...
On ne peut pas l'appeler dans une div à un endroit precis ?
Au lieu de jouer avec les valeurs de positions...
Sujet clos
Aller à