28173 sujets

CSS et mise en forme, CSS3

Un div un peu spécial au premier plan

Bonjour,

dans le cadre d'un projet scolaire à terminer j'aurais besoin d'un petit coup de pouce Smiley ravi
Je souhaite qu'un administrateur de mon site puisse poster des news, des articles avec possibilité d'ajouter une galerie photo à chaque fois.
Or, pour uploader les photos j'ai trouvé un script sympa permettant de ne pas recharger la page à chaque upload.

Quel est le rapport avec la choucroutte ? J'y viens Smiley cligne

Je voudrais que ce formulaire d'upload apparaisse dans un div en premier plan et qu'il bloque tout le reste du site... J'ai déjà vu ça sur certains sites : le div en premier plan empeche les clics ou les saisies clavier sur tout le reste du site.

Auriez-vous un tuto à me proposer ? Des conseils, astuces à donner ? Smiley smile

Merciiii !
Ce que tu decris est une "lightbox" en gros si j'ai bien compris.
il y a des tas d'exemple sur le web.
Le principe est de superposer un container en position absolue (par rapport au body) qui occupe toute la largeur et la hauteur de l'ecran, sur lequel tu peux changer l'opacité pour que l'utlisateur distingue bien que l'arriere plan est indisponible.
a la suite de ce div tu auras le container pour ton formulaire.

ex simplifié:

<html>
...
<body>
   <h1>titre</h1>
   <p>texte</p>
   ....
   <div id="overlay"></div>
   <form>
      ...
   </form>
</body>
</html>


CSS:

div#overlay
{
   display:block
   position:absolute;
   left:0;
   top:0;
   width:<largeur de l'ecran>px; /* peut etre modifié en "live" par un script js */
   height:<hauteur de l'ecran>px;
   z-index:100;
   opacity:0.5;
}


Mon exemple ne prend pas en compte les problemes relatifs au difference entre navigateur mais est juste une piste pour t'aider a avancer...

a+
Modifié par mephisto (06 Feb 2008 - 17:33)
Bah que répondre d'autre : niquel Smiley cligne
Je savais pas comment ça s'appelait en fait mais tes explications sont claires je pense pouvoir faire ça ^^

Merci !
Sujet clos
Aller à