28172 sujets

CSS et mise en forme, CSS3

Display: block; position: fixe; width: 100¨%; height: 100%

Bonjour.

Voilà ce que j'essaie d'obtenir :

au chargement de la page, le contenu est "voilé" par un "masque" gris léger ; au centre de la fenêtre est affichée un cadre, en cliquant sur ce cadre, grâce à javascript, le masque gris disparaît, ainsi que le cadre central, pour laisser voir ce qui est "derrière".

Voici ce que j'ai écrit :
<html lang="fr-fr">
    <head>
        <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
        <title>
            essai3
        </title>
        <meta content="&copy;Piteur511" name="author">
        <style type="text/css">
        * {
        margin: 0;
        padding: 0;
        }
        #conteneur {
        background-color: yellow;
        }
        #couvrant {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(noir-50-pourcent.png);
        z-index: 2;
        }
        #elcentre {
        width: 102px;
        height: 98px;
        text-align: center;
        background-color: #efebff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -49px;
        margin-left: -51px;
        z-index: 5;
        }

        </style>
[#red]        <!--[if lte IE 7]>
                    <style type="text/css">
                    #couvrant {
                    display: none;
                    </style>
        <![endif]-->[/#]
        <script language="JavaScript" type="text/JavaScript">
<!--
        function MM_findObj(n, d) { //v4.01

        [#cyan](.......)[/#]

        //-->
        </script>
    </head>
    <body>
        <div id="conteneur">
            <p>
                Texte situé au fond
            </p>
            <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
            <div id="elcentre" onclick="MM_changeProp('couvrant','','style.display','none','DIV');MM_changeProp('elcentre','','style.display','none','DIV')">
            A centrer
            </div>
            <div id="couvrant"></div>
        </div>
    </body>
</html>


Le problème vient de IE6 (encore passablement utilisé, quoi qu'on y fasse), si on n'utilise pas le commentaire conditionnel que j'ai introduit ; le "masque gris" reste sous le DIV principal et ne masque rien du tout, en étant affreusement inesthétique.

Y a-t-il un moyen de contourner ce problème autrement qu'en réécrivant une page spécifique pour IE6 (et 7 ?) ? Laquelle d'ailleurs ??? Smiley confus

Merci beaucoup pour toute aide.

PS. Désolé, j'ai dû enlever le code javascript : il contient des "i" entre crochets qui sont interprétés dans le message comme des balises pour "italiques"...
Modifié par Piteur511 (21 Mar 2010 - 00:12)
Sujet clos
Aller à