Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 16 von 16

Thema: Social Media Button unter das Bild

  1. #1
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard Social Media Button unter das Bild

    Liebe Community,

    ich würde gerne Social Media Button unter ein Bild einbinden. Aktuell nutze ich dazu Fontawesome. Leider klappt aber nicht der Einbau von Links bzw. verlinkten E-Mail Adressen. Ich habe zwei Artikel auf der Seite eingerichtet: einen für die Bilder und einen für die Fontawesome.

    Der Quellcode für die Einbindung der Fontawesome sieht so aus:
    HTML-Code:
    <p style="text-align: left; padding-left: 60px;">[nbsp]</p>
    <p style="text-align: left; padding-left: 60px;"><em class="fa fa-envelope fa-2x" style="color: #00000;">[nbsp]</em></p>
    Aktuelle sieht es auf der Website so aus: http://investmentstrategyclub.com/in...formation.html

    Das Ziel so aussehen: http://fsinvest.de/team/.

    Vielleicht hat jemand auch eine eine Idee wie ich den Kasten um die Button bekommen.

    Viele Grüße
    Contao_123

    Ich nutze Contao 3.5.34

  2. #2
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Hat jemand eine Idee und weiß was ich meine?

  3. #3
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Sowas kann man komplett in CSS machen:
    Code:
    p em {
        border: 2px solid #000;
        padding: 1px 2px 3px 8px;
    }
    Besser ist noch, wenn Du den Elementen noch zusätzlich eine eindeutige Klasse mit gibst, sonst könnte es passieren, dass der CSS-Style auch zusätzlich andere Stellen adressiert.

  4. #4
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    In welche der CSS Dateien schreibe ich das dann?

    • resetbs.css
    • mobilenav.css
    • font-awesome.css
    • design.css
    • bootstrap.css


    Könnte eine Bezeichnung so aussehen?

    <p class="socialmediabutton">Text</p>
    <strong class="socialmediabutton">Text</strong>

    <p id="socialmediabutton">Text</p>
    <strong id="socialmediabutton">Text</strong>

  5. #5
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Das kommt darauf an, nach welchen Kriterien Du Deine CSS-Dateien erstellt hast.
    Wenn die Dateien alle aus einem Theme o.ä. stammen, würde ich eine neue (eigene) CSS-Datei anlegen und diese dann im Seitenlayout als letzte eintragen.

    Zu besseren Formatierung würde ich eher folgende Auszeichnung erstellen:
    Code:
    <div class="socialmediabutton">
      <p>Text</p>
      <p><strong>Text</strong></p>
    </div>

  6. #6
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Ja ich greife auf Daten aus einem Theme zurück.

    Sieht mein CSS Code dann so aus?

    Code:
    p em {
        border: 2px solid #000;
        padding: 1px 2px 3px 8px;
    }
    <div class="socialmediabutton">
      <p>Text</p>
      <p><strong>Text</strong></p>
    </div>
    Bildschirmfoto 2019-03-18 um 11.06.36.png
    Geändert von contao_123 (18.03.2019 um 10:27 Uhr)

  7. #7
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Nein, natürlich kommt der HTML-Code nicht in die CSS-Datei!

    Du hattest doch in Deinem ersten Beitrag einen Ausschnitt des Quellcodes stehen. Den Teil könntest Du entsprechend anpassen.
    Im CSS brauchst Du dann auch nicht mehr auf p em zugreifen, sondern kannst das durch die Klassenangebe direkt mit der Klasse .socialmediabutton machen.

  8. #8
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Ich weiß leider nicht wie ich das machen soll.

  9. #9
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Dann müßtest Du erstmal schildern, wie Du diese Elemente aufgebaut hast, welche Inhaltselemente Du verwendest.
    Vorne hast Du geschrieben, dass es 2 Artikel sind, das kann ich aber nicht nachvollziehen, da sonst mehr HTML dazwischen sein müßte. Vielleicht helfen uns ein paar Screenshots dabei weiter.

  10. #10
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Okay.

    Also ich habe in der Seite zwei Artikel eingerichtet einen für die Bilder und einen Artikel für die Buttons. Wenn ich beides in einen Artikel packe, dann erscheinen die Buttons nicht unter den Bildern.

    Ich habe aktuell 3 Bilder und verwende daher den Zusatz col-lg-4.
    Die Buttons habe ich aktuell über ein Textelement eingefügt.

    Bildschirmfoto 2019-03-18 um 12.59.04.png
    Bildschirmfoto 2019-03-18 um 12.58.51.png

  11. #11
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Ich glaube so kommt Du nicht weit. Wie soll das in einem responsiven Layout funktionieren, wenn nicht alle zusammengehörende Daten durch ein Element, z.B. <div> umschlossen sind?
    Das solltest Du besser auf der Inhaltselemente-Ebene realisieren.

    Hast Du nicht in einem normalen Text-Inhaltselement alles zur Verfügung, was Du brauchst?
    • Du hast eine Überschrift (z.B. für den Namen)
    • Du hast ein Bild, was man einbinden und in der Größe definieren kann
    • Du hast einen Textbereich, wo Du alles unterhalb des Bildes reinschreiben kannst
    • Du kannst dem Inhaltselement eine Klasse mitgeben, so dass es sich für CSS von anderen Text-Inhaltselementen unterscheidet.

    Die mehreren Spalten kannst Du dann mit CSS erstellen, oder mit einem Gridsystem Deiner Wahl oder mit z.B. "Rocksolid Columns"
    Dann kannst Du auch mit CSS darauf Einfluss nehmen, wie sich die Spalten bei schmaleren Bildschirmen (Smartphone) verhalten sollen (Stichwort Media Queries)

  12. #12
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Durch die Erfassung von allem in einem Inhaltselement löse ich das Responsive Problem.

    Ich habe aber dann immer noch keine Lösung für die Einbindung von Social Media Buttons und deren Verlinkung.

  13. #13
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Du kannst doch in dem Textfeld alles eintragen, wo ist das Problem dabei?
    Die <em>-Tags für Awesomefont musst Du ggf. in dem Quellcode-Modus des Editors nachtragen oder verfeinern.
    Die Links kannst Du direkt im Editor setzen.

    In der Bildposition kannst du festlegen, dass das Bild über dem Text steht.

  14. #14
    Contao-Nutzer
    Registriert seit
    13.03.2019.
    Beiträge
    18

    Standard

    Habe nach wie vor diesen Text im Editor stehen

    HTML-Code:
    <p style="padding-left: 60px;"><em class="fa fa-linkedin fa-2x" style="color: #151313;"><br><a href="http://www.google.de">[nbsp]</a><br></em></p>
    Die Verlinkung klappt aber nicht und zwei Icons bekomme ich auch nicht nebeneinander.

    Bildschirmfoto 2019-03-18 um 14.28.08.png

  15. #15
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.284
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    Du möchtest 2 Icons nebeneinander haben, z.B. LinkedIn und E-Mail und die sollen jeweils auf verlinkt sein?

    Dann müssen natrlich beide Icons in einem <p>-Tag stehen und ohne <br> dazwischen, denn das bedeutet immer einen Zeilenumbruch (also untereinander).
    Hast Du neben dem Icon noch Text stehen, wie LinkedIn o.ä.?

    Ich denke, mit dem <em> kann man per Awesome-Font nur einen Icon hinzufügen, den aber nicht verlinken, dann würdest Du eher das Fontzeichen im Text brauchen und das in <a>-Tags einschließen.
    Vielleicht hilft Dir das weiter: https://stackoverflow.com/questions/...cons-clickable

  16. #16
    Contao-Nutzer Avatar von harley-rider
    Registriert seit
    08.07.2013.
    Ort
    Bern, CH
    Beiträge
    196

    Standard

    Wieso machst du unter jedem Bild nicht eine zweispaltige Tabelle ?
    linke Spalte rechtsbündig und rechte Spalte linksbündig.
    Dann noch 'etwas Abstand vom mittleren Zellenrand...

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
  •