Comment créer une page d'inscription stylé ??

Signaler
Messages postés
9
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
12 novembre 2009
-
Messages postés
9
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
12 novembre 2009
-
Bonjour je cherche à faire une page d'inscription stylé genre comme tom's guide


Une petite fenêtre centrer s'ouvre et autour on vois le reste du site en transparence


Je sais qu'il faut créé 2 div:


- le 1er avec 100% de width et de height et 25% d'opacité

- le 2eme avec la fenêtre de formulaire d'inscription centrer


puis on rassemble les 2 avec un code javasript (que je ne connais pas)


Mais quel et le code CSS pour l'opacité ??

Qu'esqu'ont met dans la 1er div à par le height witdth et l'opacité ??

Qu'elle et le code javasript pour rassembler ces 2 div ?


Si quelqu'un a une methode + facile


Merci

4 réponses

Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
42
salut
en definissant opacity et float tu devrais y arriver.

en cherchant un peu sur google tu devrais trouver comment on fait.
Messages postés
9
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
12 novembre 2009

Oui mais j'aimerai savoir le nom de ce style pour pouvoir chercher sur google
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
42
opacity et float
Messages postés
9
Date d'inscription
lundi 9 février 2009
Statut
Membre
Dernière intervention
12 novembre 2009

J'ai réussi à choper un code qui fait PRESQUE pareil sauf que lui il le
fait a l'inverse quand on clique sur le lien c'est une fenêtre
transparente qui s'ouvre avec 100% d'opacité

Voici le code:

<!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 : 400px;

margin: 20px auto;

text-align: center;

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>




[# Show/hide me]





ceci est le fond

et doit etre transparent



Ici tu developpe ton
form en parametrant mieux le css tu n'auras aucuns
mal







</html>

Testez ce code vous verrez un lien "Show/hide me" cliquez dessus, puis vous verrez une fenetre grise une peut transparente avec un opacité de .20

Moi enfaite moi, je voudrai faire le contraire, quand on clique sur le lien le site (la parti blanche) devienne transparente (elle blanchi) puis un formulaire de connexion s'ouvre au centre avec une opacité à 100%

Si vous avez pas compris allez sur www.tomsguide.com puis cliquez sur "Se Connecter" vous verrez que le site ce blanchi puis ouvre un formulaire. C'est exactement ce genre de style que je voudrai faire