Div recouvrant la totalité du site

Bonjour,

J'ai un problème sur un site. Je voudraisfaire un "voile" noir sur la totalité de mon site.

J'ai fait un div avec width et height de 100% mais il recouvre seulement la partie afiché de la fenetre.
Dès que l'on scroll, on ne voit plus le div.

Mon problème est ici (cliquer sur "calculer le tarif").

Merci d'avance
Modifié par 01Ga (13 Apr 2008 - 14:12)

Est ce que mettre la position de ton DIV a fixed fonctionnerai ? en temps normal ça devrait être ça ...

Ou peut etre spécifier un min-width pour ton div, c'est ce que l'on ma expliqué hier
Modifié par Sabot4ge (13 Apr 2008 - 15:07)

Mais la le problème vient surtout du fait qu'il y ai la barre de scroll qui fait que quand il descend la div ne recouvre pas ce qui a en dessous, donc je pense que quand on met 100%, la div se met à 100% de la zone affichable, et non pas a 100% de la taille du document complet ...

Oui et si tu fixes un min-width à la taille voulue pour ton div, ca devrait fonctionner, en tout cas ca a marché pour moi hier

D'accord, donc en mettant le min width à 100% cela recouvrira la totalité du site, y compris ce qui a en dessous du scroll ? ou alors il faut mettre un valeur bien plus grande pour être sur que cela recouvre tout ? (dsl mais en même temps je m'informe car je tomberai bien sur ce problème un jour )

Bonjour,

Min-width (permet de fixer une largeur minimale) ne sert à rien dans ce contexte ... Par contre, l'utilisation de la propriété "position" avec sa valeur "fixed" est pertinente (mais ne résoudra pas le probleme sous IE6).

Bonne continuation.
Romain

Bonjour,

min-width n'a effectivement rien à voir avec ce problème. À savoir que le problème est le suivant: il n'y a pas de moyen en CSS de demander à un bloc de prendre «toute la hauteur du contenu de la page».

Les scripts Javascript qui utilisent ce mécanisme (exemple: lightbox JS) passent par Javascript pour calculer la hauteur totale de la page et donner à un bloc la hauteur correspondante en pixels (idem pour la largeur).

Une solution en CSS seul est effectivement de créer un bloc comme ceci:

div#overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.8); /* ou avec un PNG translucide pour une meilleure compatibilité */
}

Ça devrait marcher avec IE7, mais ça ne passera pas avec IE6.
Modifié par Florent V. (13 Apr 2008 - 16:34)

Bonjour,

avec un min-height suffisement haut et un height en commentaire conditionnel pour IE6, est ce que cela ne règerai pas le problème?

a écrit :
avec un min-height suffisement haut et un height en commentaire conditionnel pour IE6, est ce que cela ne règerai pas le problème?

Oui mais non ... on peut effectivement là jouer comme cela mais le problème ne sera pas régler pour autant :
- Scrollbar verticale inutile dans le cas où la page est "courte".
- Overlay trop court dans le cas où la page est longue.
(Bref solution au petit bonheur la chance ... )

A mes yeux, ce qui reste le "plus robuste" :
- position fixed pour tout le monde ;
- script JS de calcul des dimensions de la page pour IE 6.

Pas mieux .

Il semblerait que cela ne soit utilisé que sur une seule page dont le contenu est connu et non variable.

Donc dans ce cas précis height et min-height peuvent être une alternative.

J'allais dire que l'on évitait même la désactivation de js mais dans ce cas là c'est carrement le formulaire qui est inutilisable et pause un problème bien plus important qu'une simple histoire de hauteur.
Modifié par knarf (14 Apr 2008 - 05:02)

Re,
tout d'abord merci pour le flot de réponse, ca fait plaisir !

Effectivement, Florent V. a bien compris.

Tu parlais de javascript pour calculer la taille, comment faire avec js ?
Cette solution fonctionne t'elle pour ie 6, 7 et ff ?

01Ga a écrit :
Tu parlais de javascript pour calculer la taille, comment faire avec js ?

Aucune idée. Apprendre les bases de Javascript, faire une recherche sur la question et/ou poser la question dans le salon ad hoc.

01Ga a écrit :
Cette solution fonctionne t'elle pour ie 6, 7 et ff ?

À priori oui.

Hors sujet (quoique cela résoudrait le problème):

Je ne comprends pas pourquoi s'obstiner à rendre un formulaire tous ce qu'il y' a de plus simple en quelquechose de fastidieux avec des risques d'inaccessibilité tous cela pour suivre la mode.

Il serait pas mieux juste en dessous ce formulaire avec un beau fieldset "calcul du prix horaire" ?

Plus de problème de hauteur de div.
Plus de risque de rendre le formulaire inutilisable.
Pas de javascript.
Un gain de temps pour le devellopeur
Un gain de temps et de manipulation pour l'internaute.

Alors c'est vrai ça fait tendance ce genre de présentation mais je ne suis pas persuadé que dans le cas présent son utilisation soit pertinente.
Modifié par knarf (14 Apr 2008 - 16:54)

a écrit :
Alors c'est vrai ça fait tendance ce genre de présentation mais je ne suis pas persuadé que dans le cas présent son utilisation soit pertinente.

+1. Le truc c'est, comme tu le dis, un effet de mode qui n'a que comme raison d'être sa présentation.

Florent V. a écrit :
Bonjour,

min-width n'a effectivement rien à voir avec ce problème. À savoir que le problème est le suivant: il n'y a pas de moyen en CSS de demander à un bloc de prendre «toute la hauteur du contenu de la page».

Les scripts Javascript qui utilisent ce mécanisme (exemple: lightbox JS) passent par Javascript pour calculer la hauteur totale de la page et donner à un bloc la hauteur correspondante en pixels (idem pour la largeur).

Une solution en CSS seul est effectivement de créer un bloc comme ceci:

div#overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.8); /* ou avec un PNG translucide pour une meilleure compatibilité */
}

Ça devrait marcher avec IE7, mais ça ne passera pas avec IE6.

Parfait ca fonctionne nickel sous ie7 et firefox !
ça fait déja ca en moins.

Reste le problème d'ie 6:'(

a écrit :
Reste le problème d'ie 6:'(

+ les problèmes de navigation au clavier
+ les problèmes en cas de navigation sans javascript
+ les problèmes rencontrés par les personnes qui vont faire page précédente et se retrouverons jettées on ne sait où.

Ca fait beaucoup de problèmes alors qu'il ne devrait y en avoir aucun.

Sur le public que je vise, peu auront ie6. Et encore moins voire aucun sans javascript.

Si j'avais voulu faire un site labelisé AccessiWeb, j'aurais passé dix fois plus de temps.
Ce n'est pas le but recherché pour un site que je fait gratuitement.

Si tu veux le faire par contre n'hésite pas.

Merci de votre aide en tout cas.