Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» InfoBulles et chevauchement avec une image
Auteur
PatrickDuSud
# 27 Mar 2007 - 01:07:35
Citer
64 Posts
 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... decu

Merci par avance.

Patrick
Modifié par PatrickDuSud (27 Mar 2007 - 01:08)
^
PatrickDuSud
# 27 Mar 2007 - 01:13:31
Citer
64 Posts
 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.
^
ghost
# 27 Mar 2007 - 01:19:07
Citer
1717 Posts
 Salut,

essaye de placer ton image en position: relative ?
Modifié par ghost (27 Mar 2007 - 01:20)
En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
http://ghost-pc-buster.com 
^
PatrickDuSud
# 27 Mar 2007 - 07:43:34
Citer
64 Posts
 Bonjour,

Test du matin, rien de neuf decu

^
PatrickDuSud
# 27 Mar 2007 - 07:57:53
Citer
64 Posts
 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
^
ghost
# 27 Mar 2007 - 08:14:30
Citer
1717 Posts
 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 ?
En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
http://ghost-pc-buster.com 
^
PatrickDuSud
# 27 Mar 2007 - 09:01:42
Citer
64 Posts
 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 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)
^
PatrickDuSud
# 27 Mar 2007 - 09:02:19
Citer
64 Posts
 Pas d'idée? bawling
Modifié par PatrickDuSud (27 Mar 2007 - 10:09)
^
ghost
# 27 Mar 2007 - 10:09:35
Citer
1717 Posts
 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.
En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
http://ghost-pc-buster.com 
^
PatrickDuSud
# 27 Mar 2007 - 10:12:47
Citer
64 Posts
 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... decu

^
PatrickDuSud
# 27 Mar 2007 - 10:26:48
Citer
64 Posts
 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...
^
PatrickDuSud
# 27 Mar 2007 - 12:38:45
Citer
64 Posts
 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)
^
ghost
# 27 Mar 2007 - 13:42:33
Citer
1717 Posts
 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
En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
http://ghost-pc-buster.com 
^
PatrickDuSud
# 27 Mar 2007 - 14:18:52
Citer
64 Posts
 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 cligne

En tout cas, merci de ton aide.
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.6 beta in 11.7 ms © dew