Faire une inscription stylé

brice97423 Messages postés 707 Statut Membre -  
brice97423 Messages postés 707 Statut Membre -
Bonjour, je cherche à faire une page d'inscription style, comme tom's guide

une petite fenêtre s'ouvre au centre et autour on vois en transparence le reste du site !!

vous avez pas compris ?? pas grave: suivez ce lien puis cliquer sur se connecter, vous verrez une nouvelle fenêtre qui s'ouvre au centre et autour on vois en transparence le reste du site

https://www.tomsguide.fr

Voila c'est ce genre de style la que je voudrai faire, si quelqu'un sais de quoi il saggit ;)

et comment s'appelle ce genre de style ?

Merci ;)

--
   Commentcamarche = S-U-P-E-R site ^^
Configuration: Windows Vista
Firefox 3.0.6

11 réponses

  1.
    burnedsyn Messages postés 174 Statut Membre 16
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>test login sur div</title>
<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


 <style type="text/css">
 body {
    background-color: white;
font-family: Verdana;
font-size: 12px;
color:#000000;
margin:0px;
text-align : center;


}

.page {
    position : relative;
    width :813px;
    height : 800px;
    margin: 20px auto;
    text-align: left;
    display: none;
}

.logbox
{
   background-color: silver;
   width: 100%;
   height: 100%;
    filter: Alpha(opacity=20);
    -moz-opacity: .20;
    -khtml-opacity: 0.20;
    opacity: .20;

}
.logheader
{
  visibility : hidden
    position : relative;
    width :200px;
    height : 15px;
    margin: auto auto;
    text-align: center;
    background-color:#003366;
    color:#FFFFFF;

}
 </style>
</head>

<body onload="showhide('backform');">
<p><a href="#" onclick="showhide('DivNews1');">Show/hide me</a></p>
<DIV class='page' id='DivNews1'>
    <DIV class='logbox' id='backform' ><p>ceci est le fond</p><p>et doit etre transparent</p>
    <DIV class='logheader' id='frm1' ><p>Ici tu developpe ton form en parametrant mieux le css tu n'auras aucuns mal</p></DIV></DIV>
 </DIV>
</body>

</html>
    1
  2. burnedsyn Messages postés 174 Statut Membre 16
     
    tu crée une div qui n'est pas visible au demarrage et sur le click tu la rend visible tu auras bien sur joué sur deux div l'un ou tu baisse l'opacité (transparence de ton site) et l'autre ou tu place le form de connexions.

    Bonne journée
    0
  3. gigaga Messages postés 2347 Date d'inscription   Statut Membre Dernière intervention   301
     
    Déjà fait... Il faut que tu mette une div centrée sur ta page et une autre qui prend tout l'écran.
    Ces 2 div doivent être caché avec la 1ere prenant tout l'écran tu dois mettre le style avec de la transparence. Au click de "se connecter", tu changes l'affichage de ces div en javascript pour les rendre visibles.
    0
  4. burnedsyn Messages postés 174 Statut Membre 16
     
    les grands esprits se rencontre...
    0
    1. gigaga Messages postés 2347 Date d'inscription   Statut Membre Dernière intervention   301
       
      oops, tu as été plus rapide ;)
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. brice97423 Messages postés 707 Statut Membre 42
     
    j'ai pas trés bien saisi mais bon
    0
  7. burnedsyn Messages postés 174 Statut Membre 16
     
    bien brice
    dans ton fichier html

    tu crée deux div avec deux style précis

    la première style widht & height 100% opacité 25%

    la deuxieme centré dans la première et plus petite évidement contient ton formulaire

    leur attribut de visibilité est a faux au chargement de la page

    lorsque l'on click sur ton bouton pour se loger alors les deux div sont rendue visible par une javascript que tu auras fais

    voila la marche a suivre

    tim si tu veux plus d'info dis le
    0
  8. brice97423 Messages postés 707 Statut Membre 42
     
    ok je vois mieu ;)

    enfaite je créé un div id="transparence" (par ex) avec 100% widht et height et 25% d'opacité

    ensuite je créé un autre div id="inscription" centrer avec mon formulaire

    ensuite grace au javasript je rassemble les 2 div !! C'est bien sa ??? lol

    1q: Pour l'opacité comment je dois l'écrire dans la feuille css ?? opaciter: 25% ??
    2q: dans le 1 er div je mettrai rien ?? que la transparence ?
    3q: Quel et le code javasript pour rassemble ces 2 div ??

    dsl pour toutes ces questions lol mdr
    0
  9. brice97423 Messages postés 707 Statut Membre 42
     
    petit up ;)
    0
  10. burnedsyn Messages postés 174 Statut Membre 16
     
    attend je te concocte cela
    0
  11. brice97423 Messages postés 707 Statut Membre 42
     
    YEP ;) Merci mec c'est presque se que je voulez je vais essayer de le modifier pour que sa soit + adapté a mon site

    Merci

    [Résolu]
    0
  12. brice97423 Messages postés 707 Statut Membre 42
     
    Eu en faite :( se que je voulez c'est plutot le contraire c'est quand on clique sur le bouton inscription ("Show/hide me") que le site devient transparent (un peut blanchi) et que le formulaire d'inscription s'ouvre centrer plus petit avec 100% d'opacité comme la page de connexion de Tom's Guide

    J'ai essayer de changer le css mais cela ne marche pas je pense qu'il s'agit du javasript

    0