28219 sujets

CSS et mise en forme, CSS3

InfoBulles et chevauchement avec une image

Bonsoir,

Grosse prise de tête ce soir avec ma feuille de styles.
Je passe les détails, mais voici un des petits BUGs que j'ai entre FF et IE7.

Sur certains liens j'ai une infoBulle qui apparait pour éviter de surcharger l'interface.
L'infoBulle fonctionne parfaitement mais je me suis apercu que IE ne l'interprêtait pas totalement de ma même manière.

Si je mets mon infoBulle elle s'affiche correctement, par contre si j'ai une image en dessous, bein sous IE l'image cache une partie de la bulle mais pas sous FF.
CSS : 
/*--- Debut InfoBulles ---*/
#cadreCourtGauche a.info {
	position:relative;
}

#cadreCourtGauche a.info span {
	display: none;
}
#cadreCourtGauche a:hover.info span {
	display: inline; 
	position: absolute;  
	top: 1.5em; 
	left: 0.5em; 
	z-index: 1000; 
	background: #333333; 
	color: #FFFFFF; 
	border: 1px solid #000000; 
	width: 150px; 
	text-align: left;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
	padding: 2px 4px;
}
/*--- Fin InfoBulles ---*/


Le code HTML :
<h2><a href="#" class="info">Informations<span>Définition dans infobulle
<br />Ligne2
<br />Ligne3</span></a></h2>


Une idée?
J'ai essayé de mettre des z-index sur mes images pour tester mais rien n'y fait... Smiley decu

Merci par avance.

Patrick
Modifié par PatrickDuSud (27 Mar 2007 - 01:08)
En complément : 
#cadreCourtGauche {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	width: 310px;
	padding: 5px;
	border: 1px solid #333333;
	float: left;
	margin-top: 5px;
}

#cadreCourtGauche {
	float: left;
	clear: left;
}

#cadreCourtGauche h2 {
	color: #FF9900;
	float: left;
	margin: 10px 0 0 0;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

Dans le cadre, une insertion toute bête d'image...
Ensuite une boucle pour mettre les cadres les uns à la suite des autres.
Salut,

essaye de placer ton image en position: relative ?
Modifié par ghost (27 Mar 2007 - 01:20)
Pour préciser encore plus ma structure :
J'ai un conteneur centré.
Il contient un DIV (A) avec float left et un autre (B) avec un float right.
Dans la partie A, j'ai à nouveau 2 float faisant office de "colonnes", appelés cadreCourtGauche et Droit.

NOTA : Une boucle autour des 2 cadres pour les dupliquer selon ce qui me remonte de la base.

Voili voilou
Re,

J'ai eu le même souci, mais là j'ai un trou, je crois que c'est une histoire de position !! il me semble position: static en commentaire conditionnel pou ie6 ?
Aurais tu un exemple?

Je suppose que ce doit être un peu le même problème lorsque tu as un menu horizontal déroulant Smiley ohwell

Screenshots des 2 cas :
FF
IE7 (Pas testé sur la version 6)

NOTA : Il s'agit de 2 DIV cadreCourtGauche, l'un au dessous de l'autre.
Modifié par PatrickDuSud (27 Mar 2007 - 10:11)
Re,

J'ai bien un exemple en ligne mais je n'arrive plus à mettre le doigt sur la modification ... (Ca doit être l'âge !), je sais que j'avais prévu aussi des cadres arrondis pour mes paragraphes (en 5 images) dont une partie dans le code positionnées en absolute et j'ai du y renoncer à cause de ce problème. D'ailleurs une solution si elle ne gène pas ton contenu serait de placer tes images en background ?

Le lien on ne sait jamais http(:)//jm-ferrer.fr/artiste.php ce sont les news qui se déroulent sur le contenu de la page, images comprises. A visionner avec ie6 installé car c'est bourré de commentaires conditionnels.
Hello,

J'ai pensé au background mais l'image est dynamique, ce qui veut dire que je dois générer des styles plus ou moins identiques mais avec des noms différents simplement pour gérer cette image.

J'aimerais une solution plus "propre"... mais bon si y a pas moyen... Smiley decu
Y a peut être aussi la possibilité de mettre l'image dans un DIV et de jouer sur les z-index... mais j'ai déjà testé avec les différents éléments et ca n'a pas l'air de résoudre mon problème...
Petit correction de problème...
Il n'y a pas que l'image d'impactée. Il s'agit de tout mon bloc qui est au dessus de mon infoBulle GRRRRRR
Modifié par PatrickDuSud (27 Mar 2007 - 14:17)
Re,

Sans page en ligne c'est un peu dur ...
Bon le code que tu as fourni au début avec une image et une disposition de mon cru, fonctionne sans problème sous FF IE7 et IE6 (avec un petit correctif pour Monsieur) et un petit gag sous opera.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 

<title>Test</title>
<style type="text/css">
/*--- Debut InfoBulles ---*/

 a.info {
	position:relative;
}

 a:hover {
	background: none /* pour ie6*/
}

 a.info span {
	display: none;
}

 img {
	display: block;
}

 a:hover.info span {
	display: inline; 
	position: absolute;  
	top: 1.5em; 
	left: 0.5em; 
	z-index: 1000; 
	background: #333333; 
	color: #FFFFFF; 
	border: 1px solid #000000; 
	width: 150px; 
	text-align: left;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
	padding: 2px 4px;
}

/*--- Fin InfoBulles ---*/
</style>								 
</head>
<body>
<h2><a href="#" class="info">Informations<span>Définition dans infobulle<br />Ligne2<br/>Ligne3</span></a><img src="image.jpg" /></h2>
</body>
</html>


Ton problème se situe donc ailleurs !
Bon courage
Je regarde ca ce soir en rentrant...
Je te tiens au courant mais je ne pense pas que ta soluce corresponde à mes contraintes... WAIT AND SEE Smiley cligne

En tout cas, merci de ton aide.
Sujet clos
Aller à