• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Button und E-Mail-Eintragefeld werden nur in der Live-Forschau richtig dargestellt

Matthias

Mitglied
Hallo,
das ist das erste mal, dass ich hier etwas im Forum schreibe. Ich versuche meine Frage so einfach und kurz wie möglich zu formulieren:

Ich erstelle gerade eine E-Mail-Opt-In-Webseite auf der das E-Mail-Formular per Pop-Up eingeblendet wird.
Wenn ich die lokale html-Datei mit dem Browser öffne, werden das E-Mail-Eintragefeld und der darunter liegende Button wie gewünscht zentriert dargestellt. Doch wenn ich die Seite hochgeladen habe und mir anschaue, sind das E-Mail-Eintragefeld und der Button plötzlich links. Woran liegt das und wie kann ich das am einfachsten ändern?

Ich habe zwei Screenshots angehangen.


Hier ist der dazugehörige html-code:

Code:
<!-- PopUp -->
<div class="popup-container reveal-modal" id="myModal">
  <div class="popup" id="register_popup">
    <div class="popup-logo"><img src="img/dieunwiderstehlichefraulogo.png" alt="" ></div>
    <p class="popup-headline">Trage Deine beste E-Mail-Adresse ein und erhalte sofort Dein PDF... es ist 100% kostenlos!</p>
    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; text-align: center;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//dieunwiderstehlichefrau.us15.list-manage.com/subscribe/post?u=9332db2020c5a91fc6dc0d9e7&amp;id=a8aeb10b08" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Trage hier Deine E-Mail-Adresse ein" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9332db2020c5a91fc6dc0d9e7_a8aeb10b08" tabindex="-1" value=""></div>
    <div style="margin-top: 2%; margin-bottom: 2%" class="clear"><input type="submit" value="Jetzt Kostenlos Downloaden" style="background: #fcb70b;  border: none; color: white; padding: 10px 24px;; font-size: 24px; border-radius: 4px; text-align: center;" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
    <a class="close-reveal-modal" ><img src="img/ico-close.png" alt="" /></a> </div>
  <div class="privacy-policy"><b>HINWEIS:</b> Wir hassen SPAM und versprechen Dir, Deine E-Mail-Adresse zu schützen.</div>
</div>
<!-- END PopUp -->

Vielen Dank.
 

Anhänge

  • css-Frage-wie es aussehen soll.png
    css-Frage-wie es aussehen soll.png
    63,7 KB · Aufrufe: 1
  • css-Frage wie es aussieht.png
    css-Frage wie es aussieht.png
    61,6 KB · Aufrufe: 1
Werbung:
Wenn ich die lokale html-Datei mit dem Browser öffne, werden das E-Mail-Eintragefeld und der darunter liegende Button wie gewünscht zentriert dargestellt. Doch wenn ich die Seite hochgeladen habe und mir anschaue, sind das E-Mail-Eintragefeld und der Button plötzlich links. Woran liegt das und wie kann ich das am einfachsten ändern?
Verantwortlich ist dieses CSS, das ohne das http(s):Protokoll im URL auf der lokalen Betriebssystemebene vom Browser nicht geladen wird:
HTML:
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
Darin finden sich u.a. Angaben für form (text-align:left) und input.email / input.button (display:block), die die Zentrierung aushebeln.

Folglich gehören sie durch text-align:center und display:inline-block ersetzt.
 
Werbung:
Wie gehe ich da am besten vor, um das CSS zu laden?
Meinst du lokal die externe CSS-Datei?

Entweder das https:-Protokoll ergänzen:
HTML:
<link href="https://cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
oder einfach einen lokalen Webserver einrichten (z.B. XAMPP), damit der URL in dieser Form, wie auf Deinem öffentlichen Webserver, funktioniert.

Diese Schreibweise dient letztlich dazu "Gemischte Inhalte" (http:// vs https://) zu vermeiden, die vom Browser aus Sicherheitsgründen blockiert werden.

Da die CSS-Datei von einem externen Server geladen wird, kannst du schwer darin Änderungen vornehmen, es sei denn, du packst sie auf deinen Server.

Somit ist es deine Aufgabe, im HTML-Code nach dem Aufruf dieser CSS-Datei dein individuelles CSS zu platzieren, das dann diese Regeln enthält:
CSS:
#mc_embed_signup form {
  text-align:center;
}
#mc_embed_signup input.email,
#mc_embed_signup input.button {
  display:inline-block;
}
Auf diese Weise werden die erstgenannten Regeln in slim.css in der Kaskade von diesen überschrieben.

Hierbei gilt grundsätzlich, den CSS-Selektor (z.B. #mc_embed_signup form {}), der die vakanten Regeln enthält, 1:1 zu übernehmen, um seine Spezifität nicht zu unterbieten/-schreiten. Ansonsten greift die Kaskade nicht, und die Original-Regeln behalten ihre Gültigkeit.
 
Danke erstmal für die Infos. Ich habe mal schnell deinen Code per Copy/Paste eingefügt.
Jetzt stehen die Elemente nebeneinander. Ok..das schaue ich mir gleich an, muss jetzt aber kurz los.

HTML:
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; text-align: center;}
  
    #mc_embed_signup form {
  text-align:center;
}
#mc_embed_signup input.email,
#mc_embed_signup input.button {
  display:inline-block;
}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
      We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
 
Jetzt stehen die Elemente nebeneinander.
Dem Kommentar entnehme ich, dass dir der Grund nicht bekannt/bewusst ist.

Die aktuellen Breiten von input.email (width:58%) u. input.button (width:30%) reichen in der Addition nicht aus (58% + 30% = 88% < 100%), dass ein automatischer Zeilenumbruch erfolgt.

width müsste für den Button nach Adam-Riese auf 42% erhöht werden, oder für beide Elemente gleichermaßen 50% definiert werden, damit die Addition 100% ergibt.

Die "technische" Vorgehensweise dieser Korrektur bleibt hier dieselbe.

ProTipp: Wenn deine CSS-Kenntnisse (u. Praxiserfahrung) nicht ein gewisses Niveau besitzen, um solche (vergleichsweise recht simplen) Zusammenhänge direkt auf den ersten Blick zu erkennen, und wie sie zu fixen sind, nutze halt das integrierte Entwicklerwerkzeug deines verwendeten Browsers, das sich selbstverständlich nicht ausschließlich auf CSS beschränkt.
 
Werbung:
Ich habe das geändert und nun habe ich auf dem Desktop-PC das Ergebnis so, wie ich es mir vorgestellt habe. Vielen Dank dafür schon einmal! Auf dem Smartphone ist das leider noch nicht der Fall. Hier erscheint der Download-Button nur zur Hälfte. Ich hatte bereits an anderer Stelle im Quellcode ein responsives Element mittels
Code:
@media only screen and (max-width: 768px) {
    .book-right {
    background-color: rgba(0, 0, 0,0.3);
    color: white;
    }


}
eingebaut. Wie mache ich den Download-Button deiner Meinung nach am einfachsten responsiv?

2. Wo wir schon dabei sind: Wie setze ich ein Favicon ein? Ich habe folgenden Code im Internet gefunden und genutzt
Code:
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
aber im Browser-Tab erscheint kein Icon. Den Link zum Bild habe ich bei href="linkzumbild" eingegeben.
 
Die Breite ist relativ (width: 50%; height: 100%). Liegt es am Padding?

Code:
<div style="margin-top: 2%; margin-bottom: 2%" class="clear"><input type="submit" value="Jetzt Kostenlos Downloaden" style="background: #fcb70b;  border: none; color: white; padding: 10px 24px;; font-size: 24px; border-radius: 4px; text-align: center; width: 50%; height: 100%;" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
 
Werbung:
Die Breite ist relativ (width: 50%; height: 100%). Liegt es am Padding?

Code:
<div style="margin-top: 2%; margin-bottom: 2%" class="clear"><input type="submit" value="Jetzt Kostenlos Downloaden" style="background: #fcb70b;  border: none; color: white; padding: 10px 24px;; font-size: 24px; border-radius: 4px; text-align: center; width: 50%; height: 100%;" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
Kannst Du ganz leicht überprüfen, indem Du box-sizing:border-box hinzufügst.

Somit werden Rahmenstärken u. Innenabstände nicht mehr gemäß dem CSS-Boxmodell zu width u. height addiert.
 
Ich habe box-sizing:border-box eingefügt:

Code:
<div style="margin-top: 2%; margin-bottom: 2%" class="clear"><input type="submit" value="Jetzt Kostenlos Downloaden" style="background: #fcb70b; box-sizing: none; color: white; padding: 10px 24px;; font-size: 24px; border-radius: 4px; text-align: center; width: 50%; height: 100%; box-sizing: border-box;" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

Da sich dadurch nichts verändert hat, gehe ich mal davon aus, dass es nicht am Padding liegt. Momentan bin ich überfragt.
 
Momentan bin ich überfragt.
In der externen CSS-Datei ist u.a. noch Folgendes enthalten, was Einfluß auf die Breite hat (und auch nicht per Media Queries für kleinere Auflösungen differenziert wird):
CSS:
#mc_embed_signup .button {... font-size:15px; ... width: auto; ...;}
#mc_embed_signup input.button {...; min-width:90px;}
Zumal die Button-Beschriftung (value="Jetzt Kostenlos Downloaden") ihren entsprechenden Platz benötigt, und in dieser Konstellation der Button vermutlich derzeit auf dem Smartphone(-Display) nicht kleinzukriegen ist.
 
Werbung:
Zurück
Oben