28172 sujets

CSS et mise en forme, CSS3

Infobulles en css qui ne fonctionnent pas partout

Bonjour,

J'ai ajouté sur mon site des infobulles en CSS (tuto trouvé ici), et elles fonctionnent sur une des pages ou je les utilise (aide.php). Mais curieusement, sur une autre page, elles ne fonctionnent plus!

Voici quelques tests effectués :
* si je vire le "display:none;", mon infobulle est bien présente (donc le CSS est bien interprétée)
* je peux modifier la valeur de z-index, ca ne change rien
* mon texte de class "infobulle" est bien souligné (et la souris se transforme en main lorsqu'elle passe dessus)

Je pense donc que c'est le :hover qui est mal interprété. Mais pourquoi fonctionne-t-il alors ailleurs sur mon site... Mystère

Merci d'avance si vous avez des pistes ou des idées

.infobulle img
{
  position: absolute;
  right:200px;
  background-color: #ffd;
  font-size: small;
  text-decoration: none;
  padding:7px;
  border: 1px outset gray;
  z-index: 10;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
  display: none;	
}


.infobulle:hover img 
{
  display:block;
}

.infobulle
{
	text-decoration:underline;
	cursor : pointer;
}


<br />
	Un item peut &ecirc;tre <SPAN class="infobulle">un mot cl&eacute;<img src="design/images/capture_rech1.jpg" /></SPAN>, 
	une pr&eacute;cision sur <SPAN class="infobulle">la date<IMG src="/design/images/capture_rech2.jpg" /></SPAN> 
	ou bien <SPAN class="infobulle">l'&eacute;tat du document<IMG src="design/images/capture_rech3.jpg" /></SPAN> (en majuscule).</p>

Modifié par thomas_legrand (21 Jul 2011 - 11:29)
Voici un extrait de la page aide.php, où les mêmes infobulles fonctionnent :


La date doit être au format <SPAN class="infobulle">jj/mm/aaaa
<img src='design/images/capture_date1.jpg' /></SPAN>, 
au format <SPAN class="infobulle">mm/aaaa
<img src='design/images/capture_date2.jpg' /></SPAN> 
ou bien au format <SPAN class="infobulle">aaaa
<img src="design/images/capture_date3.jpg" /></SPAN>.</p>
je pense qu'on manque d'éléments, par exemple : dans quel bloc se trouve ton texte contenant tes infobulles ? quel est le code de la page sur laquelle cela fonctionne et celui d'une page qui ne fonctionne pas ?

Autrement, pour spéculer, je dirais que tu as un overflow:hidden; quelques part.

Sinon pour l'aspect du code, je pense que tu devrais plutot marquer tes span en minuscule, surtout si toutes tes autres balises sont en minuscule car on ne marque plus les tag en majuscule depuis un bout de temps Smiley smile
Voici le début du code de la page ou les infobulles fonctionnent :

<?php	
	session_start();
	require('fonctions.php');
	require('fonctions_accueil.php'); //pour fleches_navigation()
	
	if (empty($_SESSION['login'])) 
	{
		header("Location: index.php");
		exit();
	}
	
	require('div/div_header.php'); 
	
	action('Affichage de l\'aide');
?>


	<div id="corps">
		<div id="aide">

			<h1>Aide</h1>
			<hr />
			<p>Pour bénéficier de nos services, nous vous rappelons que le site internet est optimisé pour le navigateur <a href="http://www.mozilla-europe.org/fr/" title="Télécharger la dernière version">Mozilla Firefox</a> (5.0 et plus).<br /><br />
			<ul>
				<li>
					<h3>Connexion à l'espace client</h3>
					<p>Inscrivez votre login et votre mot de passe dans les champs "<SPAN class="infobulle">Accès client<img src="design/images/capture_connexion.jpg"></SPAN>" de la page d'accueil.<br />
		[...]


Et voici celui où cela ne fonctionne pas :


<?php
	session_start();
	//header('Content-Type: text/html; charset=utf-8');
	
	//si le login est vide = pas connecté
	if (empty($_SESSION['login']))
	{
		header("Location: erreur.php?erreur=403");
		exit();
	}
	
	//sinon on peut lancer le traitement
	require('mode_exploration.php');
	require('fonctions.php');
	require('parametres.php');
	require('fonctions_accueil.php');
	require('traitement_accueil.php');

?>


<?php 
	//indique au header de charger en plus le design de l'accueil
	$accueil=1;
	require('div/div_header.php'); 
?>

<div id="corps">
	<div id="accueil">

		<?php
			require('div/div_gauche.php');
		?>
	
		<div id="droite">
			<h1>
				<?php 
					echo $titre1.' '.$_SESSION['affaire']; 
					echo $_SESSION['ouvert'];
				?>
			</h1><hr />	
			<?php			
			if (!empty($alerte))
			{
				echo $alerte;
			}
			else
			{
				//éventuel message d'erreur en cas de téléchargement de liste vide
				if (!empty($res_zip))
				{
					echo $res_zip;	
				}
				
				//éventuel message d'accueil
				if (!empty($_SESSION['image_news']))
				{
					bloc_accueil();
				}
				
				//bloc upload
				bloc_upload($_SESSION['ouvert'], $dl);
				
				//bloc recherche
				bloc_recherche($_SESSION['ouvert'], $conn_id, $_SESSION['rech']);
[...]


où la fonction bloc_recherche() vaut :


function bloc_recherche($ouvert, $conn_id, $rech)
//affiche le bloc de recherche
//note : lorsque cette fonction est appelée, la recherche a déjà été effectuée
{
	global $liste_documents, $nb_documents;
	
//remise à zéro systématique de l'option "rechercher avec une date"
	$_SESSION['recherche_date']=FALSE;
	
	echo '<div id="recherche">';
	//le bloc est-il ouvert ?
	if ($ouvert != 2)
	{
		//bloc fermé, on affiche juste le titre
		echo '<div class="top2"><a href="'.$_SERVER['PHP_SELF'].'?o=2"><span>Rechercher un document</span></a></div>';
	}
	else
	{
		require('mois.php');
		if((strncmp($_SERVER["PHP_SELF"],"/print.php",10)==0)				//si la page courante est print ou print_tri, le titre est "Affiner votre recherche"
			OR (strncmp($_SERVER["PHP_SELF"],"/print_tri.php",14)==0))		//sinon, le titre est "Rechercher un document"
		{
			$titre_menu_rech='Affiner votre recherche'; 
			$lien_fermer_menu='print_tri.php?affichage='.(($_SESSION['affichage']=='non') ? "oui": "non").'#bloc_recherche';
			$lien_ouverture_menu="print_tri.php?affichage=".(($_SESSION['affichage']=='non') ? "oui": "non")."#bloc_recherche";
		}
		else
		{
			$titre_menu_rech='Rechercher un document'; 
			$lien_fermer_menu=$_SERVER['PHP_SELF'].'?o=-1';
			$lien_ouverture_menu='';
		}
		echo '	<br /><div id="bloc_recherche" class="top">
					<div class="left_top">
					</div>
					<div class="center_top">
						<a href="'.$lien_ouverture_menu.'" title="Menu de recherche avanc&eacute;e" class="titre_menu_rech">
							<span class="titre_menu_rech">
								'.$titre_menu_rech.'
							</span>
						</a>
						<a title="Fermer cet onglet" 
						href='.$lien_fermer_menu.' class="fermer">
						</a>
					</div>
					<div class="right_top">
					</div>
				</div>';		
	} 
               require('bloc_recherches.php');
			
		echo '</div>';
        }
	echo '</div>';
}


et le fichier bloc_recherches.php appelée (où se trouvent les fameuses infobulles qui ne fonctionnent pas) :


<?php
	
	echo '		<p>S&eacute;parez les items &agrave; rechercher dans la base documentaire par des  '.NOM_SEP_RECH.' "'.SEP_RECH.'".'; 
?>				
	<br />
	Un item peut &ecirc;tre <SPAN class="infobulle">un mot cl&eacute;<img src='design/images/capture_rech1.jpg' /></SPAN>, 
	une pr&eacute;cision sur <SPAN class="infobulle">la date<IMG src="/design/images/capture_rech2.jpg" /></SPAN> 
	ou bien <SPAN class="infobulle">l'&eacute;tat du document<IMG src="design/images/capture_rech3.jpg" /></SPAN> (en majuscule).</p>
	
	<br />
[...]
non pas encore.
Mais il n'y a rien a visualiser sur la page (rien ne s'affiche), la console d'erreur n'indique rien non plus (ni erreur ni warning) et j'ai même installé une barre d'outils (Web Developer pour Firefox), mais la encore, ca ne me signale pas d'erreur lié au CSS.
Je viens de l'installer, où dois-je rechercher des erreurs?
Dans la console, en tout cas, aucune erreur n'apparait au chargement de la page en question.
OK merci beaucoup, je regarde ça et je vous dis ce que ça donne.

Pour en revenir au problème du lien, je travaille (stage) pour une entreprise dont le site internet est accessible à ses clients au moyen d'une connexion par mot de passe. Donc même lorsque les pages sur lesquelles je travaille seront en ligne, elles ne seront pas accessibles au public.

Mais merci de prendre le temps de m'aider malgré tout. Smiley cligne
J'ai essayé plusieurs manipulations, mais malheureusement je n'ai pas trouvé d'ou venait mon problème.

Suivant si j'active ou non le "display:none" de la class (sous firebug), je vois bien mes infobulles apparaître (ou disparaître), mais le passage de la souris n'a aucun incidence.

Je pense dont que c'est le :hover qui ne fonctionne pas (mais pourquoi, vu qu'il fonctionne sur une autre page avec la même feuille de style).
tu doit avoir une propriété qui qui passe ne priorité par rapport au :hover.

essaye :

.infobulle:hover img  
{ 
  display:block !important; 
}
Bonne idée, mais c'est sans effet.

Je commence à me demander si ce ne serait pas plus simple de coder mes infobulles en JavaScript au final. J'aurais peut-être moins de surprise qu'avec le CSS.
Sujet clos
Aller à