28172 sujets

CSS et mise en forme, CSS3

Formulaire Pop up - Champs décalé

Bonjour,

Ton message manque d'informations pour qu'on puisse t'aider.

- Quelle est précisément le problème (j'en perçois plus d'un sur ton screen, donc difficile de savoir du quel tu parles présentement) ?
- Comment peut-on reproduire la situation sur ton site ?
- Il est question de navigateurs. As-tu des contraintes de support d'anciens navigateurs (genre en dessous de IE9) ?
Bonjour

Mon problème c'est que mes champs ne sont pas alignés mais les uns sur les autres.

Pour reproduire la situation il faut arriver sur le site mais uniquement la première fois. Après il faut attendre 7 jours avant que la pop up réapparaisse.

Je ne comprends pas la 3ème question.

Erwin
Vu de très loin, je dirais qu'il s'agit simplement d'un problème de display...

Mais j'ai beau avoir visité ta page pour la première fois tout à l'heure, je n'ai pas eu le popin.
Peux-tu nous mettre le code html et css de la zone concerné ?

Pour la dernière question, le fait que tu ne le comprenne pas me fait dire que la réponse doit être non. Smiley lol
Voila le code CSS et le code HTML qui me sont fournit par Aweber:

<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-831156797 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-831156797 .af-body a{color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-831156797 .af-body input.text, #af-form-831156797 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-831156797 .af-body input.text:focus, #af-form-831156797 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-831156797 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-831156797 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-831156797 .af-footer{padding-right:15px;padding-left:15px;background-color:#transparent;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-831156797 .af-header{padding-bottom:9px;padding-top:9px;padding-right:10px;padding-left:10px;background-image:url('http://forms.aweber.com/images/auto/body/009/5ff/005/999');background-position:top left;background-repeat:repeat-x;background-color:#005999;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#FFFFFF;font-size:16px;font-family:Verdana, sans-serif;}
#af-form-831156797 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-831156797 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-831156797 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-831156797 .bodyText p{margin:1em 0;}
#af-form-831156797 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/button/07c.png");background-position:top left;background-repeat:repeat-x;background-color:#0057ac;border:1px solid #0057ac;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-831156797 .buttonContainer input.submit{width:auto;}
#af-form-831156797 .buttonContainer{text-align:center;}
#af-form-831156797 body,#af-form-831156797 dl,#af-form-831156797 dt,#af-form-831156797 dd,#af-form-831156797 h1,#af-form-831156797 h2,#af-form-831156797 h3,#af-form-831156797 h4,#af-form-831156797 h5,#af-form-831156797 h6,#af-form-831156797 pre,#af-form-831156797 code,#af-form-831156797 fieldset,#af-form-831156797 legend,#af-form-831156797 blockquote,#af-form-831156797 th,#af-form-831156797 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-831156797 button,#af-form-831156797 input,#af-form-831156797 submit,#af-form-831156797 textarea,#af-form-831156797 select,#af-form-831156797 label,#af-form-831156797 optgroup,#af-form-831156797 option{float:none;position:static;margin:0;}
#af-form-831156797 div{margin:0;}
#af-form-831156797 fieldset{border:0;}
#af-form-831156797 form,#af-form-831156797 textarea,.af-form-wrapper,.af-form-close-button,#af-form-831156797 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-831156797 input,#af-form-831156797 button,#af-form-831156797 textarea,#af-form-831156797 select{font-size:100%;}
#af-form-831156797 p{color:inherit;}
#af-form-831156797 select,#af-form-831156797 label,#af-form-831156797 optgroup,#af-form-831156797 option{padding:0;}
#af-form-831156797 table{border-collapse:collapse;border-spacing:0;}
#af-form-831156797 ul,#af-form-831156797 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-831156797,#af-form-831156797 .quirksMode{width:225px;}
#af-form-831156797.af-quirksMode{overflow-x:hidden;}
#af-form-831156797{background-color:#F0F0F0;border-color:#CFCFCF;border-width:1px;border-style:solid;}
#af-form-831156797{display:block;}
#af-form-831156797{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-header,.af-footer{margin-bottom:0;margin-top:0;padding:10px;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="831156797" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="articles_rel" />
<input type="hidden" name="redirect" value="http://www.reussirenlicence.com/et-maintenant-verifie-tes-emails/" id="redirect_cc64ddd573aabf66e2e3a4d02ee6ee0b" />

<input type="hidden" name="meta_adtracking" value="Popup" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />

<input type="hidden" name="meta_tooltip" value="name||Votre prenom (sans accent),,email||Votre adresse email" />
</div>
<div id="af-form-831156797" class="af-form"><div id="af-header-831156797" class="af-header"><div class="bodyText"><p> </p></div></div>
<div id="af-body-831156797"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-37067249"></label>
<div class="af-textWrap">
<input id="awf_field-37067249" type="text" name="name" class="text" value="Votre prenom (sans accent)"  onfocus=" if (this.value == 'Votre prenom (sans accent)') { this.value = ''; }" onblur="if (this.value == '') { this.value='Votre prenom (sans accent)';} " tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-37067250"></label>
<div class="af-textWrap"><input class="text" id="awf_field-37067250" type="text" name="email" value="Votre adresse email" tabindex="501"  onfocus=" if (this.value == 'Votre adresse email') { this.value = ''; }" onblur="if (this.value == '') { this.value='Votre adresse email';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Envoyer" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-831156797" class="af-footer"><div class="bodyText"><p> Vos coordonnées sont protégées.</p></div></div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=HMyMjKxs7Jzs" alt="" /></div>
</form>
<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-831156797")) {
                document.getElementById("af-form-831156797").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-831156797")) {
                document.getElementById("af-body-831156797").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-831156797")) {
                document.getElementById("af-header-831156797").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-831156797")) {
                document.getElementById("af-footer-831156797").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

<!-- /AWeber Web Form Generator 3.0 -->


Merci encore pour votre aide !
Parlons sur du concret et du visuel :
http://jsfiddle.net/37wumo6L/

Voici donc le formulaire.

Ton souhait est que les champs du formulaire (prénom et email) soit en ligne ?
Tu remarqueras que les trois éléments du formulaire possèdent une classe commune "af-element".
En définissant le display de ces éléments avec la valeur "inline-block", ceux-ci s'aligneront.... s'ils ont la place de le faire. Car qu'en effet leur conteneur, possédant l'id "af-form-831156797", est définit avec une taille fixe. Donc il faudra le libérer de cette taille fixe (puisque c'est une div, il prendra alors de base 100% de la largeur disponible). Restera ensuite à ajuster le positionnement des champs de formulaire.

Mais attention, il y a quelques subtilité à l'utilisation de la valeur "inline-block" !
Tu trouveras de la doc sur le web. Smiley cligne

Il serait également possible d'utiliser l'attribut "float" mais ce n'est sémantiquement pas fait pour et ça possède également des contraintes assez pénibles.
Je te remercie pour tes premiers éléments de reflexion mais comment expliquer que cela fonctionne sur certain navigateur et pas sur d'autres ?

Merci
C'est la magie de l'informatique ! Smiley lol

D'une part il y a une normalisation du code réalisé par un organisme (W3C) mais qui n'a pas été reconnu par Microsoft pendant longtemps. Donc jusqu'à l'arrivée IE9, il y avait de grosses différences entre les navigateurs. Il fallait donc jongler avec les différentes interprétations du code.

Ensuite il faut voir qu'un navigateur c'est avant tout un moteur de rendu. Il en existe différents sur le marché. Entre deux moteurs de rendu, il y a de petites différences. Le cumule de ces différences aboutie parfois à des modifications visibles.
Et puis il y a aussi les bugs, qu'il faut apprendre à contourner.

Au final, le talent de l'intégrateur HTML/CSS est en bonne partie de savoir résoudre ces problèmes.
Parce que pour le reste, c'est du code très facile.
Sujet clos
Aller à