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

Hat jemand eine Idee und weiß was ich meine?

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.

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>

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>

---

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>

---

Anhang 22055

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.

Ich weiß leider nicht wie ich das machen soll.

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.

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.

Anhang 22056
Anhang 22057

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)

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.

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.

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.

Anhang 22059

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

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...