Transparence d'une DIV avec -moz-opacity:0.9 Ok IE7, Non IE8 et FF

**youri89** · 03/07/2009, 01h02

Bonjour,

J'essaye de faire apparaitre une div avec une opacité de 90 % sous une photo zoomée.
http://www.traineaux-randonnee.com/c...her_popote.php

Sur IE7 et IE8 avec affichage de compatibilité, j'ai bien ma div fond_photo qui apparait en dessous de ma div ou apparait la photo zoomée.

Sur FF ou IE8 en mode normale : pas de fond

J'ai aussi 2 autres soucis :
- la div ou apparait zoomée doit ce centrer horizontalement en modifiant la marginLeft avec Javascript : Ok sur IE7 ou IE8, sur FF : il reste placer à gauche du milieu de la page et ne vient pas se recaller au centre.

- Sur FF, la largeur de la DIV parente se cale sur la largeur maxi des div enfants. Sur IE, j'ai une des div enfant qui déborde du cadre (la légende sur les photos portrait)

Voila le code HTML des Div

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<body >
<div id="fond_photo"><a name="fenetre_photos"></a></div>
 
<div id="chargement_photo">Chargement en cours</div>
<div id="photos">
<div id="bandeau_photo" ><a href="#photo3" id="retour_gr" onClick="JF_photos_fermer()">Fermer la fenêtre</a></div>
<div id="affichage_photos" ><img id="photo_gr" src="" alt=""/></div>
<div id="legende_photo"  ><form name="legende">
<textarea id="titre" rows="2" name="accroch_objet" readonly="yes" /></textarea>
</form></div>
</div>
<div id="container">

Voila le code de l'image HTML

Code :

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

1
2
3
4
5
6
7
 
<div id="affiche_photo" style="float:left">
<center><a name="photo1"></a><a href="#fenetre_photos" onClick="JF_photos('photo1','../../images/materiel/musher/popote_gr.jpg',326,'Bivouac dans un trou à neige  _ &copy; Thierry Narcy');">
<img id="photo" src="../../images/materiel/musher/popote.jpg" border="0" alt="Bivouac dans un trou à neige  &copy; Thierry Narcy">
</a><br />
<span class="legende">Bivouac dans un trou à neige <br />&copy; Thierry Narcy</span></center>
</div>

Coici le code CSS

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
 
div#fond_photo {position:absolute;z-index:96; background-color:#554336; width:100%; height:1000%; visibility:hidden; top:0px; left:0px; -moz-opacity:0.9;
opacity: 0.9;
filter:alpha(opacity=90);
 }
img#photo { border : 4px solid #8F725D; }
img#logo { border : 2px solid #8F725D; }
 
div#chargement_photo {z-index:97; position:absolute; top: 10px; padding:20px; visibility:hidden; background-color:#2A0000; vertical-align:center; text-align:center; border : 2px groove white; color:#FFFFFF; font-size:40px; left:50%; }
div#photos { z-index:99; position: absolute; top: 60px; margin:0; visibility:hidden; background-color:#2A0000; vertical-align:center; text-align:center; border : 2px groove white; left:50%; }
div#photos img {border : 3px groove white; margin : 10px;}
div#bandeau_photo {height:20px; background:#A52614; }
div#bandeau_photo a {color: #000000; border-bottom-style: none; }
div#affiche_photo { margin: 10px; padding:0 0 0 0; vertical-align:top; }
div#affiche_logo { margin: 10px 10px 10px 10px; padding:0 0 0 0; }
div#affiche_photo a {border-bottom-style: none; }
div#affiche_logo a {border-bottom-style: none; }
div#legende_photo form textarea#titre {background-color:#2A0000; font-weight: bold; font-size:10pt; text-align:center; vertical-align:super; BORDER-STYLE:none; overflow:hidden; margin-bottom: 20px; color:#999999;  };
div#centrage_photo { width:100%; height:100%; background:none; vertical-align:middle; text-align:center;  }
.legende {text-align: center; font-size:10px; }

Et pour finir, voici le code Javascript

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
 
function JF_photos(nb,URL,large,legend){
var margin=large*0.5*(-1);
var long=legend.indexOf(' - ',0);
if(long==-1) {long=legend.length}
legend=legend.replace(' _ ', '\r\n');
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
document.getElementById('photos').style.visibility="hidden";
document.getElementById('chargement_photo').style.visibility="visible";
document.getElementById('fond_photo').style.visibility="visible";
document.images['photo_gr'].src=URL;
document.images['photo_gr'].alt=legend;
document.getElementById('titre').cols=long;
document.getElementById('photos').style.width=large;
document.getElementById('photos').style.marginLeft=margin;
document.getElementById('bandeau_photo').style.width=large;
document.getElementById('chargement_photo').style.width=large;
document.getElementById('retour_gr').href="#"+nb; 
document.getElementById('titre').value=legend;
ident=setTimeout("JF_affichage_photos()",100);
}
 
function JF_affichage_photos(){
if(document.images['photo_gr'].complete) {
document.getElementById('chargement_photo').style.visibility="hidden";
document.getElementById('photos').style.visibility="visible";
}
else
{ident=setTimeout("JF_affichage_photos()",100);}
}
 
function JF_photos_fermer(){
document.getElementById('photos').style.visibility="hidden";
document.getElementById('fond_photo').style.visibility="hidden";}

Voili Voila, il y a encore des trucs à finir comme centrer la balise "Chargement en cours" par exemple...

Merci de votre aide

**youri89** · 18/07/2009, 02h22

Bon, pour la div fond de photo, transparente, j'ai trouvé, j'avais mis un commentaire avec <!-- au lieu de /*

IE 7 et IE6 qui sont pas rigoureux l'acceptait
IE8 et FF qui sont plus rigoureux non.

Couillon comme truc.

Transparence d'une DIV avec -moz-opacity:0.9 Ok IE7, Non IE8 et FF

CSS

Discussions similaires

Partager

Partager