Ergebnis 1 bis 4 von 4

Thema: Widget in bestehendes Frontend-Modul einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    143

    Standard Widget in bestehendes Frontend-Modul einbinden

    Hallo!
    Ich habe folgendes Problem und komme damit einfach zu keiner Lösung und bitte daher um eure Unterstützung.
    Es geht um die Einbindung eines Widget von Tripadvisor in die Kopfzeile der Website.
    Dazu habe ich folgenden HTML-Code erstellt der auch tadellos funktioniert:
    HTML-Code:
    <p style="font-size: 1.5em; text-align: right; padding-top: 60px; margin-top: 0">
    <a href="http://web.site.net/muster" target="_blank" rel="noopener">Onlinebuchung</a>
    [nbsp]Hier soll das Widget hin![nbsp]
    <a style="color: #3671bc" title="Facebook Muster" href="https://www.facebook.com/Muster" target="_blank" rel="noopener" data-icon="?"></a> 
    </p>
    Das Widget soll an die Stelle "Hier soll das Widegt hin!"

    Wenn ich dieses wie folgt einfüge:
    HTML-Code:
    <div id="TA_socialButtonBubbles482" class="TA_socialButtonBubbles"><ul id="crgJZHcZB84M" class="TA_links V7nU4QsTSw"><li id="Had40wi0" class="NYAK7z1Oiyn">
    <a target="_blank" href="https://www.tripadvisor.at/Hotel_Review-g641727-d2239281-Reviews-Gasthof_Thomann-Velden_am_Woerthersee_Carinthia_Austrian_Alps.html">
    <img src="https://www.tripadvisor.at/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/></a></li></ul></div>
    <script async src="https://www.jscache.com/wejs?wtype=socialButtonBubbles&amp;uniq=482&amp;locationId=2239281&amp;color=green&amp;size=rect&amp;lang=de_AT&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>
    zerstört es mir die gesamt Struktur.
    Das Widegt wird nicht zwischen dem Text 'Onlinebuchung' und dem 'Facebook-Logo' eingefügt, sondern verschiebt alles um eine Zeile tiefer.
    Wie kann ich das korrekt einfügen?

    Sorry für mein Nichtwissen, aber ich hatte diesen Fall leider noch nie und hab schon den ganzn Vormittag damit verbracht diverse Google-Suchen zu durchkämmen aber noch keine brauchbare Lösung gefunden.
    Vielleich kann mir jemand hier helfen.
    Danke schon vorweg, schöne Grüße und bleibt gesund!
    Bernhard

  2. #2
    Contao-Nutzer
    Registriert seit
    20.10.2012.
    Ort
    Berlin
    Beiträge
    157

    Standard

    Klingt nach ganz natürlichen CSS-eigenschaften.
    Probier's mit:
    HTML-Code:
    <div id="TA_socialButtonBubbles482" class="TA_socialButtonBubbles" style="display:inline-block;">....
    Tendentiell ist es eher nicht zu empfehlen ein <div> in ein <p> zu packen.
    https://www.google.com/search?q=bloc...nline+elements

  3. #3
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    60

    Standard

    Hallo Bernhard,

    wie andre.saage im letzten Absatz aufzeigte, willst du innerhalb eines <p>-Element ein <div>
    -Element benutzen. Da spielen HTML nicht mit. Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente enthalten. https://wiki.selfhtml.org/wiki/HTML/...rukturierung/p

    Ersetze dein <p>-Element durch ein <div>-Element. Das sollte funktionieren.

    HTML-Code:
    <div style="font-size: 1.5em">
        <a href="" target="" rel="">Onlinebuchung</a>
            <div id=""><ul><li><a><img></a></li></ul></div>
        <a style="" title="" href="" target="" rel=""></a>
    </div>


    Hans-Jürgen

  4. #4
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    143

    Standard

    Danke für die Antworten - hab wieder was dazugelernt
    Letztendlich musste ich aber auf den <script> Teil verzichten, da mir dieser sofort wieder einen Absatz, linksbündig , etc. erzeugte.

    Ich hab's nun nicht mit dem bereitgestellten Widget gelöst, sondern mir einen eigenen Code erzeugt und damit geht's jetzt.

    Wünsch Euch noch einen schönen Tag und bleibt gesund!
    Bernhard

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •