Mehrere html Badges nebeneinander anordnen

[cocktail92]

Hi,

bin neu hier und eine kleine Randinfo zu mir: ich kenne mich in Sachen html, css, etc überhaupt nicht aus. 

Haben das Zeug vor Jahren in der Schule mal angesprochen und ein wenig rumgespielt, aber das ist einfach zu lange her.

Nun zu meiner Frage und gleichzeitigen Bitte, ich würde gerne die 3 Badges auf den Screenshots nebeneinander einbetten. 

Mit Float left, right, center habe ich es bereits geschafft sie zu Positionieren, nur leider links, mitte, rechts untereinander folgend, nicht in der selben Zeile bzw. Höhe.

Die angehängte txt Datei ist der Code, könnte mir hier zufällig jemand sagen wo ich was einfügen muss, oder mir den Code ggfs. sogar so schreiben,

damit sie wirklich alle auf selber Höhe nebeneinander angeordnet sind?

Viele Grüße

 

PS.: Falls es hier nicht hingehört, tut es mir Leid, dachte jedoch, dass sowas für erfahrene IT'ler nur eine Basicaufgabe ist 😅

Code.txt

Bearbeitet 22. Dezember 2020 von cocktail92

[muenster23]

Nimm am besten Bootstraps da lassen sich die sachen gut nebeneinander anordnen und sind in der selben Höhe. Bootstraps kannst du dir ganz einfach dowloaden und im Internet steht dann auch dazu wie man es in HTML Datei einbindet und wie es funktioniert

[cocktail92]

Danke für den Tipp, habe es mir eben runtergeladen und durchgesehen, muss allerdings ehrlich sagen, das sind für mich komplett spanische Dörfer 😂

[Max112]

Wenn das für dich Spanisch ist empfehle ich dir erstmal ganz Basic anzufangen. Für badges anordnen empfiehlt sich eine tabelle

[cocktail92]

vor 1 Minute schrieb Max112:

Wenn das für dich Spanisch ist empfehle ich dir erstmal ganz Basic anzufangen. Für badges anordnen empfiehlt sich eine tabelle

Hi, danke für deinen Beitrag, aber ich habe ja grundlegend nicht gesagt, dass ich einen Crashkurs etc. suche, sondern eher um eine einmalige Hilfestellung gebeten, da ich normalerweise nie mit sowas zu tun habe und grade einfach nicht weiter weiß

[Visar]

Die Hilfestellung hast du, eigentlich, schon erhalten: Beschäftige dich mit den Basics.

Das ist wertvoller als wenn dir jemand eine Tabelle o.Ä. zusammen frickelt. Aber, bitte...

<table>
  <tr>
    <td>
      <script type="text/javascript">(function () {var e = document.getElementsByTagName("head")[0] || document.documentElement;var d = document.createElement("script");d.src= "https://widget.myhammer.com/tradesman/seal/fetch/2335041f-c548-11ea-af49-0a81bf13ed96";d.type = "text/javascript";d.async = true;d.defer = true;e.insertBefore(d, e.firstChild);})();</script><a id="myhammer-widget-2335041f-c548-11ea-af49-0a81bf13ed96" rel="nofollow" href="https://www.my-hammer.de">MyHammer - Handwerkerportal Nr. 1</a>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-fce3d9e5-d329-4513-95da-d5c45f4c8a69"></div>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-8a14d47e-01e6-4101-a44b-05fd8872084f"></div>
    </td>
  </tr>
</table>

Viel Vergnügen. 😉

[cocktail92]

vor 43 Minuten schrieb Visar:

Die Hilfestellung hast du, eigentlich, schon erhalten: Beschäftige dich mit den Basics.

Das ist wertvoller als wenn dir jemand eine Tabelle o.Ä. zusammen frickelt. Aber, bitte...

<table>
  <tr>
    <td>
      <script type="text/javascript">(function () {var e = document.getElementsByTagName("head")[0] || document.documentElement;var d = document.createElement("script");d.src= "https://widget.myhammer.com/tradesman/seal/fetch/2335041f-c548-11ea-af49-0a81bf13ed96";d.type = "text/javascript";d.async = true;d.defer = true;e.insertBefore(d, e.firstChild);})();</script><a id="myhammer-widget-2335041f-c548-11ea-af49-0a81bf13ed96" rel="nofollow" href="https://www.my-hammer.de">MyHammer - Handwerkerportal Nr. 1</a>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-fce3d9e5-d329-4513-95da-d5c45f4c8a69"></div>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-8a14d47e-01e6-4101-a44b-05fd8872084f"></div>
    </td>
  </tr>
</table>

Viel Vergnügen. 😉

Vielen Dank, hat mir sehr geholfen!

 

[pr0gg3r]

Wieso denn eine Tabelle dafür nehmen... Flexbox ist dafür das richtige Stichwort...

[Visar]

Dir wird beim Lesen ja aufgefallen sein, dass der Autor wenig bis keine Lust hat sich mit dem Thema auseinanderzusetzen. Dann wird die Lösung eben quick and dirty, bevor ich meine Zeit in Flexbox und ggf. noch die Suche nach einem passenden Polyfill investiere, sofern auch ältere IE-Versionen unterstützt werden sollen.

Sonst bin ich da ganz bei dir. Flexbox wäre passender, aber wenn er mit einer Tabelle genauso glücklich ist..

[pr0gg3r]

vor 18 Minuten schrieb Visar:

[...] sofern auch ältere IE-Versionen unterstützt werden sollen.

Wenn man lieber 50% der mobilen Nutzer ausschließen möchte, nur um 1% der älteren Browser zu unterstützen... Kann man so machen

vor 20 Minuten schrieb Visar:

Dir wird beim Lesen ja aufgefallen sein, dass der Autor wenig bis keine Lust hat sich mit dem Thema auseinanderzusetzen.

Naja, das hast du jetzt so interpretiert. Er möchte kein Bootstrap lernen (was ich nachvollziehen kann, weil es sich ja nur um ein einzelnes Problem handelt bei dem das komplette Bootstrap op wäre). Aber ein bisschen HTML/CSS Erfahrung hat er ja und da denke ich, dass ein wenig Flexbox doch möglich wäre. Uudem kann man mit dem richtigen Stichwort auch über Google einiges finden (zB "flexbox divs nebeneinander anordnen").

[Visar]

vor 4 Minuten schrieb pr0gg3r:

Naja, das hast du jetzt so interpretiert.

Stimmt wohl, aber: Seine Erfahrung bezieht sich ausschließlich auf Gefrickel in der Schulzeit, die mehrere Jahre zurückliegt. Er selbst scheint nicht mehr zu wissen, wie eine Tabelle erstellt wird, weshalb soll ich da dann mit DIVs, Flexbox und CSS ankommen und ihn damit erschlagen? Könnte ich natürlich, aber...

Ich könnte ihn genauso gut an 'ne Seite wie https://www.cssportal.com/css-flexbox-generator/ verweisen, wo ihm HTML & CSS direkt ausgespuckt werden. Problem dabei ist, dass Flexboxen relativ viele Optionen beinhalten und solange er sich nicht damit beschäftigt, wird er nicht verstehen, was er da überhaupt macht - oder was ich ihm da zusammengestückelt habe. Tabelle ist nicht schick, nicht modern und für Mobilgeräte auch eher ein Krampf, aber sie ist einfach, geht schnell und erfüllt die Anforderungen. Wir wissen ja auch nicht, wo er das überhaupt benötigt. Im Zweifelsfall ist der Ansatz also vielleicht sogar vertretbar, insbesondere, sofern es gar keine für Mobilgeräte optimierte Version der Seite gibt.

Vielleicht ist es auch totaler Nonsens. Aus der Anfrage lässt sich das leider nicht weiter ableiten.

[cocktail92]

Also ums kurz zu erklären, ich bin im Grunde ein einfacher Kfz-Mechatroniker und Autoglaser, der mit IT eigentlich überhaupt nichts am Hut hat. Ich versuche nur nebenzu über Strato einen kleinen Online-Shop für Kfz-Ersatzteile aufzubauen und hier gibt es natürlich die Funktion verschiedene Seiteninhalte einzustellen, darunter auch HTML Felder. Da ich weiß, dass man mit HTML etc. natürlich Internetseiten gut aufhübschen kann, wollte ich mittels diesen einfach Bewertungsbadges von anderen Seiten auf denen meine Firma vertreten ist mit einbringen in den Online-Shop um dadurch eventuell mehr Vertrauen zu gewinnen und mehr Menschen dazu zu bringen auch was zu bestellen.

Ihr könnt natürlich gerne mal auf der Seite vorbeischauen und eventuell Vorschläge preisgeben wenn euch danach ist. Aber wie gesagt kann ich mit IT einfach absolut nichts anfangen. Ich bau euch gerne eure Motoren auseinander und wieder zusammen oder sonst was, da hat einfach jeder seine eigenen Stärken und Schwächen, zudem habe ich momentan auch nicht wirklich die Zeit dazu mich großartig mit so etwas komplexen zu beschäftigen, daher natürlich auch nur ein Website Baukasten und nichts spezielles.  Online-Shop

 

Edit: Wie weiter oben erwähnt wurde, ja die Badges werden auf dem Handy leider nicht so angezeigt wie auf dem normalen Bildschirm, aber momentan kann ich soweit damit Leben, daher nochmal ein Dankeschön!

Bearbeitet 23. Dezember 2020 von cocktail92