[RESOLU] Volet coulissant

Eléphanteau du PHP | 40 Messages

14 déc. 2015, 16:11

Bonjour voilà mon problème en faite je veut faire un volet coulissant pour se connectez comme ceci :

http://zupimages.net/viewer.php?id=15/51/tcro.jpg

j'ai pris l'exemple du site ^^

voilà je voudrais faire pareil mais avec un logo avec ceci :

http://zupimages.net/viewer.php?id=15/51/4ge5.png

mais je sais pas comment m'y prendre j'ai regarder un tuto sur google mais je n'y arrive pas voici mon code.

html :

Code : Tout sélectionner

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>TrouveTonCorrespondant.fr</title> </head> <body> <!-- DEBUT TITRE PAGE ACCUEIL !--> <div id="Accueil_Titre"><h2>Trouve Ton Correspondant !</h2></div> <!-- FIN TITRE PAGE ACCUEIL !--> <!-- DEBUT FORMULAIRE DE CONNEXION ( PAGE D'ACCUEIL ) !--> <a href="#volet" class="ouvrir"><img src="images/logo_connexion.jpg"></a> <form Method="POST" Action="" id="Accueil_Connexion"> <input type="email" name="Email" Placeholder="Email" /> <input type="password" name="Password" Placeholder="Password" /> <input type="submit" name="Submit" value="Connexion" /> </form> <!-- FIN FORMULAIRE DE CONNEXION ( PAGE D'ACCUEIL ) !--> </body> </html>
est la css :

Code : Tout sélectionner

/* DEBUT PAGE D'ACCUEIL FORMULAIRE DE CONNEXION */ #Accueil_Titre /* Titre : " Trouve Ton Correspondant " */ { text-align: center; /* Centrer le titre au milieu de la page */ border: 1px solid red; } #Accueil_Connexion /* Formulaire de connexion */ { text-align: center; /* Centrer le formulaire au milieu de la page */ } /* FIN PAGE D'ACCUEIL FORMULAIRE DE CONNEXION */
Merci d'avance

Avatar du membre
Mammouth du PHP | 1564 Messages

14 déc. 2015, 16:38

Un exemple de ce volet serait celui-ci: http://www.c2script.com/scripts/affiche ... ry-s7.html

Tu pourra le faire en JS et peut être CSS3 (mais j'en ai aucune certitude car je ne ne me suis pas trop mis à CSS3 et toutes ses fonctionnalités.

Ensuite, en prenant l'exemple du toggle de jquery, il te faudra certainement placer ta div en "position:absolute" qui elle sera placée dans une div en "position:relative", pour faire partir la position absolute depuis la div en position relative.

Une position absolute se définie comme suit:
#MaDivEnAbsolute{
position:absolute;
top:10px;/* sera position à 10px du haut, à 10px de la page ou à 10px de la div en position relative si cette div est placée dans une div div en position relative */
left:5px;/* sera placée à 5px du bord gauche (right au lieu de left peut être utilisé*/
/* 10px et 5px sont des exemples, on peut mettre des valeur qu'on souhaite*/
}

Eléphanteau du PHP | 40 Messages

14 déc. 2015, 16:45

ou lala mdr c'est pas grave oublions sa ^^ merci camème c'est sympa est mon logo quand je veut le mettre tous a droite de ma page donc dans le css je met un

margin-right auto;

mais rien n'y fait il reste a gauche de l'écran il bouge pas :/

Eléphanteau du PHP | 40 Messages

14 déc. 2015, 16:46

ou margin-left: auto;

je sais plus lol mais les 2 marchent pas :/

Avatar du membre
Mammouth du PHP | 1564 Messages

14 déc. 2015, 18:41

float:left si tu veux que l'image soit mise en gauche du contenu, float:right pour droite
Pense à mettre ton image (code <img...) avant le code sur le quel il va être à côté car ça va pas bien s'afficher à côté sinon

Eléphanteau du PHP | 40 Messages

14 déc. 2015, 19:13

Merci beaucoup sa marche et ben sa fait je sais pas combien de tuto que je fait car je galère et vous êtes toujours la pour aider c'est super Merci beaucoup vous êtes super ! :)

Avatar du membre
Mammouth du PHP | 1564 Messages

14 déc. 2015, 19:28

ça parait compliqué quand on sait pas, c'est pareil tout le temps :)
Pense à chercher correctement et brièvement sur google, exemple avec le float, tu aurait pu chercher "afficher image à gauche du texte css" et je suis sur que tu serait tomber sur des réponses en premier résultat ;)

Pense à mettre le sujet en résolu ;)

Eléphanteau du PHP | 40 Messages

14 déc. 2015, 22:41

ouai pas faut la prochaine fois j'y penserai merci :) est d'acc résolu ! :)