[PNG] Désactivation du contenu sous IE

**Rayniac** · 12/07/2006, 21h00

Bonjour,

Premier post sur ce forum, qui m'a permis plusieurs fois de m'aider sur certains problèmes.

Aujourd'hui, je viens poster, pour demander un éclaircissement, sur un problème que je rencontre.

Le concept est donc d'afficher une image PNG en background afin de pouvoir écrire dessus, mais le problème lors de l'application du filtre DXImageTransform.Microsoft.AlphaImageLoader, est que le contenu du cadre devient inactif, ce qui est fort embetant.

Exemple illustré simplement:

http://acoutut.free.fr/css/

On voit très nettement que l'on ne peut cliquer sur les liens présents dans le cadre.

Source:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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">
	<head>
		<title>.:Test :.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
                <!--
                function main()
                {
                if(document.all && window.ActiveXObject)
                  {
                        document.getElementById("main").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizing='crop');";
                        document.getElementById("main").style.backgroundImage="none";
                  }
                }
                
                window.onload=main;
                -->
                </script>
	</head>
<body>
 
<div id="main">
 
	CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.
 
HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.
 
Ainsi, les avantages des feuilles de style sont multiples :
 
    <a href="">* La structure du document et la présentation sont gérés dans des fichiers séparés.</a>
    * La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
    * Dans le cas d'un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un "relookage" rapide.
    * Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style.
    * Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.
 
	<a href="">Cliquer ICI</a>
</div>
</body>
</html>

Style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
html 
{
margin: 0px;
padding: 0px;
}
 
body
{
margin: 0px;
padding: 0px;
font : 13px Arial, Helvetica, sans-serif;
color: #000000;
background-color:#669933;
}
 
#main
{
/** modif **/
position:relative;
z-index:100;
/** fin modif ***/
margin-top:30px;
margin-left:auto;
margin-right:auto;
width:650px;
height:382px;
background-image: url('fond.png');
background-repeat: no-repeat;
background-position:0% 0%;
}

Je m'en remets donc à vous, attendant patiemment, vos idées et solutions.

Merci d'avance

**efficks** · 13/07/2006, 03h59

Premièrement... BUG d'Internet Explorer car sous Firefox aucun problème (ton code est donc correct)
Mais pour régler le problème alors là je ne sais pas trop comment.
Essaie de mettre un z-index:100 à ton main.

**Rayniac** · 13/07/2006, 18h51

Non le z-index ne modifie rien. Peux tu me détailler ton bug?
Car normalement ma page fait que sous IE, elle active le filtre precédemment cité afin de pouvoir afficher la transparence de mon fond.

Le problème est donc bien une désactivation du contenu

[PNG] Désactivation du contenu sous IE

HTML

Vue hybride

Discussions similaires

Partager

Partager