[RESOLU] Volet coulissant

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Volet coulissant

Re: Volet coulissant

par Flo345 » 14 déc. 2015, 22:41

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

Re: Volet coulissant

par two3d » 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 ;)

Re: Volet coulissant

par Flo345 » 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 ! :)

Re: Volet coulissant

par two3d » 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

Re: Volet coulissant

par Flo345 » 14 déc. 2015, 16:46

ou margin-left: auto;

je sais plus lol mais les 2 marchent pas :/

Re: Volet coulissant

par Flo345 » 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 :/

Re: Volet coulissant

par two3d » 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*/
}

Volet coulissant

par Flo345 » 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