Faire une inscription stylé

brice97423 Messages postés 666 Date d'inscription Statut Membre Dernière intervention -
brice97423 Messages postés 666 Date d'inscription Statut Membre Dernière intervention - 16 févr. 2009 à 14:37

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 ;)

Afficher la suite

A voir également:

Faire une inscription stylé
Style word - Guide
Wetransfer gratuit sans inscription - Guide
Twitter inscription - Guide
Vinted inscription - Guide
Tchat gratuit sans inscription - Accueil - Réseaux sociaux

11 réponses

Réponse 1 / 11

burnedsyn Messages postés 170 Date d'inscription Statut Membre Dernière intervention 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>

Réponse 2 / 11

burnedsyn Messages postés 170 Date d'inscription Statut Membre Dernière intervention 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

Réponse 3 / 11

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.

Réponse 4 / 11

burnedsyn Messages postés 170 Date d'inscription Statut Membre Dernière intervention 16

les grands esprits se rencontre...

gigaga Messages postés 2347 Date d'inscription Statut Membre Dernière intervention 301

oops, tu as été plus rapide ;)

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

Posez votre question

Réponse 5 / 11