Partage
  • Partager sur Facebook
  • Partager sur Twitter

Suppression de marges HTML

    10 août 2018 à 16:31:01

    A tous,

    je fais appel à vous parce que je débute clairement en HTML et j'ai beaucoup cherché et testé pas mal de choses avant de venir poster ici.

    voila je dois intégrer une popup simple de mon site pour inciter à s'inscrire à ma newsletter. 

    Mon formulaire d'inscription vient de sendinblue ou j'ai bien réussi à le personnaliser comme je souhaite.

    Ensuite je prends mon code HTML pour l'intégrer dans mon module de POPUP seulement j'ai des marges blanches qui dépassent qui sont présents dans le code et que je ne trouve comment enlever.

    Voici mon code html et également le rendu visuel que je ne souhaite pas :

    <!-- SendinBlue Signup Form HTML Code -->
    <style><!--
    div#sib_embed_signup .needsfilled input {border-color: #B94A48 !important; color: #B94A48 !important;} div#sib_embed_signup .needsfilled {color: #B94A48 !important;} div#sib_embed_signup input[type="text"] {border: 1px solid #CCCCCC;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;} div#sib_embed_signup input[type=number]::-webkit-inner-spin-button, div#sib_embed_signup input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none; margin:0; } div#sib_embed_signup input[type=number] {-moz-appearance: textfield;} div#sib_embed_signup div.message_area {position: relative;padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;font-size:14px; border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px;box-sizing: border-box;} div#sib_embed_signup div.message_area button.close {position: absolute;right: 8px;top: 8px;color: inherit;background: 0 0;border: 0;padding: 0px;-webkit-appearance: none;cursor: pointer;font-weight: bold;font-size: 14px;} .tipicon{cursor: pointer;padding: 0px 0px;font-size: 12px;font-weight: bold;line-height: 1.2;color: #fff;text-align: center;vertical-align: baseline;background-color: #999;border-radius: 10px;text-decoration: none;} .tooltip{display: inline;position: absolute;left: 97%;} .tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;color: #fff;content: attr(data-title);right: -2px;bottom: 26px;padding: 0px 0px;position: absolute;z-index: 98;width: 220px;} .tooltip_small:hover:after{padding: 0px 0px; width: 150px;} .tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 1px;position: absolute;z-index: 99;} .sib-dropdown-menu.flag-icon {display: none;height: 100px;overflow-x: hidden;min-width: 230px;font-size: 13px;list-style: none;padding-left:0px;border:1px solid rgba(0,0,0,.15);background: white;border-radius: 4px;margin-top:10px;} .sib-dropdown-menu.flag-icon li a{display: block;white-space: nowrap;text-decoration: none;color: rgba(0,0,0,0.87);box-shadow: none;} .sms_field .country-block{margin-right: 3px !important;float: left;width:56px;} .icon-arrow{display: inline-block;width:0px;height: 0px;margin-left:2px;margin-top:5px;border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent;vertical-align: text-top;} .sib-dropdown-toggle.country-flg{display: inline-block;font-size: 13px;} body {background-Image: url('');} body {
      } div#sib_embed_signup .sib-container {background: rgba(255,104,107,1);} div#sib_embed_signup .sib-container h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;} div#sib_embed_signup h1.title {font-size: 45px;} div#sib_embed_signup .sib-container .forms-builder-footer, div#sib_embed_signup .sib-container .description, div#sib_embed_signup .sib-container .fake-label, div#sib_embed_signup .sib-container .row, div#sib_embed_signup .sib-container #company-name{font-family: Baskerville, Times, 'Times New Roman', serif;} div#sib_embed_signup .forms-builder-footer,div#sib_embed_signup div.description,div#sib_embed_signup .fake-label,div#sib_embed_signup .row {font-size: 23px;} div#sib_embed_signup .sib-container .button {font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;} div#sib_embed_signup .button{font-size: 14px;} div#sib_embed_signup input {font-size: 13px;} div#sib_embed_signup .sib-containter h1 {color: #ffffff;} div#sib_embed_signup .sib-container {color: #ffffff;} div#sib_embed_signup .sib-container .button{color: #ffffff;} div#sib_embed_signup .sib-container .button{background: #000000;} div#sib_embed_signup .forms-builder-wrapper{ max-width: 540px;} div#sib_embed_signup .sib-container{ padding: 0px 0px 0px;} div#sib_embed_signup .header{ padding: 0 0px;} div#sib_embed_signup h1.title{ lineHeight: 50px;} div#sib_embed_signup h3.company-name{ lineHeight: 35px;} div#sib_embed_signup div.description{ padding: 0 20px 15px;} div#sib_embed_signup div.row{ padding:10px 20px; } div#sib_embed_signup input[type=text]{ padding: 10px 4px;width:100% !important;box-sizing: border-box;} div#sib_embed_signup input[type=number]{ padding: 10px 4px;width:100% !important;box-sizing: border-box;}
    --></style>
    <link rel="stylesheet" href="https://my.sendinblue.com/public/theme/version4/assets/styles/style.css" />
    <div id="sib_embed_signup" style="padding: 0px;">
    <div class="forms-builder-wrapper" style="position: relative; margin-left: auto; margin-right: auto;"><input type="hidden" id="sib_embed_signup_lang" value="fr" /> <input type="hidden" id="sib_embed_invalid_email_message" value="Cette adresse email n'est pas valide." /> <input type="hidden" name="primary_type" id="primary_type" value="email" />
    <div id="sib_loading_gif_area" style="position: absolute; z-index: 9999; display: none;"><img src="https://my.sendinblue.com/public/theme/version4/assets/images/loader_sblue.gif" style="display: block; margin-left: auto; margin-right: auto; position: relative; top: 40%;" /></div>
    <form class="description" id="theform" name="theform" action="https://my.sendinblue.com/users/subscribeembed/js_id/2x4ok/id/3" onsubmit="return false;"><input type="hidden" name="js_id" id="js_id" value="2x4ok" /><input type="hidden" name="listid" id="listid" value="6" /><input type="hidden" name="from_url" id="from_url" value="yes" /><input type="hidden" name="hdn_email_txt" id="hdn_email_txt" value="" />
    <div class="sib-container rounded ui-sortable" style="border-radius: 4px; position: relative; margin: 0px; text-align: left; background: #ff686b; padding: 40px 20px 20px; border-width: 0px !important; border-color: transparent !important;"><input type="hidden" name="req_hid" id="req_hid" value="" style="font-size: 14px; font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;" />
    <div class="header" style="padding: 0px 20px;">
    <h1 class="title editable" data-editfield="newsletter_name" style="font-weight: normal; text-align: left; font-size: 45px; margin-bottom: 2px; padding: 0px; margin-top: 0px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff;">          Hello You</h1>
    <h3 id="company-name" style="font-weight: normal; text-align: left; font-size: 25px; margin-bottom: 12px; padding: 0px; margin-top: 0px; font-family: Baskerville, Times, 'Times New Roman', serif; color: #ffffff; display: block;">Faites le plein de conseils en vous abonnant à la newsletter</h3>
    </div>
    <div class="description editable" data-editfield="newsletter_description" style="padding: 0px 20px 15px; border-bottom: 1px solid #cccccc; font-family: Baskerville, Times, 'Times New Roman', serif; color: #ffffff; font-size: 23px; display: block;"><span style="color: #1c1d1d; font-family: Josefin; font-size: 16px; letter-spacing: 2px; text-align: center; text-transform: uppercase; background-color: #ffffff;">-10% offert pour votre première commande*</span></div>
    <div class="view-messages" style="margin: 5px 0;"></div>
    <!-- an email as primary -->
    <div class="primary-group email-group forms-builder-group ui-sortable">
    <div class="row mandatory-email" style="padding: 10px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 23px; left: 0px; top: 0px;">
    <div class="lbl-tinyltr" style="clear: both; float: none; font-family: Baskerville, Times, 'Times New Roman', serif;">Entrez votre adresse email pour vous inscrire <red style="color: #ff0000;">*</red></div>
    <input type="text" name="email" id="email" value="" style="padding: 10px 2%; width: 90%; min-width: auto;" />
    <div style="clear: both;"></div>
    <div class="hidden-btns"><a class="btn move" href="#"><i class="fa fa-arrows"></i></a><br /> <!--<a class="btn btn-danger delete" href="#"><i class="fa fa-trash-o fa-inverse"></i></a>--></div>
    </div>
    </div>
    <div class="captcha forms-builder-group" style="display: none;">
    <div class="row" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 23px; padding: 10px 20px;">
    <div id="gcaptcha" style="transform: scale(1); margin-left: 0px;"></div>
    </div>
    </div>
    <!-- end of primary -->
    <div class="byline" style="font-family: Baskerville, Times, 'Times New Roman', serif; color: #343434; font-weight: bold; font-size: 23px; text-align: center; display: block;"><button class="button editable " type="submit" data-editfield="subscribe" style="font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; color: #ffffff; background: #000000; display: inline-block; white-space: nowrap; min-height: 40px; margin: 0px 5px 0px 0px; padding: 0px 10px; text-decoration: none; text-transform: uppercase; text-align: center; font-weight: bold; font-style: normal; font-size: 17px; cursor: pointer; border: 0px; border-radius: 4px; vertical-align: top; height: auto; line-height: 150%;">Je m'inscris</button></div>
    <div style="clear: both;"></div>
    </div>
    </form></div>
    </div>
    <script>// <![CDATA[
    var sib_prefix = 'sib'; var sib_dateformat = 'dd-mm-yyyy';
    // ]]></script>
    <script src="https://my.sendinblue.com/public/theme/version4/assets/js/src/subscribe-validate.js?v=1526904697"></script>
    <!-- End : SendinBlue Signup Form HTML Code -->



    Merci pour votre aide.  

    • Partager sur Facebook
    • Partager sur Twitter
      11 août 2018 à 1:55:59

      Je ne vois pas de problèmes de marges... :euh:
      • Partager sur Facebook
      • Partager sur Twitter
      Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
        11 août 2018 à 14:06:27

        et bien je souhaite éliminer les marges blanches et ne garder que le bloc rouge
        • Partager sur Facebook
        • Partager sur Twitter

        Suppression de marges HTML

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown