DIV position absolute fullscreen ?

Signaler
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Salut à tous ! :-)

J'aimerais griser le contenu d'une page quand j'affiche un div au dessus. Par exemple une image. J'ai déjà vu ça mais je ne retrouve plus d'exemple. (et en général on doit cliquer sur l'image ou sur le fond pour fermer le div et dégriser le fond)

Sur firefox, j'arrive à faire ce que je veux mais (pour changer) ça ne fonctionne pas sur IE...

Il ne prend pas le height = 100%...

J'ai vu qu'en mettant le HTML et le BODY à 100% aussi, on pouvait réussir mais pas dans le cas d'un objet en position absolue...

Donc question :

Est-il possible de faire un DIV fullscreen qui soit positionné au-dessus de la page (en position absolue donc) ? Et sans passer par du javascript qui calculerait la taille de l'écran, on n'est jamais sûr que ça fonctionnera partout... (AvailHeight et compagnie, bof bof)

Merci d'avance.

9 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
bonjour,

>>Sur firefox, j'arrive à faire ce que je veux
    c'est bien.

>>mais (pour changer) ça ne fonctionne pas sur IE...
    et à mon avis : ce sera comme d'habitude ! 
        tu ne doit probablement pas faire ce qu'il faut, faire une erreur...

    question on peut dire récurente... tu as cherché dans ce forum ?
    et sans le moindre bout d'extrait de ce que tu fais... difficile !





<hr />




Cordialement                Bul         [mon Site]     [M'écrire]<hr />
En général, c'est absurde de généraliser.
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009

Hello bultez,

merci de ta réponse (même si je la trouve un poil ironique et dédaigneuse).

J'ai refait une page vierge pour bien isoler mon problème et voici ce que j'obtiens :

avec ce code, ça fonctionne sur IE et Firefox :
<hr size="2" width="100%" /><html>
<head>

<style>

body
{
    margin: 0px;
}

.fullScreen
{
    position:absolute;
    left: 0px;   
    top: 0px;
    background-color: black;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=70);
    opacity: 0.5;
}

</style>

</head>

CONTENT BEHIND DIV

</html>
<hr size="2" width="100%" />

Par contre, si je place le div dans un tableau, cela ne fonctionne plus sous IE... Il prend en compte le background noir et la position absolue mais plus l'opacité ni les width et height. Je n'ai plus qu'un petit rectangle noir en haut à gauche de ma page.
Voici le code :
<hr size="2" width="100%" /><html>
<head>

<style>

body
{
    margin: 0px;
}

.fullScreen
{
    position:absolute;
    left: 0px;   
    top: 0px;
    background-color: black;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=70);
    opacity: 0.5;
}

</style>

</head>

    ----

                    CONTENT BEHIND DIV
       ,
   
    ----

                   

       ,
   

</html>
<hr size="2" width="100%" />
Voilà, j'espère avoir été plus clair. :-)

Merci encore
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
plutôt curieux de mettre ça dans un tableau ? non ?
je ne vois pas pourquoi faire ? si le div doit affecter tout l'écran !

mais c'est vrai que, là aussi/encore, IE et FF se comportent
    de manière différente. hélas.

tu as essayé en mettant <table class="fullScreen">
    ou <tr class="fullScreen>  ou
<td class="fullScreen>

    au lieu  de le mettre dans le div ?

   ce qui me semble plus logique (?) et là, ça baigne.
    (
si ça te convient, sinon il

       va falloir trouver autre chose )


    ou même :
&nbsp;




>>même si je la trouve un poil ironique
    certes, jen conviens.
    on met très souvent IE en cause de manière injustifiée,
       très souvent il n'y est pour rien le pôvre, c'est l'utilisation
          qui en est faite qui pêche.
    de plus, ce n'est pas parce que  FF et IE "gérent les choses autrement"
        que l'un a raison et l'autre tort. 
    c'est une plaie, je suis d'accord.

>>et dédaigneuse
    ah, pas du tout.
    c'est toi qui le fut avec IE, qui, franchement, ne mérite pas ça.
   
    Je tiens à préciser, que je ne suis pas un "pro ie", comme on m'a
        déjà dit ! Pour être clair, ce n'est même pas mon navigateur par
        défaut. Je t'aurais dit la même chose si ta remarque ( comme
        d'habitude ça ne marche pas avec FF ) concernait FF.

<hr />
Cordialement            Bul         [mon Site]     [M'écrire]<hr />En général, c'est absurde de généraliser.
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009

Re,

pour l'utilisation d'un tableau, c'est un cas particulier dans le sens où il s'agit d'un portail dans lequel on place différents modules. Donc, pour le dev d'un module, je ne peux pas aller placer le div sur la page conteneur.

De même, je ne peux pas modifier les styles des tableaux conteneur...

Pas gagné on dirait. :-/
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009

Et en rajoutant du contenu dans le div, ça réagit de la même manière.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
>>Pas gagné on dirait. :-/

    effectivement, si tu n'es autorisé à toucher qu'au div et
       en le laissant là où il est !
    ( pour IE, les 100% s'appliquent par rapport au td qui
        contient le div, ce qui n'est pas le cas de FF )
   
    je ne sais pas si on peut "forcer" autrement en html,css
        en mettant la taille en fixe, width:1024px... [ houla ! :o) ]
        ou  ( je te cite )  javascript qui calculerait la taille de l'écran !
        ... peut-être d'autres pistes ?





<hr />




Cordialement            Bul         [mon Site]     [M'écrire]<hr />
En général, c'est absurde de généraliser.
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009

Ouaip, j'vais essayer avec du javascript alors. Sinon ben j'me passerai de ce bel effet pour afficher les photos.

Merci bultez !
Messages postés
35
Date d'inscription
samedi 16 août 2003
Statut
Membre
Dernière intervention
23 février 2009

Sinon tu dis que le 100% s'applique par rapport au td qui contient le div, je pense en effet que c'est le cas sous IE mais comment expliques-tu qu'il n'applique plus la transparence ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
    je n'explique rien du tout...
si tu enlèves width et height : transparence ok.
il reste de nombreuses choses qu'IE doit apprendre
au niveau CSS ! et moi encore plus !! 
<hr />



Cordialement                Bul         [mon Site]     [M'écrire]<hr />
En général, c'est absurde de généraliser.