Transparence d'une DIV avec -moz-opacity:0.9...

Youri89 · 2 Juillet 2009

Bonjour,

J'essaye de faire apparaitre une div avec une opacité de 90 % sous une photo zoomée.

http://www.traineaux-randonnee.com/cadre/m...sher_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

<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

<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  _ © Thierry Narcy');">
<img id="photo" src="../../images/materiel/musher/popote.jpg" border="0" alt="Bivouac dans un trou à neige  © Thierry Narcy">
</a><br />
<span class="legende">Bivouac dans un trou à neige <br />© Thierry Narcy</span></center>
</div>

Coici le code CSS

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

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

Modifié 3 Juillet 2009 par Monique
Merci d'utiliser codebox pour plus de 10 lignes de code :)

lorem_ipsum · 3 Juillet 2009

Salut,

pourquoi n'utilises tu pas un fond "monBgDiv-trans.png" plutôt que de surcharger de code?

Ok sous ie6 pas de gestion png, mais au pire tu met un hack ie6 pour qu'il utilise un font noir...

Il me semble avoir vu un hack png pour ie6 qui gère le repeat des background mais j'ai plus le lien :sick: .

Pour la question du fond, quand je n'ai pas de hauteur définie, je met un petit : overflow:hidden;

et pouf il s'adapte au contenu, sinon sous ff mon fond n'apparait pas.

Bon courage

Youri89 · 3 Juillet 2009

Merci,

Visiblement, c'est pas un problème d'opacité.

C'est un problème d'affichage de la DIV. Le bug doit être dans le Javascript ou dans le HTML avec l'ordre des DIV ????

Par contre au niveau du CSS, il reste le centrage de la photo sur FF :mad2:

Connexion

Transparence d'une DIV avec -moz-opacity:0.9...

Sujets conseillés

Youri89

Lien vers le commentaire

Partager sur d’autres sites

lorem_ipsum

Lien vers le commentaire

Partager sur d’autres sites

Youri89

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité