H2 in Popup nicht zentriert

Thema wurde von Anonymous, 4. März 2024 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.517
    Danke erhalten:
    314
    Danke vergeben:
    1.217
    Hallo,

    um ein Popup auf die Startseite des Shops zu bekommen, möchte ich das Popup von "Shop online/offline" nutzen (gibt's da nix besseres????).

    Im Popup habe ich eine H2 und einen Link am unteren Ende. Der Text in der Mitte ist schön zentriert, die Überschrift und der Link am unteren Ende jedoch nicht. Sieht bescheiden aus.... hier live und in Farbe: www.matchashop.de - was klemmt denn da schon wieder?

    Hier der Quelltext des Popups (sehe gerade, dass man das Wort nicht nur als Pop-Ups, sondern auch als Po-Pups lesen kann :)):

    Code:
    <h2 style="text-align: center;">Willkommen in der Welt des Matcha und japanischer Tees!</h2>
    
    <div style="text-align: center;">
        Gib uns deine Mailadresse und tauche ein in die faszinierende Kultur Japans. Als Dankesch&ouml;n erh&auml;ltst du einen exklusiven <span style="color:#ff0000;"><strong>15% Gutschein</strong></span> f&uuml;r deinen n&auml;chsten Einkauf bei uns.<br />
        <br />
        Lass dich von unseren regelm&auml;&szlig;igen Newslettern inspirieren, entdecke neue Teesorten, exklusive Angebote und Tipps rund um die Zubereitung deines perfekten Matcha.<br />
        <br />
        Verpasse nicht die Chance, Teil unserer Teeliebhaber-Gemeinschaft zu werden.<br />
        <br />
        Trage jetzt deine Mailadresse ein und sichere dir deinen Gutschein. Auf eine gemeinsame Reise voller Geschmack und Tradition!<br />
        &nbsp;
    </div>
    
    <h2 style="background: rgb(200, 200, 200); border: 2px solid rgb(204, 204, 204); padding: 5px 10px; text-align: center;"><a href="https://www.matchashop.de/de/info/anmeldung-zu-unserem-newsletter.html"><span style="color:#7eb621;"><strong>Jetzt anmelden &amp; 15% sparen!</strong></span></a></h2>
    
    Was tun? Schonmal vorab für die Hilfe bedanken auf jeden Fall: Danke!
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.517
    Danke erhalten:
    314
    Danke vergeben:
    1.217
    Sehe gerade, dass scheinbar nur H1, H2 nicht zentriert dargestellt werden. Lege ich den Link unten als Text an, mach ihn schön groß und so, dann wird er zentriert. Also grätscht mir da wieder irgendeine CSS Angabe dazwischen... wenn ich das je verstehen würde....
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Juli 2021
    Beiträge:
    455
    Danke erhalten:
    215
    Danke vergeben:
    166
    Du hast den Folgendes in deinem CSS
    Code:
    h2 {
    text-align: center !important;
    }
    Jetzt willst Du wahrscheinlich, dass das im Allgemeinen so bleibt und dass nur die Überschrift in deinem Pop-Up Fenster eben nicht linksbündig ist.

    Dann kannst Du das so lösen:
    Code:
    <h2 style="text-align: center !important;">Willkommen in der Welt des Matcha und japanischer Tees!</h2>
    
    <div style="text-align: center;">
        Gib uns deine Mailadresse und tauche ein in die faszinierende Kultur Japans. Als Dankesch&ouml;n erh&auml;ltst du einen exklusiven <span style="color:#ff0000;"><strong>15% Gutschein</strong></span> f&uuml;r deinen n&auml;chsten Einkauf bei uns.<br />
        <br />
        Lass dich von unseren regelm&auml;&szlig;igen Newslettern inspirieren, entdecke neue Teesorten, exklusive Angebote und Tipps rund um die Zubereitung deines perfekten Matcha.<br />
        <br />
        Verpasse nicht die Chance, Teil unserer Teeliebhaber-Gemeinschaft zu werden.<br />
        <br />
        Trage jetzt deine Mailadresse ein und sichere dir deinen Gutschein. Auf eine gemeinsame Reise voller Geschmack und Tradition!<br />
        &nbsp;
    </div>
    
    <h2 style="background: rgb(200, 200, 200); border: 2px solid rgb(204, 204, 204); padding: 5px 10px; text-align: center !important;"><a href="https://www.matchashop.de/de/info/anmeldung-zu-unserem-newsletter.html"><span style="color:#7eb621;"><strong>Jetzt anmelden &amp; 15% sparen!</strong></span></a></h2>
     
  4. FRAGO
    FRAGO Erfahrener Benutzer
    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.063
    Danke erhalten:
    340
    Danke vergeben:
    195
  5. DKG - Die Kleine Geschenkidee (Peter)
    Registriert seit:
    2. Oktober 2017
    Beiträge:
    345
    Danke erhalten:
    200
    Danke vergeben:
    125
    hi,

    du hast einen Denkfehler

    HTML:
    <h2 style="text-align: center !important;">
    Das text-align: center greift in dem Fall nur, wenn Du auch width: 100% benutzen würdest, was Du nicht tust.

    Du vergisst dabei das gute alte HTML Tag <center>

    Probier es doch mal so:
    HTML:
    <center><h2>Dein Text</h2></center>
    Damit kommst Du weiter.

    Alternativ könntest Du ein div um das h2 machen und dann den Inhalt zentrieren, ist aber vom Aufwand her größer.
    Daher: Keep it simple

    Gruß
    Peter
     
  6. DKG - Die Kleine Geschenkidee (Peter)
    Registriert seit:
    2. Oktober 2017
    Beiträge:
    345
    Danke erhalten:
    200
    Danke vergeben:
    125
  7. DKG - Die Kleine Geschenkidee (Peter)
    Registriert seit:
    2. Oktober 2017
    Beiträge:
    345
    Danke erhalten:
    200
    Danke vergeben:
    125
    Update:

    Ja, Modals von Bootstrap 3 sind auch verfügbar,
    hab es gerade getestet.
    Viel Spaß beim verwenden ;)
     
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.517
    Danke erhalten:
    314
    Danke vergeben:
    1.217
    Danke an alle für die Hilfe, das bringt mich weiter.