begin process at 2010 03 21 06:42:29
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

DIV position absolute fullscreen ?

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

DIV position absolute fullscreen ?

jeudi 30 août 2007 à 17:33:09 | DIV position absolute fullscreen ?

guepard53
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.
vendredi 31 août 2007 à 11:35:11 | Re : DIV position absolute fullscreen ?

bultez

Membre Club




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 !

Cordialement                Bul         [mon Site]     [M'écrire]
 En général, c'est absurde de généraliser.
lundi 3 septembre 2007 à 11:37:28 | Re : DIV position absolute fullscreen ?

guepard53
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 :
<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>
<body>
CONTENT BEHIND DIV
<div class="fullScreen"></div>
</body>
</html>


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 :
<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>
<body>

<table>
    <tr>
        <td>
            CONTENT BEHIND DIV
        </td>
    </tr>
    <tr>
        <td>
            <div class="fullScreen"></div>
        </td>
    </tr>
</table>

</body>
</html>

Voilà, j'espère avoir été plus clair. :-)

Merci encore
lundi 3 septembre 2007 à 12:05:59 | Re : DIV position absolute fullscreen ?

bultez

Membre Club





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 : <div class="fullScreen">&nbsp;</div>
>>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.

Cordialement            Bul         [mon Site]     [M'écrire]
En général, c'est absurde de généraliser.
lundi 3 septembre 2007 à 13:05:18 | Re : DIV position absolute fullscreen ?

guepard53
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. :-/
lundi 3 septembre 2007 à 13:09:12 | Re : DIV position absolute fullscreen ?

guepard53
Et en rajoutant du contenu dans le div, ça réagit de la même manière.
lundi 3 septembre 2007 à 13:40:54 | Re : DIV position absolute fullscreen ?

bultez

Membre Club






>>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 ?

Cordialement            Bul         [mon Site]     [M'écrire]
 En général, c'est absurde de généraliser.
lundi 3 septembre 2007 à 13:47:42 | Re : DIV position absolute fullscreen ?

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

Merci bultez !
lundi 3 septembre 2007 à 13:51:25 | Re : DIV position absolute fullscreen ?

guepard53
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 ?
lundi 3 septembre 2007 à 13:59:40 | Re : DIV position absolute fullscreen ?

bultez

Membre Club
Hein.gif    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 !!  neutre.gif
Cordialement                Bul         [mon Site]     [M'écrire]
 En général, c'est absurde de généraliser.


Cette discussion est classée dans : page, fullscreen, position, div, absolute

Répondre à ce message

Sujets en rapport avec ce message

Modification de tableau par balise div [ par gourango ] Boujour et bien voila un grand probleme se pose la comptabilitee :J ai cree un script pour mon site malheureusement imcompatible avec ie !!!(internet Position de DIV aléatoire [ par skullo ] Bonjour à tous !Je ne sais pas si ce que j'aimerai faire est réalisable en html et css mais je demande quand même au cas où.Pour l'explication en déta Récupérer la longueur d'une div et l'appliquer à une autre. [ par chiktika ] Bonjour,Voila, J'ai un div (div id="contenu") dont la longueur dépend de la longueur d'un texte qui varie à chaque page html.J'ai un deuxième div (div Position de la sourie sur une image [ par Gally ] Bonjour a tous,J'ai une nouvelle petite question: Est-il possible de connaitre la position de la sourie sur une image ou meme sur un Div et cela en pi Editeur de texte en ligne avec des objets dragables [ par calitom ] Bonjour, Je cherche a faire une page permettant de regroupper plusieurs DIV draggables dans un DIV général. - En gros, il y aurait un DIV général. - E ouverture page html dans une balise div avec xmlHttpRequest [ par romain_pil ] pil_poilBonjour à tous,J'ai fais le choix d'utiliser une balise div plutot qu'une iframe pour afficher une page html dans une autre. J'utilise XmlHttp deplacer des div avec la souris [ par reski_01 ] bonjour a tous, j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter je voudra Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu Centrer un div [ par coyote ] Je voudrais centrer un div (qui apparait)  lors d'un clic souri. Le probleme est que je veux le centrer relativement au scroll de la page: la page aya Cacher balise DIV [ par aloisio11 ] Bonjour,J'utilise ce code pour cacher des parties () de ma page :document.getElementById('DivIcones').style.display='none';Il fonctionne avec


Nos sponsors


Sondage...

Comparez les prix


HTC Tattoo
Entre 9€ et 329€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,328 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)