Slide down qui bouscule nos div !

Bonjour,


J'ai un effet slide down demo ici, pour un formulaire de contact qui se déplie en jquery, j'aimerais simplement décaler le contenu en même temps que animation.

Alors pour le moment il apparait mais par dessus mes div. Je pense que ça dois jouer sur la position.


Code html:

<div class="box">
    <div id="contactFormContainer">
        <div id="contactForm">
            <fieldset>
                <label for="Name">Name *</label>
                <input id="name" type="text" />
                <label for="Email">Email address *</label>
                <input id="Email" type="text" />
                <label for="Message">Your message *</label>
                <textarea id="Message" rows="3" cols="20"></textarea>
                <input id="sendMail" type="submit" name="submit" onclick="closeForm()" />
                <span id="messageSent">Your message has been sent successfully!</span>
           </fieldset>
        </div>
        <div id="devis-pack">Faire un devis</div>
    </div>

Code css :

.box 
            {
            	margin: 0px auto;
            	width:960px;
            	height: auto;
            	background-color:#ffffff;
            	text-align:left;
            	position: relative;

            }
#contactFormContainer
            {
            	position:absolute;

            }
            #contactForm
            {
            	height:277px;
            	width:351px;
            	background-image:url('bkg.jpg');
            	display:none;
            }
            #contactForm fieldset
            {
            	padding:30px;
            	border:none;
            }      
            #contactForm label
            {
            	display:block;
            	color:#ffc400;
            }      
            #contactForm input[type=text]
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            	height:24px;
            }  
            #contactForm textarea
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
            	background-color:#4d3a24;
            	border:solid 1px #23150c;
            	color:#fecd28;
            	padding:5px;
            }                

            #messageSent
            {
            	color:#ff9933;
            	display:none;
            }

#devis-pack {
background: #a6ca2a;
padding: 10px;
width: 300px;
border-radius: 0px 0px 20px 20px;
color: #898b8b;
text-align: center;
display: block;
cursor: pointer;
}

Modifié par coco_Nuts62 (13 Oct 2011 - 10:33)

Excuse moi, mais je ne comprend pas ton problème. Il va falloir que tu sois beaucoup plus précis dans ton explication (le code importe peut pour le moment)

Si j'ai bien compris, tu veux qu'on dépliant le formulaire le contact, tu décale le header ains que le content ..

Pour cela :

- TU enlève le position : absolute pour '#contactFormContainer'
- TU rajoute la propriété 'clear:both' pour ton header

Alors je simplifie, C'est un effet jquery qui permet de faire apparaitre un contenu cacher par un effet de descente et de remonter, mais quand le contenu descend j'aimerais que le reste de la page suit cette effet. Pour le moment la div qui contient cette effet passe par dessus les autres div.

Voire le code pour info

intégrateurweb2 un grand merci, pour finaliser je vais tout de même conclure pour ceux qui recherche cette effet.

A mettre dans votre head : télécharger ici

<script src="votre_dossier/jquery-1.6.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
            $(document).ready(function(){

                $("#devis-pack").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
                
            });
            
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }
           
           
        </script>

Mon code html :

	
<div id="contactFormContainer">
    <div id="contactForm">
        votre contenu
    </div>
    <div id="devis-pack">Faire un devis</div>
</div>

Le css que j'utilise (vous pouvez modifier les styles bien sur) :

#contactFormContainer
{
   clear: both;
}
            
#contactForm
{
   height:300px;
   width:600px;
   background: #a6ca2a;
   display:none;
}
            
#devis-pack 
{
   background: #a6ca2a;
   padding: 10px;
   width: 300px;
   border-radius: 0px 0px 20px 20px;
   color: #898b8b;
   text-align: center;
   display: block;
   cursor: pointer;
}

Modifié par coco_Nuts62 (13 Oct 2011 - 11:52)

Ok j'ai eu peur que ce soit ça.

Tu es conscient que ça n'est pas du tout "naturel" en matière de ihm ?

Un élément contextuel que tu ouvre dynamiquement ne devrait pas déplacer tout une page (dans le cadre d'un blog ou d'un site d'article j'entend) :

Premièrement parce qu’en matière de ressources graphique ça devient vite lourd pour le navigateur. Et deuxièmement c'est trop inhabituelle et déroutant pour l'utilisateur, il aura immanquablement l'impression d'avoir "cassé" le site.

D'autant te diront qu'il n'y a pas de règles.. C'est bien sur faux. Mais il est cependant vraie que les seules règles sont de répondre aux questions :
-"ca correspond à mon envie/besoin/projet ?"
-"ca correspond à l'attente du lecteur/visiteur ?"
-"après essais, mon envie/besoin/projet est toujours viable ?"
Modifié par ptitvincent (13 Oct 2011 - 12:20)

Alors je remercie encore les autres, on ce qui concerne la critique :

- Ce petit script ne consomme pas plus qu'une anime flash.
- Ce n'est pas déroutent d'utiliser ce module au bonne emplacement, cela facilite même l'utilisation du site.

Ne pas confondre respect des normes et évolution des techniques. Et puis le design c'est du test perpétuel, si vraiment cela et déroutent pour les utilisateurs alors je testerais autre chose.

Google test régulièrement des évolutions des techniques non ? On dirais que j'ai violé ton sanctuaire à lire ton post.

coco_Nuts62 a écrit :
...critique...à lire ton post.

Merci de ne pas démarrer en 3ème (le moteur apprécie moyennement, et ça vous flingue une ambiance chaleureuse en peu de temps...) dès que quelqu'un signifie son désaccord, ou donne son point de vue (qu'il soit avisé ou non d'ailleurs...)
Les gens sont susceptibles cette année...

non je réponds simplement il a le droit de critiquer et j'ai le droit ne me défendre non ? Je pense qu'il a son point de vue et j'ai le mien.

Enfin breff c'est résolue.