28172 sujets

CSS et mise en forme, CSS3

Z-index / comment avoir des blocs opaques sous IE7 ? [Résolu]

Bonjour,

Etant nouveau, j'en profite pour me présenter. Je suis journaliste et à mes heures perdues, je titille HTML et CSS pour essayer de faire un/des sites à peu près présentables.

En ce moment, je bute sur un problème très agaçant.
J'ai imaginé des <span> inclus dans un lien <a> qui n'apparaissent qu'au survol de la souris. Problème : IE7 les rend transparents ce qui ne facilite guère la lecture puisque le texte d'arrière-plan vient se mêler à celui des blocs n'apparaissant qu'au survol de la souris...
J'ai cherché dans le forum avec le terme z-index mais les problèmes évoqués tiennent à l'absence de la balise "position" et pas au rendu sous IE7.

LA SOLUTION : faire une feuille de style particulière pour IE et le rediriger sur cette feuille avec un commentaire conditionnel dans la section <head> du fichier HTML. Pour plus de précisions :
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

A tout hasard, si quelqu'un à la solution, merci d'avance !

Gilmar


Ci-dessous le code HTML et CSS validé par le W3C :


<div class="div_competences_gauche">
	
		<h2>COMPETENCE</h2>
	
	<p>Depuis plus de 10 ans, je traite régulièrement des tthèmes suivants :</p>
	
	<p>- <a clas='essai' href="#">habitat/logement/urbanisme<span> Pour les Cahiers de l'ANAH, j'ai notamment traité des OPAH, ZPPAUP, etc.</span></a> </p>
	<p>- <a href="#">industrie<span> Pour les Cahiers de l'Industrie, j'ai notamment écrit des articles sur etc. </span></p> 



 
.div_competences_gauche p a:link span	{
	display : none ;
	text-decoration : none ;
	color : red ;
	z-index : 300 ;
	}	

.div_competences_gauche p a:visited span	{
	display : none ;
	text-decoration : none ;
	z-index : 300 ;
	}		
	
.div_competences_gauche p a:hover span	{
	background : #fad  ;
	border-left : solid 4px #abc ;
	color : red ;
	display : block ;
	font-size : 12px ;
	height : 120px ;
	position : absolute ;
	top : 4px ;
	left : 200px ;
	padding : 10px ;
	text-decoration : none ;
	width : 200px ;
	z-index : 600 ;
	}	

.div_competences_gauche p a:active span	{
	display : none ;
	text-decoration : none ;
	z-index : 300 ;
	}

Modifié par gilmar (04 Jun 2008 - 10:53)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bravo pour la vigilance, rien n'échappe au modérateur. Désolé pour le code , j'espère que cette fois sera la bonne...

Quant à la raison qui me pousse à maintenir les liens invisibles, elle est la suivante : il s'agit de préciser des termes très brefs par un petit topo plus long. Pour éviter le renvoi sur une autre page, j'ai préféré concevoir des spans n'apparaissant qu'au survol de la souris.

Gilmar
Sujet clos
Aller à